基本的なjQueryギャラリー

Question

誰かが小さなjqueryの問題で私を助けることができたら、私は感謝します。私はHTML CSSに堪能で、jqueryプラグインを実装してjqueryを書いている知識がありません。

私はこのウェブサイトへのギャラリーページを構築しています。現在、私は完璧に動作するjquery caroselにサムネイルの行を持っています。

相続人は私は必要なもの：

ユーザiが、その大きな画像は、段階（第1サムネイル）に現在大きな画像の上にフェードを横断したいサムネイルをクリックします。

これは、jqueryの作成についての基本知識を持っている人にとっては、十分に簡単だと確信しています。

ここに私の現在のソースコードがあります。

http://www.silverbackstudios.co.uk/laurenmitchell/wedding-gallery.html

あなたの助けをありがとう！

ジャレット

Answer 1

まず親指する

<img id="gallery-big" src="images/gallery/wedding/large/1.jpg" width="940" height="445" /> 

その後、画像の名前を変更して、大きな画像とサムネイルの名前が同じになりますが、

images/gallery/wedding/large/1.jpg 
images/gallery/wedding/thumbs/1.jpg 

ことを行うのときは、次のjQueryコード

var clickable = true; 

$(document).on("click", ".thumb a", function(event) 
{ 
    event.preventDefault(); 

    if (clickable == true) 
    { 
     clickable = false; 

     // Get URL of the large image 
     var nameIMG = $("img", this).attr("src"); 
     nameIMG = nameIMG.replace("thumbs/", "large/"); 

     // Fade in the new image 
     $("#gallery").append('<div class="big-overlay"><img src="' + nameIMG + '" width="940" height="445" /></div>'); 
     $(".big-overlay").fadeIn("slow", function() 
     { 
      // Change the original <img> to the new image 
      $("#gallery-big").attr("src", nameIMG).load(function() 
      { 
       // Remove the overlay 
       $(".big-overlay").remove(); 
       clickable = true; 
      }); 
     }); 
    } 
}); 

...と、次のCSSルール

.big-overlay 
{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 10; 
    display: none; 
} 

これは何を追加することができます。このように、異なるフォルダに入れて再コードは、クリックされた親指イメージの大きなバージョンを含むオーバーレイを追加し、それをフェードインします。これが完了すると、元のイメージの検索パスが変更され（＃gallery-big）、次にth eオーバーレイ。

これは最適な解決策ではないかもしれませんが、仕事をする必要があります:)

Answer 2

jQueryライトボックスプラグインを試してください。

http://leandrovieira.com/projects/jquery/lightbox/

Answer 3

あなたたいが、それを行う場合は、自分自身は、親指にdata-src="location_of_full_size_image.jpg"を追加し、onClick方法であなたは、あなたの大きな画像にIDを追加する必要が

$('#gallery-big').attr('src', self.data('src'))