Jquery mobile 将顶部项目添加到照片库touchTouch_Jquery Mobile_Photo

Jquery mobile 将顶部项目添加到照片库touchTouch

jquery-mobile

Jquery mobile 将顶部项目添加到照片库touchTouch,jquery-mobile,photo,Jquery Mobile,Photo,嗨，我是新的jquery手机。我需要将照片库添加到我的应用程序中。看了之后，我决定用这个插件来安装我的应用程序所以这里是我的问题，我需要动态添加项目到照片库的第一张照片。请在下面输入我的密码 mobile.html <div class="thumbs" id="imageList"> <a href="http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_z.jpg"

嗨，我是新的jquery手机。我需要将照片库添加到我的应用程序中。看了之后，我决定用这个插件来安装我的应用程序

所以这里是我的问题，我需要动态添加项目到照片库的第一张照片。请在下面输入我的密码

mobile.html

 <div class="thumbs" id="imageList">
                    <a href="http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_m.jpg)" title="Lion Rock"></a>
                    <a href="http://farm8.staticflickr.com/7042/6895252645_45f5dfffaa_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7042/6895252645_45f5dfffaa_m.jpg)" title="Holsten Gate"></a>
                    <a href="http://farm8.staticflickr.com/7183/6943277737_21b521659c_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7183/6943277737_21b521659c_m.jpg)" title="Blue Hour"></a>
                    <a href="http://farm8.staticflickr.com/7047/7000951429_5eae078a62_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7047/7000951429_5eae078a62_m.jpg)" title="Waikato Landscape"></a>
                    <a href="http://farm6.staticflickr.com/5346/7051537899_efc7a44830_z.jpg" style="background-image:url(http://farm6.staticflickr.com/5346/7051537899_efc7a44830_m.jpg)" title="Tauranga Bridge"></a>
                    <a href="http://farm8.staticflickr.com/7268/6951148260_440661b4d1_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7268/6951148260_440661b4d1_m.jpg)" title="East Coast"></a>
                    <a href="http://farm8.staticflickr.com/7259/6930112984_5fcc076288_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7259/6930112984_5fcc076288_m.jpg)" title="Cathedral Cove"></a>
                    <a href="http://farm8.staticflickr.com/7276/6886626710_047cd03acb_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7276/6886626710_047cd03acb_m.jpg)" title="The Pond"></a>
                    <a href="http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_m.jpg)" title="Good Night"></a>
                </div>

                <p id="credit">

                    <a href="http://www.flickr.com/photos/zanthia/6754656011/">Lion Rock</a>
                    <a href="http://www.flickr.com/photos/zanthia/6895252645/">Holsten Gate</a>
                    <a href="http://www.flickr.com/photos/zanthia/6943277737/">Blue Hour</a>
                    <a href="http://www.flickr.com/photos/zanthia/7000951429/">Waikato Landscape</a>
                    <a href="http://www.flickr.com/photos/zanthia/7051537899/">Tauranga Bridge</a>
                    <a href="http://www.flickr.com/photos/zanthia/6951148260/">East Coast</a>
                    <a href="http://www.flickr.com/photos/zanthia/6930112984/">Cathedral Cove</a>
                    <a href="http://www.flickr.com/photos/zanthia/6886626710/">The Pond</a>
                    <a href="http://www.flickr.com/photos/zanthia/6683299491/">Good Night</a>
                </p>

addtopitem.js

  $("#imageList").prepend("<a href=\"http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_z.jpg\" style=\"background-image:url(http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_m.jpg)\" title=\"1234\" class=\"ui-link\"></a>");

        $("#credit").prepend("<a ihref=\"http://www.flickr.com/photos/zanthia/6754656011/\"  class=\"ui-link\">Lion Rock</a>");



        $('#thumbs a').touchTouch();

$（“#图像列表”）。前置（“”）；
元（“#贷方”）。前置（“”）；
$（“#拇指a”）.touchTouch（）；

我可以将项目添加到照片库的顶部。但是，当点击图像时，它似乎没有任何功能。有解决方案吗？

您的代码中有一个错误

使用第三方插件的第一条规则是“仅在允许的情况下或在您知道自己在做什么的情况下进行更改”

您错误地将id重命名为此div容器中的类：

<div class="thumbs" id="imageList">

应该是：

<div id="thumbs imageList">

此插件经过硬编码，可与#imageList容器一起使用

工作示例：


触摸优化图库|免费教程杂志
图库示例

照片：

