#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0

    This is too complicated for me


    Hello,

    I'm trying to incorporate a "picture slideshow" on my website. I have two JavaScript files that setup the image rotation. The problem I'm having is being able to add captions to each image. The scripts I have I found on the Internet. I will post both scripts in the topic. I started creating a seperate caption array in the one script to try to work with the image array.

    Please could someone assist me with this? I'm a newbie to web development especially JavaScripting. Also, if one could direct me to some very helpful beginner's tools, that would be much appreciated.

    Thank you for any assistance.

    slideshowfade.js (main script)

    javascript Code:
     
    var slideshowFadeAnimate = new Array();
    var slideshowFadeTimer   = new Array();
    var slideshowFadeCount   = new Array();
    var slideshowFadeImages  = new Array();
     
     
    //======================
     
     
    function slideshowFade(id,cl,imageArray,fadeInterval,holdTime)
    {
     
      if(cl)
        cl = ' class="'+cl+'"';
        document.write('<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/></div>');
     
      var ss = document.getElementById(id+'img');
      if(ss.addEventListener)
      {
        ss.addEventListener('mouseover',function(){slideshowFadeMouseover(id)},false);
        ss.addEventListener('mouseout',function(){slideshowFadeMouseout(id)},false);
      }
      else if(ss.attachEvent)
      {
        ss.attachEvent('onmouseover',function(){slideshowFadeMouseover(id)});
        ss.attachEvent('onmouseout',function(){slideshowFadeMouseout(id)},false);
      }
     
      slideshowFadeCount[id]   = 0;
      slideshowFadeImages[id]  = imageArray;  
      slideshowFadeAnimate[id] = 'run';
      slideshowFadeTimer[id]   = setInterval('slideshowFadeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);  
     
    }
     
     
    //======================
     
     
    function slideshowFadeAnimation(id,holdTime)
    {
      if(slideshowFadeAnimate[id]=='run')
      {
        var obj = document.getElementById(id+'img');
        var opa = slideshowFadeCount[id]%200;
     
        if(opa==0)
        {
          slideshowFadeAnimate[id] = 'load';
          obj.src = slideshowFadeImages[id][Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];            
        }
        else if(opa==100)
        {
          slideshowFadeAnimate[id] = 'hold';
          setTimeout('slideshowFadeRun(\''+id+'\')',holdTime);      
        }
        else if(opa>100)
          opa = 200-opa;
     
        obj.style.opacity = (opa/100).toString();
        obj.style.filter  = "alpha(opacity="+opa.toString()+")";
     
        slideshowFadeCount[id]++;
     
        if(slideshowFadeCount[id]==(slideshowFadeImages[id].length*200))
          slideshowFadeCount[id]=0;
      }
    }
     
     
    //======================
     
     
    function slideshowFadeMouseout(id)
    {
      if(slideshowFadeAnimate[id]=='mouseover')
        slideshowFadeAnimate[id] = 'run';
    }
     
     
    //======================
     
     
    function slideshowFadeMouseover(id)
    {
      if(slideshowFadeAnimate[id]=='run')
      {
        slideshowFadeAnimate[id] = 'mouseover';
        var obj = document.getElementById(id+'img');
        obj.style.opacity = "1";
        obj.style.filter  = "alpha(opacity=100)";
        slideshowFadeCount[id] = (Math.floor(slideshowFadeCount[id]/200)*200)+101;
      }
    }
     
     
    //======================
     
     
    function slideshowFadeRun(id)
    {
      slideshowFadeAnimate[id] = 'run';
    }
     
     
    //======================


    Rotate.js (Placement on webpage for images)

    javascript Code:
     
    var imgArray = new Array();
          imgArray[0] = "hyperlink for image one";
          imgArray[1] = "hyperlink for image two";
    .
    .
    .
     
    var captionArray = new Array;      
          captionArray[0] = "caption for image one";
          captionArray[1] = "caption for image two";
    .
    .
    .
     
          slideshowFade('Slideshow1','',imgArray,20,5000);
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,183
    Rep Power
    184
    You would set-it up like this:
    Code:
    <script>
    
    var imgArray = new Array();
          imgArray[0] = "image1.jpg";
          imgArray[1] = "image2.jpg";
    
    var captionArray = new Array;      
          captionArray[0] = "caption for image one";
          captionArray[1] = "caption for image two";
    
    var slideshowFadeAnimate = new Array();
    var slideshowFadeTimer   = new Array();
    var slideshowFadeCount   = new Array();
    var slideshowFadeImages  = new Array();
    
    
    //======================
    
    
    function slideshowFade(id,cl,imageArray,fadeInterval,holdTime)
    {
    
      if(cl)
        cl = ' class="'+cl+'"';
        document.write('<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/><div id="caption"></div></div>');
    
      var ss = document.getElementById(id+'img');
      if(ss.addEventListener)
      {
        ss.addEventListener('mouseover',function(){
         slideshowFadeMouseover(id);
         document.getElementById("caption").innerHTML = captionArray[Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
        },false);
        ss.addEventListener('mouseout',function(){
         slideshowFadeMouseout(id);
         document.getElementById("caption").innerHTML = "";
        },false);
      }
      else if(ss.attachEvent)
      {
        ss.attachEvent('onmouseover',function(){
          slideshowFadeMouseover(id);
          document.getElementById("caption").innerHTML = captionArray[Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
         },false);
        ss.attachEvent('onmouseout',function(){
         slideshowFadeMouseout(id);
         document.getElementById("caption").innerHTML = "";
        },false);
      }
     
      slideshowFadeCount[id]   = 0;
      slideshowFadeImages[id]  = imageArray;  
      slideshowFadeAnimate[id] = 'run';
      slideshowFadeTimer[id]   = setInterval('slideshowFadeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);
    
    }
    
    
    //======================
    
    
    function slideshowFadeAnimation(id,holdTime)
    {
      if(slideshowFadeAnimate[id]=='run')
      {
        var obj = document.getElementById(id+'img');
        var opa = slideshowFadeCount[id]%200;
    
        if(opa==0)
        {
          slideshowFadeAnimate[id] = 'load';
          obj.src = slideshowFadeImages[id][Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];            
        }
        else if(opa==100)
        {
          slideshowFadeAnimate[id] = 'hold';
          setTimeout('slideshowFadeRun(\''+id+'\')',holdTime);      
        }
        else if(opa>100)
          opa = 200-opa;
          
        obj.style.opacity = (opa/100).toString();
        obj.style.filter  = "alpha(opacity="+opa.toString()+")";
        
        slideshowFadeCount[id]++;
        
        if(slideshowFadeCount[id]==(slideshowFadeImages[id].length*200))
          slideshowFadeCount[id]=0;
      }
    }
    
    
    //======================
    
    
    function slideshowFadeMouseout(id)
    {
      if(slideshowFadeAnimate[id]=='mouseover')
        slideshowFadeAnimate[id] = 'run';
    }
    
    
    //======================
    
    
    function slideshowFadeMouseover(id)
    {
      if(slideshowFadeAnimate[id]=='run')
      {
        slideshowFadeAnimate[id] = 'mouseover';
        var obj = document.getElementById(id+'img');
        obj.style.opacity = "1";
        obj.style.filter  = "alpha(opacity=100)";
        slideshowFadeCount[id] = (Math.floor(slideshowFadeCount[id]/200)*200)+101;
      }
    }
    
    
    //======================
    
    
    function slideshowFadeRun(id)
    {
      slideshowFadeAnimate[id] = 'run';
    }
    
    
    //======================
    
    window.onload = function(){
     slideshowFade('Slideshow1','',imgArray,20,5000);
    }
    
    </script>
    Your "imgArray" array was the problem; you did not actually have any of the image SRCs in there and where ever you got this code at; the author left out the caption code. As of right now; I gave the caption element a static id, but if you need to have multiple instances of this slideshow; you will need to update the caption element's id (from a static representation; to a dynamic one).
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0
    Thank you for your reply.

    It still doesn't work. The page won't display.

    Here is the link as to where I got the original script:
    w w w.astral-consultancy.co.uk/cgi-bin/hunbug/doco.cgi?11510
  6. #4
  7. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,183
    Rep Power
    184
    Originally Posted by Treikayan
    It still doesn't work. The page won't display
    Seems to be working fine for me. I did get an error in IE, so I removed document.write() and went with document.body.innerHTML (to insert slideshow container); then it worked fine in IE too (with no errors).
    Code:
    <script>
    
    var imgArray = new Array();
          imgArray[0] = "image1.jpg";
          imgArray[1] = "image2.jpg";
    
    var captionArray = new Array;      
          captionArray[0] = "caption for image one";
          captionArray[1] = "caption for image two";
    
    var slideshowFadeAnimate = new Array();
    var slideshowFadeTimer   = new Array();
    var slideshowFadeCount   = new Array();
    var slideshowFadeImages  = new Array();
    
    
    //======================
    
    
    function slideshowFade(id,cl,imageArray,fadeInterval,holdTime)
    {
    
      if(cl)
        cl = ' class="'+cl+'"';
        document.body.innerHTML = '<div id="'+id+'"'+cl+'><img id="'+id+'img" onload="slideshowFadeRun(\''+id+'\')"/><div id="caption"></div></div>';
    
      var ss = document.getElementById(id+'img');
      if(ss.addEventListener)
      {
        ss.addEventListener('mouseover',function(){
         slideshowFadeMouseover(id);
         document.getElementById("caption").innerHTML = captionArray[Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
        },false);
        ss.addEventListener('mouseout',function(){
         slideshowFadeMouseout(id);
         document.getElementById("caption").innerHTML = "";
        },false);
      }
      else if(ss.attachEvent)
      {
        ss.attachEvent('onmouseover',function(){
          slideshowFadeMouseover(id);
          document.getElementById("caption").innerHTML = captionArray[Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];
         },false);
        ss.attachEvent('onmouseout',function(){
         slideshowFadeMouseout(id);
         document.getElementById("caption").innerHTML = "";
        },false);
      }
     
      slideshowFadeCount[id]   = 0;
      slideshowFadeImages[id]  = imageArray;  
      slideshowFadeAnimate[id] = 'run';
      slideshowFadeTimer[id]   = setInterval('slideshowFadeAnimation(\''+id+'\',\''+holdTime+'\');',fadeInterval);
    
    }
    
    
    //======================
    
    
    function slideshowFadeAnimation(id,holdTime)
    {
      if(slideshowFadeAnimate[id]=='run')
      {
        var obj = document.getElementById(id+'img');
        var opa = slideshowFadeCount[id]%200;
    
        if(opa==0)
        {
          slideshowFadeAnimate[id] = 'load';
          obj.src = slideshowFadeImages[id][Math.floor(slideshowFadeCount[id]/200)%slideshowFadeImages[id].length];            
        }
        else if(opa==100)
        {
          slideshowFadeAnimate[id] = 'hold';
          setTimeout('slideshowFadeRun(\''+id+'\')',holdTime);      
        }
        else if(opa>100)
          opa = 200-opa;
          
        obj.style.opacity = (opa/100).toString();
        obj.style.filter  = "alpha(opacity="+opa.toString()+")";
        
        slideshowFadeCount[id]++;
        
        if(slideshowFadeCount[id]==(slideshowFadeImages[id].length*200))
          slideshowFadeCount[id]=0;
      }
    }
    
    
    //======================
    
    
    function slideshowFadeMouseout(id)
    {
      if(slideshowFadeAnimate[id]=='mouseover')
        slideshowFadeAnimate[id] = 'run';
    }
    
    
    //======================
    
    
    function slideshowFadeMouseover(id)
    {
      if(slideshowFadeAnimate[id]=='run')
      {
        slideshowFadeAnimate[id] = 'mouseover';
        var obj = document.getElementById(id+'img');
        obj.style.opacity = "1";
        obj.style.filter  = "alpha(opacity=100)";
        slideshowFadeCount[id] = (Math.floor(slideshowFadeCount[id]/200)*200)+101;
      }
    }
    
    
    //======================
    
    
    function slideshowFadeRun(id)
    {
      slideshowFadeAnimate[id] = 'run';
    }
    
    
    //======================
    
    window.onload = function(){
     slideshowFade('Slideshow1','',imgArray,20,5000);
    }
    
    </script>
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    3
    Rep Power
    0
    I can't get this to work still. My page won't load. I use firefox. Is the "caption" an attribute to the image source? I'm hoping to write a description for each picture in the slideshow preferably underneath the photo itself.
  10. #6
  11. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,183
    Rep Power
    184
    Originally Posted by Treikayan
    I can't get this to work still. My page won't load. I use firefox.
    I am not really sure why not, as again; it works fine for me. Are you sure you images SRCs are correct; the images SRCs, in the demo I provided you; were just made up..., you will have to edit those, as needed, in your "imgArray".

    Originally Posted by Treikayan
    I use firefox. Is the "caption" an attribute to the image source?
    No, the caption text is in an array/object.

    Originally Posted by Treikayan
    I'm hoping to write a description for each picture in the slideshow preferably underneath the photo itself.
    That's what occurs (that's the way I set-up the code, that I added); onmouseover of image and onmouseout; it disappears.

IMN logo majestic logo threadwatch logo seochat tools logo