Streets In Time project – html and javascript for fading the toggling images

Below is the code I have used to fade one image into the next:

HTML:

<div id = "fader">
  <div id= 'slideshow'>
    <img src = "image_001_now" alt = 'Dyke Road, Brighton 2013'/>
    <img src = "image_001_then" alt = 'Dyke Road, Brighton 1905'/>
  </div> <!-- end slideshow-->
</div> <!-- end fader-->

JAVASCRIPT:

Javascript plugin downloaded from: http://malsup.com/jquery/cycle/lite ,  then the following code added to my site (4000 sets the timing of the fade):

$(function() {
  $('#slideshow img:first').fadeIn(4000, function() {
  $('#slideshow').cycle();
 });
});

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s