0

我在这里有一个简单的 jQuery 画廊：http: //encoreazalea.com/ee/the-collection/in-the-landscape

当您单击其中一个缩略图时，较大的图像应该显示在预览图像区域的左侧。但是，它会在另一个窗口中打开。

这是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 回答