Добавив картинку в список, он не найдет класс страницы. - PullRequest
Новая
       30

Добавив картинку в список, он не найдет класс страницы.

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

У меня проблема с добавлением картинок в список картинок, использующих photoswipe.Страница jquery для мобильных устройств использует страницу галереи классов, которая откроет ее в хорошей программе просмотра.Я пытаюсь добавить больше картинок с функцией добавления в список картинок.Это работает нормально, только проблема в том, что когда я нажимаю на изображение, оно НЕ откроется в хорошем окне просмотра.Я думаю, это как-то связано со страницей галереи класса.В некотором роде добавленные изображения от jquery не могут найти страницу галереи класса.Что я могу сделать?

Вот так выглядит страница:

Javascript в ГОЛОВЕ: 

    <script type="text/javascript">
        /*
         * IMPORTANT!!!
         * REMEMBER TO ADD  rel="external"  to your anchor tags. 
         * If you don't this will mess with how jQuery Mobile works
         */

        (function(window, $, PhotoSwipe){

            $(document).ready(function(){

                $('div.gallery-page')
                    .live('pageshow', function(e){

                        var 
                            currentPage = $(e.target),
                            options = {},
                            photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));

                        return true;

                    })

                    .live('pagehide', function(e){

                        var 
                            currentPage = $(e.target),
                            photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

                        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                            PhotoSwipe.detatch(photoSwipeInstance);
                        }

                        return true;

                    });

            });

        }(window, window.jQuery, window.Code.PhotoSwipe));

    </script>

Страница в теле: 

    <div data-role="page" data-add-back-btn="true" id="Gallery" class="gallery-page" >
        <div data-role="header">
            <div data-role="navbar"> 
                <ul>
                    <li><a href="#spots" data-transition="none" data-direction="reverse"><img src="images/m1.png"/></a></li>
                    <li><a href="#addspots_page1" data-transition="none" data-direction="reverse"><img src="images/m2.png"/></a></li>
                    <li><a href="#internetspots" data-transition="none" data-direction="reverse"><img src="images/m3.png"/></a></li>
                </ul>
            </div><!-- /navbar --> 
        <h2>Extra information</h2> 
        </div><!-- /header -->


        <div data-role="content">   
        <ul class="gallery" id="pictures" >
        <!-- is necessery because photoswipe can't have null images -->
        <li class="s1"><a href="images/no_photo.jpg" rel="external"><img src="image1.jpeg" alt="Image 001" /></a><p>s1</li>
        </ul>

        </div>

    </div>

Добавить картинку с помощью jquery: 

    $("#pictures").append('<li class="s2"><a href="image2.jpeg" rel="external"><img src="image2.jpeg" alt="Image 001" /></a></li>'</li>')

Ответы [ 2 ]

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

Попробуйте позвонить .photoSwipe на приложенном изображении: 

$("#pictures")
    .append('<li class="s2"><a href="image2.jpeg" rel="external"><img src="image2.jpeg" alt="Image 001" /></a></li>'</li>')
    .find("a").photoSwipe(options);
0 голосов
/ 16 ноября 2011

1- Это синтаксическая ошибка или просто ошибка при публикации вашего вопроса 

// extra single quote and closing tag next to the closing </li> element
$("#pictures").append('<li class="s2"><a href="image2.jpeg" rel="external"><img src="image2.jpeg" alt="Image 001" /></a></li>'</li>')

Должно быть 

$("#pictures").append('<li class="s2"><a href="image2.jpeg" rel="external"><img src="image2.jpeg" alt="Image 001" /></a></li>')

Обновление списков ЕслиВы добавляете элементы в просмотр списка, вам нужно вызвать метод refresh(), чтобы обновить стили и создать любые вложенные списки, которые будут добавлены.Например: 

$('#mylist').listview('refresh');

Обратите внимание, что метод refresh() влияет только на новые узлы, добавленные в список.Это сделано из соображений производительности.Все элементы списка, которые уже были улучшены, будут игнорироваться процессом обновления.Это означает, что если вы измените содержимое или атрибуты уже расширенного элемента списка, они не будут отражены.Если вы хотите обновить элемент списка, замените его на новую разметку перед вызовом обновления.

Документы:

Пример: 

// using the id of your <ul> tag
$('#pictures').listview('refresh');

ОБНОВЛЕНИЕ:

Возможно, вам также потребуется обновить страницу, например, 

// id="Gallery"
$('#Gallery').trigger('create');
...