www.webdeveloper.com
Results 1 to 2 of 2

Thread: adding crossfade to simpleImageGallery.js

  1. #1
    Join Date
    Nov 2011
    Posts
    2

    adding crossfade to simpleImageGallery.js

    Hi all,

    Javascript newbie here. I want to create a very simple image gallery where each image crossfades into the next when clicked. Most of the gallery scripts I found were far too complicated for my purposes, so I wound up using this very basic one:
    http://javascriptsource.com/image-ef...e-gallery.html
    and with a little bit of customization I was able to get it to look the way I wanted.

    The only problem now is that I want to add the crossfading and can't figure out how! I've tried a few different methods, but am clueless as to how to combine them with the script I'm already using.

    Is this even possible? Anyone care to help me out?
    Thanks in advance.

  2. #2
    Join Date
    Nov 2011
    Posts
    2
    I should probably quote the code here too, huh?

    the javascript:
    Code:
    var num=0;
    
    imgArray = [
      ['pix1-sm.gif','information', 'The beautiful mountains'],
      ['pix2-sm.gif','interference','The crystal clear lake'],
      ['pix3-sm.gif','message','The lonesome, barren tree']
    ]
    
    function slideshow(slide_num) {
      document.getElementById('mypic').src=imgArray[slide_num][0];
      document.getElementById('mypic').alt=imgArray[slide_num][1];
      document.getElementById('burns').innerHTML=imgArray[slide_num][2];
    }
    
    function slideshowUp() {
      num++;
      num = num % imgArray.length;
      slideshow(num);
    }
    
    function slideshowBack() {
      num--;
      if (num < 0) {num=imgArray.length-1;}
      num = num % imgArray.length;
      slideshow(num);
    }
    the html:
    Code:
    <div style="text-align: center">
      <!--  Place the first image here  -->
      <img src="pix1-sm.gif" id="mypic" name="mypic" alt="information" border="0" height="150" width="200">
      <br>
      <!--  Place the text for the first image here  -->
      <div id="burns">The beautiful mountains</div>
      <p>
      <a href="#" onclick="slideshowBack(); return false;"> Previous</a> |
      <a href="#" onclick="slideshowUp(); return false;"> Next </a>
    </div>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles