如何在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>