ecommerce website design Shropshire, Custom & Ecommerce Website Designers, Web Page Design Company Shropshire UK Site Map
Phone:01743 272 609 Fax: 0709 286 1166
Home page, website design service at Shrewsbury, Shropshire. We supply website design service to business in Shropshire and whole UKAbout spark computing, website design service at Shrewsbury, Shropshire. We supply website design service to business in Shropshire and whole UKExpertise and services from spark computing, website design service at Shrewsbury, Shropshire. We supply website design service to business in Shropshire and whole UKOffice automatic solutions, online business solutions supplied by Spark computing, shrewsbury, shropshirecontact spark computing, shrewsbury, shroshire to discuss online business websites, custom software development

Jquery cycle plugin with caption and image preload

27/08/10

Permalink 10:37:04 am, Categories: Website design, General IT articles  

Jquery cycle plugin with caption and image preload

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:

<p id='caption'></p>

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;

Tweet this! Facebook Live Yahoo bookmark Digg US google bookmark

Pages: 1 2

May 2022
Mon Tue Wed Thu Fri Sat Sun
 << <   > >>
            1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31          

Spark Website Design, Shropshire

Technical articles on IT solutions.

Free information on office and home IT solutions; How to get a website running for your business; self-help e-commerce; and tips on website design.

Search

Misc

XML Feeds

What is this?