0

ここに簡単な jQuery ギャラリーがあります: http://encoreazalea.com/ee/the-collection/in-the-landscape

サムネイルの 1 つをクリックすると、大きな画像がプレビュー画像領域の左側に表示されるはずです。ただし、別のウィンドウで開きます。

HTMLは次のとおりです。

<div id="preview">
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape16.jpg" class="gallery" alt="photo gallery" />
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape15.jpg" class="gallery" alt="photo gallery" />
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape14.jpg" class="gallery" alt="photo gallery" />
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape12.jpg" class="gallery" alt="photo gallery" />
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape13.jpg" class="gallery" alt="photo gallery" />
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape11.jpg" class="gallery" alt="photo gallery" />
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape10.jpg" class="gallery" alt="photo gallery" />
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape9.jpg" class="gallery" alt="photo gallery" />
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape8.jpg" class="gallery" alt="photo gallery" />
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape6.jpg" class="gallery" alt="photo gallery" />
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape7.jpg" class="gallery" alt="photo gallery" />
<img id="photo_large" src="http://encoreazalea.com/ee/landscape-gallery/landscape5.jpg" class="gallery" alt="photo gallery" />
</div>

</div><!-- end #content-hub -->

<div id="sidebar">
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape16.jpg" title="Landscape16"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape16_tn.jpg" alt="photo gallery"  /></a>
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape15.jpg" title="Landscape15"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape15_tn.jpg" alt="photo gallery"  /></a>
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape14.jpg" title="Landscape14"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape14_tn.jpg" alt="photo gallery"  /></a>
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape12.jpg" title="Landscape12"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape12_tn.jpg" alt="photo gallery"  /></a>
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape13.jpg" title="Landscape13"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape13_tn.jpg" alt="photo gallery"  /></a>
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape11.jpg" title="Landscape11"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape11_tn.jpg" alt="photo gallery"  /></a>
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape10.jpg" title="Landscape10"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape10_tn.jpg" alt="photo gallery"  /></a>
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape9.jpg" title="Landscape9"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape9_tn.jpg" alt="photo gallery"  /></a>
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape8.jpg" title="Landscape8"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape8_tn.jpg" alt="photo gallery"  /></a>
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape6.jpg" title="Landscape6"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape6_tn.jpg" alt="photo gallery"  /></a>
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape7.jpg" title="Landscape7"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape7_tn.jpg" alt="photo gallery"  /></a>
<a href="http://encoreazalea.com/ee/landscape-gallery/landscape5.jpg" title="Landscape5"><img class="gallery" src="http://encoreazalea.com/ee/landscape-gallery/landscape5_tn.jpg" alt="photo gallery"  /></a>
</div><!-- end #sidebar -->

jQuery は次のとおりです。

<script type="text/javascript">
$(document).ready(function() {
    $("a:has(img.gallery)").click(function() {
        var largePath = $(this).attr("href");
        var caption = $(this).attr("title");
        $("#photo_large").attr({ src: largePath});
        $("#caption1").text(caption);
        return false;
    });
});

</script>

私はこれを見て、私が欠けているものを見るのを助けるために、より良い処方箋でいくつかの目を使うことができます.

ありがとう。

4

2 に答える 2

2

問題は、ページでスクリプト エラーが発生していることです。したがって、それを見つけて修正する必要があります。dropmenu オブジェクトをロードする前に失敗するため、残りのスクリプトは機能しません。

JavaScript 構文をチェックするエディターを使用するか、jsfiddle の js lint 機能でコードをチェックしてください。

お役に立てれば..

于 2012-10-04T14:26:28.360 に答える
0

コードに問題はありません。それは正常に動作します。ページに他のエラーがあるため、実行されないだけです。エラーコンソールを見てください。上記のスニペットをコンソールで実行すると、機能します。

于 2012-10-04T14:28:40.307 に答える