asp.net-mvc - 如何在 MVC3 中创建动态图片库弹出窗口？

Question

我需要创建一个弹出式图片库。本质上，用户单击一个图像文件夹，它会弹出第一个完整大小的图像文件和一组可滚动的缩略图。用户将单击缩略图以在弹出窗口中显示图像。在用户单击图像文件夹之前，我不想加载图像。

是否有已经可以执行此操作的 jquery 库或商业控件？

Answer 1

问题是我不知道要搜索什么。动态图片库弹出窗口称为灯箱。在 google 上使用的查询是 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>