갤러리에 jQuery snipe 사용하기

jQuery.snipe으로 놀고, 갤러리에서 몇 개의 이미지로 작업 해보려고합니다. HTML
당신은 SRC하는 "데이터 줌"속성 및 ID로 이미지가에서 갤러리에 jQuery snipe 사용하기

.
정렬되지 않은 목록에 포함 된 src, "data-zoom"속성 및 ID가 포함 된 축소판이 각각 있습니다.

JS 의사 코드
각 im의 클릭하면 기능이 실행됩니다.
이 함수는 src, "data-zoom"속성 및 클릭 한 이미지의 ID를 해당 변수에 저장합니다.

그런 다음 큰 이미지 src, "data-zoom"속성 및 id를 변수의 ID로 변경합니다.

그런 다음 snipe() 메서드는 변수의 ID를 선택기로 사용하여 실행됩니다.

문제점
작은 이미지를 클릭하면 큰 이미지가 변경되고 도저히 잘 작동합니다. 다른 축소판을 클릭하면 큰 그림이 변경되지만 돋보기의 이미지는 클릭 된 첫 번째 이미지와 동일하게 유지됩니다. 저격 라이브러리를 통해 한 번 보았는데 문제가있는 곳을 볼 수 없습니다.

내 코드

<body> <div id="photoGal"> <img src="picSmall.jpg" data-zoom="pic.jpg" id="snipe" /> </div> <div id="thumbs"> <ul> <li><img id="snipe" style="max-height:10%; max-width:10%" src="picSmall.jpg" data-zoom="pic.jpg" /></li> <li><img id="snipe2" style="max-height:10%; max-width:10%" src="pic2Small.jpg" data-zoom="pic2.jpg" /></li> </ul> </div> <script type="text/javascript"> $('li img').on("click" , function(){ var source = $(this).attr('src'); var dataSource = $(this).attr('data-zoom'); var tag = $(this).attr('id'); $('#photoGal img').attr("src", source); $('#photoGal img').attr("data-zoom", dataSource); $('#photoGal img').attr("id", tag); $('#'+tag).snipe(); }); </script> </body>

출처

2013-05-22 roryWolf

나는 페이지에서 이미지를 제거하고, 변수 새 HTML() 문자열을 채우는하여 문제를 해결했습니다.

새로운 코드

HTML

<div id="photoGal" > 
<img src="pic.jpg" data-zoom="pic.jpg" id="snipe" style="max-height:40%; max-width:40%" /> 
</div> 


    <ul> 
    <li><img class="element isotope-item" src="thumbs/pic.jpg" data-zoom="pic.jpg" /></li> 
    <li><img class="element isotope-item" src="thumbs/pic2.jpg" data-zoom="pic2.jpg" /></li> 
    <li><img class="element isotope-item" src="thumbs/pic3.jpg" data-zoom="pic3.jpg" /></li> 
    </ul>

$('li img').on("click" , function(){ 



    $('#photoGal img').remove(); 


    var source = $(this).attr('src'); 
    var dataSource = $(this).attr('data-zoom'); 
    var tag = $(this).attr('id'); 
    console.log(s); 

    $('#photoGal').html('<img style="max-height:40%; max-width:40%" src=" ' + source + '" data-zoom=" ' + dataSource + '" id="snipe" />'); 

    $('#snipe').snipe(); 
});

출처

2013-05-23 22:30:48 roryWolf

갤러리에 jQuery snipe 사용하기

답변

관련 문제