Question

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

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

Answer 1

问题是我不知道要搜索什么。动态图库的弹出窗口称为灯箱。在谷歌上使用的查询是jquery灯箱。在所有可用的中，PrettyPhoto是弹出窗口中唯一具有缩略图图像的API，以及在弹出窗口期间动态加载图像的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>

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

1 个答案: