图像库弹出到其他图像

我已经建立了我的第一个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

我跟着本教程建立在首位的画廊：HTTP：//www.irinavelychko。 com/tutorials/jquery-mobile-gallery＃more-20 – Karin

我认为这个问题可能是selectedimg类在打开弹出窗口时没有被删除。尝试加入这一行

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

只是addClass线进入此功能之前，像这样：

//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

图像库弹出到其他图像

回答

相关问题