Advanced Search

Advanced Home Slideshow Custom Call

/ Published in: jQuery
Save to your folder(s)
Uses malsup's jquery cycle plugin. Advanced pager and custom jquery animations.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.