Question

我在使用photoswipe的列表图片中附加图片时遇到问题。 jquery移动页面使用类库 - 页面，它将在一个漂亮的查看器中打开它。我尝试将更多带有追加功能的图片添加到图片列表中。这工作正常只有问题是当我点击图像时它不会在漂亮的查看器中打开它。我认为这与班级画廊页面有关。在某种程度上，jquery添加的图片无法找到类库页面。我该怎么办？

这就是页面的样子：

HEAD中的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>')

Answer 1

尝试在附加图片上调用.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);

Answer 2

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()方法仅影响附加到a的新节点名单。这是出于性能原因而完成的。已经有任何列表项刷新过程将忽略增强功能。这意味着如果您更改已增强列表中的内容或属性项目，这些将不会反映出来。如果要更新列表项，在调用refresh之前用新标记替换它。

文档：

http://jquerymobile.com/demos/1.0rc3/docs/lists/docs-lists.html

示例：

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

更新：

您可能还需要刷新页面，例如

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

通过将图片附加到列表中，它将找不到页面类

2 个答案: