썸네일 이미지 슬라이더

여기 내가 원하는 부분입니다. 각 축소 이미지를 클릭하면 큰 이미지가 표시됩니다. 클릭 방법이 저에게 잘 돌아 가지 않는 이유를 알 수 있도록 도움이 필요합니다.썸네일 이미지 슬라이더

엄지 손가락 부분 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/

각 축소판을 클릭하면 해당 이미지가 흐려집니다. 하지만 여기서 모든 큰 이미지가 사라집니다. http://jsfiddle.net/D6XHt/1/

참고 :

출처

2012-08-27 Anonymous

다음은 사용자의 요구에 일치하는 간단한 작업 데모입니다 그것은 당신과 같은 HTML 아니지만 당신이 올바른 방향으로 추진해야한다. 내가 사용하는 기술에는 단점이 있습니다. JS를 사용하지 않으면 사용자가 큰 이미지에서만 볼 수 있습니다.

BUT 큰 이미지가 많은 경우 대역폭과 페이지 로딩 시간을 절약 할 수 있습니다. 모든 큰 이미지는 사용자가 미리보기 이미지를 클릭 할 때만로드되기 때문입니다.

다음은 문서의 모든 이미지가 포함 된 다른 작업 솔루션입니다.

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

당신은 멋진 라이트 박스 팝업에 이미지가

http://fancybox.net/home 또는
http://www.jacklmoore.com/colorbox

출처

2012-08-27 11:14:47 gearsdigital

나는 이미지를 표시하는 SRC 경로를 사용한다, 하지만 당신은 그 attr 데이터를 사용하여 그것을 보여주고있다 - 전체, 당신은 경로로 src를 사용하여 데모를 보내 주시겠습니까 –

내 예제는 usin입니다 g 이미지를 표시 할 src 경로. 문서에 모든 이미지가 있어야합니까? – gearsdigital

예, 더 큰 이미지가있는 팝업이 열리는 각 축소판의 Onclick –

썸네일 이미지 슬라이더

답변

관련 문제