0

ここでこれが私が試みていることです。各サムネイルをクリックすると、大きな画像を表示する必要があります。クリックメソッドがうまく機能しない理由を知るために、助けが必要です。

親指部分 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>

Jクエリ

$("#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/

各サムネイルをクリックすると、対応する画像がフェードインされます。しかし、ここではすべての大きな画像がフェードインしています。

4

1 に答える 1

0

ニーズに合った簡単な動作デモを次に示します: http://jsfiddle.net/D6XHt/1/

注: これはあなたのものと同じ html ではありませんが、正しい方向にプッシュする必要があります。私が使用している手法には、1 つの欠点があります。JS を有効にしないと、ユーザーは大きな画像でのみ表示されます。

しかし、実際の利点は、画像が多い場合に帯域幅とページの読み込み時間を節約できることです。これは、ユーザーがサムネイルをクリックした場合にのみ、すべての大きな画像が読み込まれるためです。

これは、ドキュメント内のすべての画像を含む別の実用的なソリューションです。

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

ファンシーなライトボックスポップアップで画像を表示したい場合は、試してみてください

于 2012-08-27T11:14:47.073 に答える