To start, we put all pictures in a block element:
XML:
| <div id='gallery' style='display: none'> |
| <a href='acupuncture-makes-a-dream-come-true/' rel="<h3>Shropshire Star, Feburary 2009</h3> Acupuncture and herbalism make a dream come true. <a href='acupuncture-makes-a-dream-come-true/'>More...</a>" title=" Acupuncture and herbalism makes a dream come true. " > |
| <img src="<?php bloginfo('template_url'); ?>/images/acupuncture_clinic_img_slider1.jpg" alt=" Acupuncture makes a dream come true. " /> |
| </a> |
| <a href='acupuncture-makes-a-dream-come-true/' rel="<h3>Shropshire Star, Feburary 2009</h3> Acupuncture makes a dream come true. <a href='acupuncture-makes-a-dream-come-true/'>More...</a>" title=" Acupuncture makes a dream come true"> |
| <img src="<?php bloginfo('template_url'); ?>/images/acupuncture_clinic_img_slider3.jpg" alt="Acupuncture makes a dream come true. " /></a> |
| <a href='acupuncture-hope-for-childless-couple/' rel="<h3>Shropshire Star, August 2010</h3> Acupuncture hope for childless couple. <a href='acupuncture-hope-for-childless-couple/'>More...</a>" title="Acupuncture hope for childless couple. "> |
| <img src="<?php bloginfo('template_url'); ?>/images/acupuncture_clinic_img_slider2.jpg" |
| alt=" Acupuncture hope for childless couple. " |
| /></a> |
| <a href='against-all-odds/' rel="<h3>Shropshire Chronicle, 2010</h3> Against all odds. <a href='against-all-odds/'>More...</a>" |
| title=" Against all odds." |
| > |
| <img src="<?php bloginfo('template_url'); ?>/images/acupuncture_clinic_img_slider4.jpg" |
| alt=" Against all odds. " |
| /> |
| </a> |
| |
| </div> |
Next, the caption block:
XML:
Then we will use the before() and after() function to fade-out/in the captions, and use the ‘fade’ option of the plugin to change slides
Code:
| $('#gallery').cycle({ |
| fx: 'fade', |
| timeout: 4200 , |
| random: 1, |
| pause: 1, |
| before: function (){ |
| $('#caption').fadeOut("slow"); |
| }, |
| after: function() { |
| //change text |
| $('#caption').html(this.rel); |
| //fade it in |
| $('#caption').fadeIn("slow"); |
| } |
| }); |
and we would like the slideshow to pause when user hovers the mouse on the caption so that they can read before it finishes.
Code:
| $("#caption").mouseover(function(){ |
| $('#gallery').cycle('pause'); |
| }) |
| $("#caption").mouseout(function(){ |
| $('#gallery').cycle('resume'); |
| }); |
To put all of the above in a function
Code:
| function startCycle(){ |
| $('#gallery').fadeIn("slow"); |
| |
| $('#gallery').cycle({ |
| fx: 'fade', |
| timeout: 4200 , |
| random: 1, |
| pause: 1, |
| before: function (){ |
| $('#caption').fadeOut("slow"); |
| }, |
| after: function() { |
| //change text |
| $('#caption').html(this.rel); |
| //fade it in |
| $('#caption').fadeIn("slow"); |
| } |
| }); |
| |
| $("#caption").mouseover(function(){ |
| $('#gallery').cycle('pause'); |
| }) |
| $("#caption").mouseout(function(){ |
| $('#gallery').cycle('resume'); |
| }); |
| } |
To preload the images and then start the slideshow, we need another plugin,
http://plugins.jquery.com/project/Image-Preloader
a very short piece of script to allow you to load images and then callback to start the slideshow.
Code:
| function loadSlides(){ |
| $.loadImages( [ |
| "<?php bloginfo('template_url'); ?>/images/acupuncture_clinic_img_slider1.jpg", |
| "<?php bloginfo('template_url'); ?>/images/acupuncture_clinic_img_slider3.jpg", |
| "<?php bloginfo('template_url'); ?>/images/acupuncture_clinic_img_slider2.jpg", |
| "<?php bloginfo('template_url'); ?>/images/acupuncture_clinic_img_slider4.jpg" |
| |
| ],startCycle()); |
| } |
and finally, we will start all of above when the page is loaded
Code:
| window.onload = loadSlides; |
Pages: 1 2
XML Feeds