如何在MVC3中创建动态图像库弹出窗口？

Question

我有一个要求，我需要创建一个弹出图像库。基本上，用户点击一个图像文件夹，它弹出第一个图像文件全尺寸和一组可缩放的缩略图。用户可以点击缩略图在弹出窗口中显示图像。我不想加载图像，直到用户单击图像文件夹。

是否有jQuery图书馆或商业控制，将已经这样做？

Answer 1

问题是我不知道要搜索什么。动态图片库弹出窗口称为灯箱。在谷歌上使用的查询是jquery lightbox。在所有可用的内容中，PrettyPhoto是唯一一个在弹出窗口中有缩略图图像并且在弹出窗口期间动态加载图像的API。

这里都是可选的：

http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/

http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

这里是作为一个动态弹出时用一个API和缩略图只有一个：

http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

这是激活PrettyPhoto所需的脚本：

<script type="text/javascript" charset="utf-8"> 
    $(document).ready(function(){ 
    $("a[rel^='prettyPhoto']").prettyPhoto(); 
    }); 
</script> 

这里是脚本定义照片：

<script type="text/javascript" charset="utf-8"> 
    api_images = ['images/fullscreen/image1.jpg','images/fullscreen/image2.jpg','images/fullscreen/image3.jpg']; 
    api_titles = ['Title 1','Title 2','Title 3']; 
    api_descriptions = ['Description 1','Description 2','Description 3'] 
</script> 

这是我用来点击文件夹图像上与内容处理程序。 ＃的href很重要：

<a href='#' onclick=" $.prettyPhoto.open(api_images,api_titles,api_descriptions);" title='@item.Folder.Title'>   
    <img style="max-height: 160px; max-width: 260px;" id='Img@(item.Folder.Id)' alt='@item.Folder.Title' title='@item.Folder.Title' src='@Url.Content("~/img.ashx")?mediaId=@item.Folder.Id' style='padding: 10px' /> 
</a>