Having multiple slideshows on one page that open on click

JavaScript
1

Hi everybody,

I am new to javascript/jquery and am trying to make a website that has 3 images on it. Each of these images when clicked will open a slideshow in the middle of the page with next and back buttons. So far I can have one slideshow on a page that is automatically loaded when you open the site and is scrolling through the images. Any help?

So far:

in the head section:

<script type="text/javascript">
<!--
var image1=new Image()
image1.src="images/gallery/of1_thumb.jpg"
var image2=new Image()
image2.src="images/gallery/of2_thumb.jpg"
var image3=new Image()
image3.src="images/gallery/of3_thumb.jpg"
var image4=new Image()
image4.src="images/gallery/of4_thumb.jpg"
var image5=new Image()
image5.src="images/gallery/of5_thumb.jpg"
var image6=new Image()
image6.src="images/gallery/of6_thumb.jpg"
//-->
</script>

in the body:


<img src="images/gallery/of1.jpg" name="slide">
 <script type="text/javascript">
                            <!--
                            //variable that will increment through the images
                            var step=1
                            function slideit(){
                            //if browser does not support the image object, exit.
                            if (!document.images)
                            return
                            document.images.slide.src=eval("image"+step+".src")
                            if (step<6)
                            step++
                            else
                            step=1
                            //call function "slideit()" every 2.5 seconds
                            setTimeout("slideit()",2500)
                            }
                            slideit()
                            //-->
                            </script>
2

Having multiple slideshows on one page that open on click

The following script has three boxes (1,2,3). If you click on one of them the image below will start counting at that number. The bottom image also has a left and right button. If you click the left button the count goes backwards, the right button moves the count forwards.

The numbered images are for illustrative purposes only. You can substitute them for any other image you want. All images are preloaded on opening the page.

You can see it all working in JS Fiddle. :slight_smile:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>multiple slide shows</title>
<script type="text/javascript">
// preload images
var i=0, A=new Array(7);
A[0]=null; // not used
for (i=1; i<A.length;i++)
  { A[i]=new Image(); A[i].src="http://allanp.net/AB/B"+i+".jpg";
  }
// -----
   var step=1, tOut=null, dirn; // global
   function slideIt(thisStart,thisDirn)
     { clearTimeout(tOut);
       dirn=thisDirn;
       if(thisStart){step=thisStart;}
       slideObj.src=A[step].src;
       if(thisDirn=="R")
        { step=(step!=6)? step+1 : 1; }
       else
        { step=(step!=1)? step-1 : 6; }
    // change the delay here
      tOut=setTimeout("slideIt(0,dirn)",1500)
   }
// -----
  function moveL_R(dir)
   { clearTimeout(tOut);
     if(dir=="R")
      { bRObj.disabled=true; bRObj.style.borderColor="#F00";
        bLObj.disabled=false; bLObj.style.borderColor="#0F0"; }
     else
      { bRObj.disabled=false; bRObj.style.borderColor="#0F0";
        bLObj.disabled=true; bLObj.style.borderColor="#F00";}
     var thisStep;
     if(dir=="R") { thisStep=(step+1==7)? 1 : step+1; }
     else { thisStep=(step-1==0)? 6 : step-1; }
     slideIt(thisStep,dir);
   }
// -------
 function reStart(startNo)
  {   bRObj.disabled=false; bRObj.style.borderColor="#0F0";
      bLObj.disabled=false; bLObj.style.borderColor="#0F0";
    // all new starts move right
      slideIt(startNo,"R");
  }
// -------
var slideObj, bLObj, bRObj; // global
 function init()
  { slideObj=document.getElementById("slide");
    bLObj=document.getElementById("bL");
    bRObj=document.getElementById("bR");
    reStart(4,'R') // first start
  }
// -----------
window.onload=init;
//
</script>
<style type="text/css">
body { font-family:arial, helvetica, sans-serif; font-weight:bold; font-size:13px; color:#000; text-align:left; margin:3px 0px; }
#bBox { margin:10px auto 0px auto; overflow:auto; width:370px; border:1px solid #CCC;  }
#bBox img { float:left; margin:10px; cursor:pointer; }
#pic { margin-top:30px; text-align:center; }
#pic input { vertical-align:20px; }
#slide { margin:0px 10px; }
#wrap  { width:500px; height:500px; margin:50px; text-align:center; }
#bL, #bR { border:2px solid #0F0; }
</style>
</head>

<body>

<div id="wrap">
  <p>Click box to start counting at this number</p>
  <div id="bBox">
    <img src="http://allanp.net/AB/B1.jpg" onclick="reStart(1)" width="100" height="100">
    <img src="http://allanp.net/AB/B2.jpg" onclick="reStart(2)" width="100" height="100">
    <img src="http://allanp.net/AB/B3.jpg" onclick="reStart(3)" width="100" height="100">
  </div>
  <div id="pic">
    <p>Click left or right button to change direction of count</p>
    <input id="bL" type="button" onclick="moveL_R('L')" value="<<" name="bL"><img id="slide" src="images/B1.jpg" width="100" height="100"><input id="bR" type="button" onclick="moveL_R('R')" value=">>" name="bR"></div>
</div>

</body>

</html>