javascript - Using jcarousle.js - saving the images and possition exactly, after navigation -


i using jcarousel.js plugin order <ul> list of images in jquery mobile app carousel affect. each time initialize page images different (comes ws) after set them <ul> call this:

 $('#imagespagediv').live('pagebeforeshow', function (e, data) {                    jquery('#carouseldiv').jcarousel({ visible: 4, scroll: 2});               });

it works fine.

each image have url same big image.the problem occurs when coming same page.

i dont want set images start, want come same images , place (image position) before clicked on it. set flag, know when i'm coming , when starting start. tried save page before navigating next page, , after coming append again page:

  globaldivcontent = $('#imagespage #box');

after coming page appending it:

 $("#imagespage").empty();    $("#imagespage").append(globaldivcontent );

realy getting same courosel real images , posstion exepct 1 problem: doesnt scroll's. arrows clickable aren't doing nothing

i compared codes when starting page , coming page , similar. ideas how can implement 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>

i advise saving information need, rather copying entire div in 1 go. allow cherry-pick data need , safely persist across page loads.

the best solution use local storage. allows save string-to-string values persistently across site far ie8 (see more information here: http://www.html5rocks.com/en/features/storage).

for example, save data this:

localstorage["carouselsource"] = json.stringify(     $('#carouseldiv li img').map(function(i,e){         return $(this).attr('src');     }).get(); );

and retrieve (before 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 ensure same set of images displayed when user returns page. use similar technique save things position of slider , other variable data want save.


Comments

Post a Comment

Popular posts from this blog

.htaccess - First slash is removed after domain when entering a webpage in the browser -

sometimes when hit address of webpage in browser, removes first slash after domain. examples: www.mywebsite.com/scripts/script_6.php -> trying load www.mywebsite.comscripts/script_6.php www.mywebsite.com/test.php -> trying load www.mywebsite.comtest.php after entering again, loads page. a .htaccess settings must wrong: rewritebase / errordocument 404 http://www.mywebsite.com/oops.php errordocument 401 /notallowed.php rewriteengine on # turn on rewriting engine #gzip <ifmodule mod_deflate.c> addoutputfilterbytype deflate text/text text/html text/plain text/xml text/css application/x- javascript application/javascript </ifmodule> #end gzip rewritecond %{http_host} ^mywebsite\.com rewriterule ^(.*)$ http://www.mywebsite.com$1 [r=permanent,l] directoryindex index6.php rewriterule ^termsofuse/?$ termsofuse.php [nc,l] # handle requests "adpolicy" rewriterule ^privacy-policy/?$ privacy-policy.php [nc,l] # handle requ...
Read more

Automatically create pages in phpfox -

i have array of information of places , wanna use them create multiple pages in phpfox site. first tried manually insert data in phpfox database (in tables of phpfox_pages , phpfox_pages_text ). the page shown in site when opening it's link, site says: the page looking cannot found. do know other tables should manipulate make work? or know plugin phpfox same? thanks, solved ( @purefan guide): "pages" has user if take @ phpfox_user table, you'll found out how fetch new records on that. there 2 ambiguous fields in table ( password & password_salt ). can use script create values fields: <?php function generaterandomstring() { $length = 164; $characters = '-_0123456789abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz'; $randomstring = ''; ($i = 0; $i < $length; $i++) { $randomstring .= $characters[rand(0, strlen($characters) - 1)]; } return $randomstring; } $ssalt = '';...
Read more

c# - Farseer ContactListener is not working -

i'm using farseer in xna project, have trouble contactlistener. created class contactlistener these 2 error messages , don't know how fix problems. the type or namespace name 'contactlistener' not found (are missing using directive or assembly reference?) the type or namespace name 'contactimpulse' not found (are missing using directive or assembly reference?) what wrong contactlistener class? class mycontactlistener: contactlistener { void begincontact(contact contact) { /* handle begin event */ } void endcontact(contact contact) { /* handle end event */ } void presolve(contact contact, ref manifold oldmanifold) { fixture fixturea = contact.fixturea; fixture fixtureb = contact.fixtureb; if (fixtureb.collisioncategories == category.cat10) { contact.enabled = false; } } void postsolve(contact contact, ref contactimpulse impulse) { /* handle post-solve event */ } }...
Read more