Search code examples
javascriptjqueryhtmljcarousel

Using jcarousel.js - saving the images and position exactly, after navigation

I am using jcarousel.js plugin to order <ul> list of images in my jQuery Mobile app with carousel affect. 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:

 $('#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.

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. 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>
Solution

  • I would advise saving only the information you need, rather than copying the entire div in one go. 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).

    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):

    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.