图像库弹出滑动到所有其他图像答案

【问题标题】：image gallery pop-up swipes to every other image图像库弹出滑动到所有其他图像
【发布时间】：2011-11-11 10:11:20
【问题描述】：

我已经构建了我的第一个 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>' );
}

有什么想法或提示吗？

【问题讨论】：

我首先按照本教程构建了画廊：irinavelychko.com/tutorials/jquery-mobile-gallery#more-20

标签： javascript jquery mobile image-gallery swipe

【解决方案1】：

我认为问题可能是打开弹出窗口时 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');
});

【讨论】：

谢谢，但这并没有改变任何东西。