$（document）.on（'pageshow'，'#index'，function（）{
$（文档）。在（'单击'，'添加缩略图'，函数（）{
$（“#拇指”）。前缀（“”）；
元（“#贷方”）。前置（“”）；
});
（“#拇指a”）.touchTouch（）；
});

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>A Touch Optimized Gallery | Tutorialzine Freebie</title>

        <!-- Make the page take the full width of the device-->
        <meta name="viewport"  content="width=device-width, initial-scale=1.0, user-scalable=0, maximum-scale=1.0" />

        <!-- The stylesheet -->
        <link rel="stylesheet" href="http://demo.tutorialzine.com/2012/04/mobile-touch-gallery/assets/css/styles.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />        
        <link rel="stylesheet" href="http://demo.tutorialzine.com/2012/04/mobile-touch-gallery/assets/touchTouch/touchTouch.css" />

        <!-- Google Fonts -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Dancing+Script" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>     
        <div data-role="page" id="index" data-theme="a" >
            <div data-role="header">
                <h3>
                    Gallery example
                </h3>
            </div>

            <div data-role="content">
                <a data-role="button" id="add-thumbnail">Add another thumbnail</a>
                <div id="thumbs">
                    <a href="http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_m.jpg)" title="Lion Rock"></a>
                    <a href="http://farm8.staticflickr.com/7042/6895252645_45f5dfffaa_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7042/6895252645_45f5dfffaa_m.jpg)" title="Holsten Gate"></a>
                    <a href="http://farm8.staticflickr.com/7183/6943277737_21b521659c_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7183/6943277737_21b521659c_m.jpg)" title="Blue Hour"></a>
                    <a href="http://farm8.staticflickr.com/7047/7000951429_5eae078a62_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7047/7000951429_5eae078a62_m.jpg)" title="Waikato Landscape"></a>
                    <a href="http://farm6.staticflickr.com/5346/7051537899_efc7a44830_z.jpg" style="background-image:url(http://farm6.staticflickr.com/5346/7051537899_efc7a44830_m.jpg)" title="Tauranga Bridge"></a>
                    <a href="http://farm8.staticflickr.com/7268/6951148260_440661b4d1_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7268/6951148260_440661b4d1_m.jpg)" title="East Coast"></a>
                    <a href="http://farm8.staticflickr.com/7259/6930112984_5fcc076288_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7259/6930112984_5fcc076288_m.jpg)" title="Cathedral Cove"></a>
                    <a href="http://farm8.staticflickr.com/7276/6886626710_047cd03acb_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7276/6886626710_047cd03acb_m.jpg)" title="The Pond"></a>
                    <a href="http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_z.jpg" style="background-image:url(http://farm8.staticflickr.com/7020/6683299491_f2b5f6aa8b_m.jpg)" title="Good Night"></a>
                </div>

                <p id="credit">
                    Photos: 
                    <a href="http://www.flickr.com/photos/zanthia/6754656011/">Lion Rock</a>
                    <a href="http://www.flickr.com/photos/zanthia/6895252645/">Holsten Gate</a>
                    <a href="http://www.flickr.com/photos/zanthia/6943277737/">Blue Hour</a>
                    <a href="http://www.flickr.com/photos/zanthia/7000951429/">Waikato Landscape</a>
                    <a href="http://www.flickr.com/photos/zanthia/7051537899/">Tauranga Bridge</a>
                    <a href="http://www.flickr.com/photos/zanthia/6951148260/">East Coast</a>
                    <a href="http://www.flickr.com/photos/zanthia/6930112984/">Cathedral Cove</a>
                    <a href="http://www.flickr.com/photos/zanthia/6886626710/">The Pond</a>
                    <a href="http://www.flickr.com/photos/zanthia/6683299491/">Good Night</a>
                </p>
            </div>                  
        </div>              

        <!-- JavaScript includes - jQuery, turn.js and our own script.js -->
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>  
        <script src="http://demo.tutorialzine.com/2012/04/mobile-touch-gallery/assets/touchTouch/touchTouch.jquery.js"></script>
        <script src="http://demo.tutorialzine.com/2012/04/mobile-touch-gallery/assets/js/script.js"></script>    
        <script>
        $(document).on('pageshow', '#index', function(){ 
            $(document).on('click', '#add-thumbnail', function(){       
                $("#thumbs").prepend("<a href=\"http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_z.jpg\" style=\"background-image:url(http://farm8.staticflickr.com/7013/6754656011_3de2cc73a2_m.jpg)\" title=\"1234\" class=\"ui-link\"></a>");
                $("#credit").prepend("<a ihref=\"http://www.flickr.com/photos/zanthia/6754656011/\"  class=\"ui-link\">Lion Rock</a>");
            });
            ('#thumbs a').touchTouch();
        });
        </script>       
    </body>
</html>