всплывающие окна галереи изображений к каждому другому изображению - PullRequest
Новая
       24

всплывающие окна галереи изображений к каждому другому изображению

1 голос
/ 11 ноября 2011

Я создал свою первую галерею изображений для мобильных устройств 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 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>' );
}

Есть мысли или намеки?

1 Ответ

0 голосов
/ 11 ноября 2011

Я думаю, что проблема может заключаться в том, что класс 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');
});
...