ここに簡単な 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>
私はこれを見て、私が欠けているものを見るのを助けるために、より良い処方箋でいくつかの目を使うことができます.
ありがとう。