jquery - Multiple malsup cycle slideshows controlled by 1 pager, startingSlide staying in sync -

-

ok guys, i'm complicated question. have big slideshow composed of 3 separate malsup cycle slideshows. current slide in front , other 2 behind it, left 1 starting slide -1 of current 1 , right 1 starting slide +1. works. when click #next triggers three, great. problem need implement pager , pager controls central slideshow , not other 2.

i need pager able trigger 3 slideshows 3 being devoted initial startingslide relation.

here's js code:

function featuresslideshow(){  $('ul#main-features-leftbehind').cycle({ startingslide: 0, fx: 'scrollleft', timeout: 0, speed:   1000, easing: 'easeinoutquart', pager:  '#main-features-nav', next: 'ul#main-features-upfront'  }); $('ul#main-features-rightbehind').cycle({ startingslide: 2, timeout: 0,  fx: 'scrollleft', speed:   1000, pager:  '#main-features-nav', easing: 'easeinoutquart', next: 'ul#main-features-upfront' }); $('ul#main-features-upfront').before('<ul id="main-features-nav"></ul>').cycle({ startingslide: 1, timeout: 0,  fx: 'blindx', rev: 0, speed:   1000, easing: 'easeinoutquart', next: 'ul#main-features-upfront', pager:  '#main-features-nav', //after: afterupfrontevent,  pageranchorbuilder:  function(idx, slide) {      var src = $('img',slide).attr('src');      return '<li><a href="#"><img src="' + src + '" width="50" height="50" /></a></li>';      }  }); }

and here's html:

<ul id="main-features-leftbehind">     <li><div style="background:url('../images/features_mainslideshow_slide-0.jpg') no-repeat" class="bg"></div></li>     <li><div style="background:url('../images/features_mainslideshow_slide-1.jpg') no-repeat" class="bg"></div></li>     <li><div style="background:url('../images/features_mainslideshow_slide-2.jpg') no-repeat" class="bg"></div></li>     <li><div style="background:url('../images/features_mainslideshow_slide-3.jpg') no-repeat" class="bg"></div></li> </ul>  <ul id="main-features-rightbehind">     <li><div style="background:url('../images/features_mainslideshow_slide-0.jpg') no-repeat" class="bg"></div></li>     <li><div style="background:url('../images/features_mainslideshow_slide-1.jpg') no-repeat" class="bg"></div></li>     <li><div style="background:url('../images/features_mainslideshow_slide-2.jpg') no-repeat" class="bg"></div></li>     <li><div style="background:url('../images/features_mainslideshow_slide-3.jpg') no-repeat" class="bg"></div></li> </ul>  <ul id="main-features-upfront">     <li>     <img src="../images/features_mainslideshow_slide-0.jpg" />     <ul class="main-features-band">     <li class="main-features-band-content">     <h3>feature title</h3>     <p>short statement function.</p>     </li>     <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-learnmore"></span>learn more</a></li> </ul>    </li>     <li>     <img src="../images/features_mainslideshow_slide-1.jpg" />     <ul class="main-features-band">     <li class="main-features-band-content">     <h3>feature title</h3>     <p>short statement function.</p>     </li>     <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-learnmore"></span>learn more</a></li> </ul>    </li>  <li>     <img src="../images/features_mainslideshow_slide-2.jpg" />     <ul class="main-features-band">     <li class="main-features-band-content">     <h3>feature title</h3>     <p>short statement function.</p>     </li>     <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-learnmore"></span>learn more</a></li> </ul>    </li>                             <li>     <img src="../images/features_mainslideshow_slide-3.jpg" />     <ul class="main-features-band">     <li class="main-features-band-content">     <h3>feature title</h3>     <p>short statement function.</p>     </li>     <li class="main-features-band-learnmore"><a href="#"><span class="btn-main-features-learnmore"></span>learn more</a></li> </ul>    </li> </ul>

thank guys, i've done lot of reading on how execute multiple slideshows, malsup created "double" slideshow using pager can't seem make work visual pager.

you have build own pager. here's how did mine:

$('#slides').cycle(); $('#titles').cycle();  $('a.nav-button').click(function(e) {    var slide = $('a.nav-button').index(this);   $('#slides').cycle(slide);   $('#titles').cycle(slide);   e.preventdefault(); });

then output nav buttons manually (or using php/ruby/whatever).


Comments

Post a Comment

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

-
i trying send mail linux command line using mailx command. can send local domain no problem want set mail send gmail account receive mail sent gmail account. after configuring mail.rc so: account gmail { set smtp=smtps://smtp.gmail.com:587 set smtp-auth=login set smtp-auth-user=username@gmail.com set smtp-auth-password=password set ssl-verify=ignore } i error: resolving host smtp.gmail.com . . . done. connecting 74.125.25.109 . . . connected. missing "nss-config-dir" variable. "/home/username/dead.letter" 11/354 . . . message not sent. after looking "nss-config-dir" here , located certn.db , keyn.db files , added mail.rc so: account gmail { set smtp=smtps://smtp.gmail.com:587 set smtp-auth=login set smtp-auth-user=username@gmail.com set smtp-auth-password=password set ssl-verify=ignore set nss-config-dir=/home/user/.mozilla/firefox/location.default } now when try send mail using command: echo "sent gmail account" | mailx -v -a
Read more

c# - Is it possible to remove an existing registration from Autofac container builder? -

-
something along lines: builder.registertype<mytype>().as<itype>(); builder.registertype<mytype2>().as<itype>(); builder.deregistertype<mytype>().as<itype>() var container = builder.build(); var types = container.resolve<ienumerable<itype>>(); assert.istrue(types.count == 1); assert.istrue(types[0].gettype == typeof(mytype2)); scenario: go through bunch of assemblies , go register types want make sure have 1 implementation of given type. need before create container. track on own nice if autofac me bit. this cannot done directly using containerbuilder , unless start on new one. mind you, having first built container should able construct new container filtering away unwanted types , reusing registrations first container. this: ... var container = builder.build(); builder = new containerbuilder(); var components = container.componentregistry.registrations .where(cr => cr.activator.limittype != typ
Read more

php - Mysql PK and FK char(36) vs int(10) -

-
i have read mysql can handle indexes , searches better if tables keys integers rather char(36) uuid's. is worth converting int(10)? note: use 1 server , have have plans use multiple databases concurrently therefore removing 1 of big reasons using uuid. our tables innodb if makes difference. thanks in advance. usually rdbms can handle integer keys pk more efficient, other datatypes. reason how build index column, yes: long dont require string (or other typed) keys, should use integers. however: char(36) , int(10) far away being equal, because int(10) much smaller, char(36). dont know, if require many different keys, should keep in mind. update, complete last paragraph: int(10) 32-bit, char(36) 36 - ^byte^ (= 288-bit). not mean, int consumes less space, means, char(36) has 4 times more different keys.
Read more