asp.net-mvc - MVC3 で動的な画像ギャラリー ポップアップを作成するにはどうすればよいですか?

Question

ポップアップ画像ギャラリーを作成する必要があるという要件があります。基本的に、ユーザーが画像フォルダーをクリックすると、最初の画像ファイルがフルサイズでポップアップし、スクロール可能なサムネイルのグループが表示されます。ユーザーはサムネイルをクリックして、ポップアップ内に画像を表示します。ユーザーが画像フォルダーをクリックするまで、画像をロードしたくありません。

すでにこれを行うjqueryライブラリまたは商用コントロールはありますか?

Answer 1

問題は、何を検索すればよいかわからなかったことです。動的画像ギャラリー ポップアップはライトボックスと呼ばれます。Google で使用するクエリは jquery lightbox でした。利用可能なすべてのものの中で、PrettyPhoto は、ポップアップにサムネイル画像があり、ポップアップ中に画像を動的にロードする API を持つ唯一のものです。

利用可能なものは次のとおりです。

http://www.designyourway.net/blog/resources/30-effective-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>