0

我在使用 photoswipe 的列表图片中附加图片时遇到问题。jquery 移动页面使用类gallery-page 将在一个漂亮的查看器中打开它。我尝试使用附加功能将更多图片添加到图片列表中。这很好用，只是问题是当我单击图像时，它不会在漂亮的查看器中打开它。我认为这与类画廊页面有关。在某种程度上，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>')
4

2 回答 2

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);
于 2011-11-16T16:20:19.947 回答
0

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');
于 2011-11-16T16:49:11.283 回答