2012-01-18 13 views
2

私はこのサイトがどのように配置されているのが好きですかhttp://www.templerinteriors.co.nz/what-weve-done/kitchens/kitchen-gallery-c/私が知りたいのは、画像を下にクリックして大きな画像をクリックしたときにコンテンツを変更する最良の方法ちょうどクリックされたものとして。jqueryで画像が変更される

$("img").click(function(){ 
    $("#main_img").prop("src", $(this).prop("src")); 
}) 

これは、クリックされた画像のSRCとメイン画像のSRCを置き換える:あなたは、ID =「main_img」を使用してメイン画像を持っている場合はjQueryを使って

答えて

1

サムネイルを並べ替えられていないリストに入れ、ulに「サムネイル」というIDがあるとします。その後、親指をクリックするたびに置き換えたいIDの大きな画像にIDを追加し、その1つを「galleryBig」と呼びました。

<img id="galleryBig" src="images/gallery/large/01.jpg" /> 
<ul id="thumbnails"> 
    <li><a href="images/gallery/large/01.jpg" target="_blank"><img src="images/gallery/thumb/01.jpg" /></a></li> 
    <li><a href="images/gallery/large/02.jpg" target="_blank"><img src="images/gallery/thumb/02.jpg" /></a></li> 
</ul> 

次にあなたが追加する必要があり、すべては次のjQueryコード

$("li a", "#thumbnails").click(function(event) { 
    event.preventDefault(); 
    var nameIMG = $(this).attr("href"); 
    $("#galleryBig").attr("src", nameIMG); 
}); 

で、あなたのサムネイルにタグを追加すると、ターゲット_blankを使用してに固執する理由の理由は、人々をさせることですJavaScriptを使わないとギャラリーも使用できます。

あなたが少しより高度でよりよい何かを探して(クロスフェード効果を)したい場合は、あなたがこれをチェックすることがあります:stackoverflow - basic jQuery Gallery
をそして私の答え(緑の「目盛り」の横に付き1までスクロールしますそれ)

助けてくれる希望:

1

は、あなたがこのような何かを行うことができます。

関連する問題