Posted By

lynseydesign on 11/30/10


Tagged


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

virendrakryadav


Advanced Home Slideshow Custom Call


 / Published in: jQuery
 

Uses malsup's jquery cycle plugin. Advanced pager and custom jquery animations.

  1. jQuery('div#home-slide').after('<ul id="home-slide-btns">').cycle({
  2. fx: 'fade',
  3. timeout: 9000,
  4. pager: '#home-slide-btns',
  5. cleartype: 1,
  6. before: onBefore,
  7. after: onAfter,
  8. pagerAnchorBuilder: function(idx, slide) {
  9. var title = jQuery(slide).children('h4').html();
  10. return '<li class="btn-' + idx + '"><a href="#">' + title + '</a></li>';
  11. }
  12. });
  13.  
  14. function onBefore() {
  15. jQuery(this).siblings().children('div#home-slide h4, div#home-slide p.desc, div#home-slide p.link').removeAttr("style");
  16. }
  17. function onAfter() {
  18. jQuery(this).siblings().children('div.image').removeAttr("style");
  19. jQuery(this).children('div.image').delay(500).fadeIn(2000);
  20. jQuery(this).children('h4.slide-0').delay(1000).animate({'top':'32'}, 1000, 'easeOutQuint');
  21. jQuery(this).children('h4.slide-1, h4.slide-2').delay(1000).animate({'top':'145'}, 1000, 'easeOutQuint');
  22. jQuery(this).children('h4.slide-3').delay(1000).animate({'top':'70'}, 1000, 'easeOutQuint');
  23. jQuery(this).children('p.desc').delay(2000).show('drop', {direction:"down"}, 800);
  24. jQuery(this).children('p.link').delay(3000).show('drop', {direction:"down"}, 800);
  25. }

Report this snippet  

You need to login to post a comment.