Question

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

有任何想法或提示吗？

Answer 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');
});

图像库弹出窗口滑动到其他所有图像

1 个答案: