이미지 갤러리 팝업이 다른 모든 이미지로 스 와이프합니다

저는 처음으로 jQuery 모바일 이미지 갤러리를 만들었지 만 수정할 수없는 버그가 있습니다. 이미지가 도청되면 전체 화면으로 팝업되고 모든 이미지를 회전시켜 이미지를 스 와이프하거나 이전/다음 화살표를 누를 수 있습니다.이미지 갤러리 팝업이 다른 모든 이미지로 스 와이프합니다

편집 :이 질문을 쓴 이후로 문제가 약간 변경되었으므로 질문과 코드를 약간 변경해야합니다.

이미지가 갤러리에 표시된 순서에 따라 다른 모든 이미지로 스 와이프됩니다. 나는 동적으로 각 이미지에 데이터 인덱스를 추가하고 있지만 어떻게 든 결과는 튀어 나오는 각 이미지에 대해 tabindex = "0"입니다.

<body> 
     <!-- gallery content --> 
     <div data-role="content" id="pagecontent" class="gallerycontent"> 
    <a href="#imgshow" data-transition="pop" data-rel="dialog"> 
     <img src="../img/someimage.jpg" alt="someimage.jpg"/> 
     </a> 
      <!-- plus more unordered images --> 
     </div> <!--/content--> 
    </div><!-- /page --> 

<!-- full screen image preview --> 
    <div data-role="dialog" id="imgshow" data-theme="d"> 
     <div data-role="header" data-theme="d"> 
      <div id="dialoghead"></div> 
     </div> 

     <div data-role="content" data-theme="d"> 
      <center><div id="dialogcontent"></div></center> 
     </div> 

     <div data-role="footer"> 
      <center> 
       <a href="#" id="prevbtn" data-role="button" data-iconpos="notext" data-icon="arrow-l">Previous</a> 
       <a href="#" id="nextbtn" data-role="button" data-iconpos="notext" data-icon="arrow-r">Next</a> 
      </center> 
     </div> 
    </div> 
</body>

jquery의 'on-touch'기능과 'gonext'기능.

//on-touch function 
    $('.gallerycontent img').bind('tap',function(event, ui){ 

     var src = $(this).attr("src"); 
     var alt = $(this).attr("alt"); 
     $('#dialogcontent').empty().append('<a href="#galleryImg"><img src="' + src + '" style="width:100%;"/></a>'); 
     $('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>'); 
     $(this).parent().addClass('selectedimg'); 
    }); 
function gonext() { 
     var current = $('a.selectedimg'); 
     if (current.hasClass('last')) { 
     var next = $('a.first') 
     } else { 
     var next = current.next(); 
     } 

     var src = next.find('img').attr("src"); 
     var alt = next.find('img').attr("alt"); 
     next.addClass('selectedimg'); 
     current.removeClass('selectedimg'); 
     $('#dialogcontent').empty().append('<a href="#gallerypage"><img src="' + src + '" style="width:100%;"/></a>'); 
     $('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>'); 
}

어떤 생각이나 힌트가 있습니까?

출처

2011-11-11 Karin

내가 처음에 갤러리를 건설하는이 튜토리얼을 따라 갔다. co.kr/tutorials/jquery-mobile-gallery # more-20 – Karin

팝업을 열었을 때 selectedimg 클래스가 제거되지 않는 것이 문제라고 생각합니다. 이런 식으로, 단지이 기능에 addClass 라인 전에이 줄

$('.selectedimg').removeClass('selectedimg');

을 추가하십시오 : HTTP : //www.irinavelychko

//on-touch function 
$('.gallerycontent img').bind('tap',function(event, ui){ 
    var src = $(this).attr("src"); 
    var alt = $(this).attr("alt"); 
    $('#dialogcontent').empty().append('<a href="#galleryImg"><img src="' + src + '" style="width:100%;"/></a>'); 
    $('#dialoghead').empty().append('<center><h2>' + alt + '</h2></center>'); 
    $('.selectedimg').removeClass('selectedimg'); 
    $(this).parent().addClass('selectedimg'); 
});

출처

2011-11-11 15:29:53 Mottie

감사합니다.하지만 아무 것도 바뀌지 않습니다. – Karin

이미지 갤러리 팝업이 다른 모든 이미지로 스 와이프합니다

답변

관련 문제