Question

这是我正在尝试的。单击每个缩略图我必须显示较大的图像。我需要一些帮助，以便我可以知道我的问题为什么点击方法对我不起作用。

Thumbs Part HTML

<div class="ScreenShot" id="__control0" data--ui="__control0">
<div id="thumbs" data--ui="thumbs" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set0" data--ui="__set0" class="UiUx3DS">
<div id="__set0-items">
<div id="__view0" data--ui="__view0" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item0-__set0-0" data--ui="__item0-__set0-0">
<div id="__layout0-0" data--ui="__layout0-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-0" data--ui="__image0-0" src="images/image_01_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-1" data--ui="__item0-__set0-1">
<div id="__layout0-1" data--ui="__layout0-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-1" data--ui="__image0-1" src="images/image_02_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item0-__set0-2" data--ui="__item0-__set0-2">
<div id="__layout0-2" data--ui="__layout0-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image0-2" data--ui="__image0-2" src="images/image_03_thumb.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

更大的图片HTML

<div id="panel" data--ui="panel" class="UiHLayout UiHLayoutNoWrap">
<div class="UiHLayoutChildWrapper">
<div id="__set1" data--ui="__set1" class="UiUx3DS">
<div id="__set1-items">
<div id="__view1" data--ui="__view1" class="UiUx3DSSV">
<div class="UiUx3DSSVFlow UiUx3DSSVItem UiUx3DSSVSelected" id="__item1-__set1-0" data--ui="__item1-__set1-0">
<div id="__layout1-0" data--ui="__layout1-0" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-0" data--ui="__image1-0" src="images/image_01_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-1" data--ui="__item1-__set1-1">
<div id="__layout1-1" data--ui="__layout1-1" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-1" data--ui="__image1-1" src="images/image_02_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
<div class="UiUx3DSSVFlow UiUx3DSSVItem" id="__item1-__set1-2" data--ui="__item1-__set1-2">
<div id="__layout1-2" data--ui="__layout1-2" class="uiVlt">
<div class="uiVltCell">
<img id="__image1-2" data--ui="__image1-2" src="images/image_03_large.jpg" class="UiImg" role="presentation" alt="" tabindex="-1">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Jquery的

$("#thumbs img").click(function(){
    $("#thumbs img.clicked").removeClass('clicked');
    $("#panel img").hide();
    $("#panel img:nth-child("+Number($(this).index()+1)+")").fadeIn();
    $(this).addClass('clicked');
});

以下是演示： http://jsfiddle.net/L7yKp/5/

点击每个缩略图时，相应的图像应为淡入淡出。但是这里每个较大的图像都在消失。

Answer 1

以下是符合您需求的简单工作演示：http://jsfiddle.net/D6XHt/1/

注意：这与你的html不一样，但是你应该向正确的方向努力。我使用的技术有一个缺点。如果没有启用JS，您的用户将只能看到大图。

但真正的优势是，如果你有很多图像，你将节省带宽和页面加载时间。这是因为只有当用户点击缩略图时才会加载每个大图像。

这是另一个包含文档中所有图像的工作解决方案。

http://jsfiddle.net/D6XHt/2/

如果您想在花哨的灯箱中弹出图像，请尝试

缩略图图像滑块

1 个答案: