使用jcarousel.js-导航后准确保存图像和位置

Question

I am using jcarousel.js plugin to order <ul> list of images in my jQuery Mobile app with carousel affect. 我正在使用jcarousel.js插件对具有轮播效果的jQuery Mobile应用程序中的<ul>图片列表进行排序。 Each time I initialize my page the images are different (comes from WS) so after I set them into <ul> I call it like this: 每次初始化页面时，图像都是不同的（来自WS），因此在将它们设置为<ul>我会这样称呼它：

 $('#imagesPageDiv').live('pagebeforeshow', function (e, data) {
                   jQuery('#carouselDiv').jcarousel({ visible: 4, scroll: 2});
              });

It works fine. 工作正常。

Each image have URL to that same big image.The problem occurs when coming back to that same page. 每个图像都有指向相同大图像的URL 。返回同一页面时会发生问题。

I dont want to set the images from start, want to come back exactly to the same images and the place (image position) before I clicked on it. 我不想从一开始就设置图像，想要在单击之前完全返回相同的图像和位置（图像位置）。 I set flag , so basically I know when I'm coming back and when I starting it from start. 我设置了flag ，所以基本上我知道何时返回以及何时从头开始。 So I tried to save all the page before navigating to the next page, and after coming back append it again to the page: 因此，我尝试保存所有页面，然后再导航到下一页，然后返回后再次将其追加到页面：

  globalDivContent = $('#imagesPage #box');

After coming back to that page I appending it: 回到该页面后，我将其附加：

 $("#imagesPage").empty();
   $("#imagesPage").append(globalDivContent );

Realy getting the same courosel with the real images and posstion exepct one problem: it doesnt scroll's. 确实获得与真实图像相同的位置和位置会出现一个问题：它不会滚动。 The arrows are clickable but aren't doing nothing 箭头是可单击的，但什么也不做

I compared the codes when starting the page and coming back to page and it similar. 我在启动页面并返回页面时比较了代码，并且类似。 Any ideas how can i implement my idea? 有什么想法可以实现我的想法吗？

      <!DOCTYPE html>
        <html>
            <head>
                <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
                <link rel="stylesheet" href="http://sorgalla.com/projects/jcarousel/skins/tango/skin.css" />    
                <script src="http://sorgalla.com/projects/jcarousel/lib/jquery-1.9.1.min.js"></script>
                <script src="http://sorgalla.com/projects/jcarousel/lib/jquery.jcarousel.min.js"></script>                    
                <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>    
                <script>
                      $('#imagesPage').live('pageshow', function (event, ui) {
                      jQuery('#carouselDiv').jcarousel({visible:2});
       });
                </script>
            </head>
            <body>
                <div data-role="page" id="imagesPage">
                    <div data-theme="b" data-role="header">
                        <h1>Index page</h1>
                    </div>

                    <div data-role="content">
                        <ul id="carouselDiv" class="jcarousel-skin-tango">
                            <li><img src="http://static.flickr.com/66/199481236_dc98b5abb3_s.jpg" width="65" height="65" alt=""/></li>
                            <li><img src="http://static.flickr.com/75/199481072_b4a0d09597_s.jpg" width="65" height="65" alt=""/></li>
                            <li><img src="http://static.flickr.com/57/199481087_33ae73a8de_s.jpg" width="65" height="65" alt=""/></li>
                            <li><img src="http://static.flickr.com/77/199481108_4359e6b971_s.jpg" width="65" height="65" alt=""/></li>
                            <li><img src="http://static.flickr.com/58/199481143_3c148d9dd3_s.jpg" width="65" height="65" alt=""/></li>
                            <li><img src="http://static.flickr.com/72/199481203_ad4cdcf109_s.jpg" width="65" height="65" alt=""/></li>
                            <li><img src="http://static.flickr.com/58/199481218_264ce20da0_s.jpg" width="65" height="65" alt=""/></li>
                            <li><img src="http://static.flickr.com/69/199481255_fdfe885f87_s.jpg" width="65" height="65" alt=""/></li>
                            <li><img src="http://static.flickr.com/60/199480111_87d4cb3e38_s.jpg" width="65" height="65" alt=""/></li>
                            <li><img src="http://static.flickr.com/70/229228324_08223b70fa_s.jpg" width="65" height="65" alt=""/></li>
                        </ul>
                    </div>
                </div>    
            </body>
        </html>

Answer 1

I would advise saving only the information you need, rather than copying the entire div in one go. 我建议您只保存所需的信息，而不是一次性复制整个div。 This would allow you to cherry-pick the data your really need and safely persist it across page loads. 这将使您可以挑选您真正需要的数据，并在页面加载期间安全地持久保存该数据。

The best solution for this would be to use local storage. 最好的解决方案是使用本地存储。 This allows you to save string-to-string values persistently across a site as far back as IE8 (see more information here: http://www.html5rocks.com/en/features/storage ). 这样一来，您就可以在整个网站上永久保存字符串到字符串的值，甚至可以追溯到IE8（请在此处查看更多信息： http : //www.html5rocks.com/zh_cn/features/storage ）。

For example, you could save your data like this: 例如，您可以这样保存数据：

localStorage["carouselSource"] = JSON.stringify(
    $('#carouselDiv li img').map(function(i,e){
        return $(this).attr('src');
    }).get();
);

and retrieve it like this (before the jCarousel call): 并像这样检索它（在jCarousel调用之前）：

var items = jQuery.parseJSON(localStorage["carouselSource"]);

jQuery.each(items, function(i,e){
    $('#carouselDiv').append('<li><img src="' + e + '" width="65" height="65" alt="" /></li>');
});

This would ensure that the same set of images are displayed when the user returns to the page. 这样可以确保当用户返回页面时显示相同的图像集。 You could use a similar technique to save things like the position of the slider and any other variable data you want to save. 您可以使用类似的技术来保存诸如滑块的位置以及要保存的任何其他变量数据之类的内容。

使用jcarousel.js-导航后准确保存图像和位置

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-05-23 10:39:36

使用jcarousel.js-导航后准确保存图像和位置

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-05-23 10:39:36

解决方案1
0 已采纳 2013-05-23 10:39:36