0

フォトスワイプを使用するリスト画像に画像を追加する際に問題が発生しました。jqueryモバイルページは、素敵なビューアで開くクラスgallery-pageを使用します。写真リストに追加機能を使って写真を追加しようとしています。これは問題なく機能しますが、問題は画像をクリックしても素敵なビューアで開かないことです。これはクラスのギャラリーページと関係があると思います。ある意味で、jqueryによって追加された画像はクラスgallery-pageを見つけることができません。私に何ができる？

ページは次のようになります。

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()メソッドは、リストに追加された新しいノードにのみ影響することに注意してください。これは、パフォーマンス上の理由から行われます。すでに拡張されているリストアイテムは、更新プロセスによって無視されます。これは、すでに拡張されたリストアイテムのコンテンツまたは属性を変更した場合、これらは反映されないことを意味します。リストアイテムを更新する場合は、refreshを呼び出す前に新しいマークアップに置き換えてください。

ドキュメント：

例：

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

アップデート：

このように、ページも更新する必要がある場合もあります

// id="Gallery"
$('#Gallery').trigger('create');
于 2011-11-16T16:49:11.283 に答える