Results 1 to 8 of 8

Thread: onClick image swaps with loop

  1. #1
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default onClick image swaps with loop

    Hello,
    I am new to javascript, wondering if someone can help..

    I found the following script that changes an image every time you click on it.

    ++++++++++++++++++++++

    <script type="text/javascript">
    <!--

    var oImgs = [];
    oImgs[0] = "james.jpg"
    oImgs[1] = "james1.jpg"
    oImgs[2] = "james2.jpg"

    for(var i=0;i<oImgs.length;i++){
    var imgs = new Image();
    imgs.src = "images/" + oImgs[i];
    }

    var x = 1;

    function swapImg(){
    var doc = document.getElementById("swap");
    doc.src = "images/" + oImgs[x];
    if(x<oImgs.length-1){
    x ++;
    }else{
    x = 0;
    }
    }

    //-->
    </script>

    <img id="swap" src="images/james.jpg" width="80" height="120" border="0" onclick="swapImg();" style="cursorointer;" />

    +++++++++++++++++++++

    This script works perfectly for me, but I would like to have multiple instances of this script, using different images for every instance.

    For example, I have 3 boxes - red, blue, green
    - if you click on the red box, it loops through a square, a circle and back to a red box
    - if you click on the blue box, it loops through a happy face, a sad face, and back to a blue box
    - if you click on a green box, it loops through a tree, a flower, and back to a green box

    I am not looking for a timed loop, or anything like that. I would like to just click on the image to swap it. Once it is clicked 3 times, it returns to the original image.
    How can I go about using this script for different mini image galleries, as mentioned above?
    Sorry for this long winded explanation.

    Thanks very much!

  2. #2
    Join Date
    Aug 2008
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Heres a simple class (javascript equivalent) I made that you could use.

    //This class will manage cycling through a list of images
    function ImageCollection(images) {
    this.images = images;
    this.i = 0;
    this.next = function(img) {
    this.i++;
    if (this.i == images.length)
    this.i = 0;
    img.src = images[this.i];
    }
    }

    /*
    Create an ImageCollection object for each image gallery.
    Pass each one an array of image urls to be scrolled through
    */
    var ic1 = new ImageCollection(['img1.jpg','img2.jpg', 'img3.jpg']);
    var ic2 = new ImageCollection(['img1.jpg','img2.jpg', 'img3.jpg']);

    put the following into your html where you want the clickable images
    <img src='img1.jpg' onclick="ic1.next(this)">
    <img src='img1.jpg' onclick="ic2.next(this)">

  3. The Following User Says Thank You to shadowhunter For This Useful Post:

    jkap (09-12-2008)

  4. #3
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Are the boxes seperate? I will assume they are. Feel free to modify the code to fit your needs, seperate boxes or not. Anyway, here is some code.

    Code:
    <script type="text/javascript">
    <!--
    
    var ima_a = new Array(4);
    ima_a[0]= "images/redbox.jpg";
    ima_a[1] = "images/square.jpg";
    ima_a[2] = "images/circle.jpg";
    var ima_b = new Array(4);
    ima_b[0] = "images/bluebox.jpg";
    ima_b[1] = "images/happy.jpg";
    ima_b[2] = "images/sad.jpg";
    var ima_c = new Array(4);
    ima_c[0] = "images/greenbox.jpg";
    ima_c[1] = "images/tree.jpg";
    ima_c[2] = "images/flower.jpg";
    
    function swapImg(x)
    {
    var red = 0, blue = 0, green = 0;
    switch(x)
    {
        case 0:
            if(red < ima_a.length-1) {
            red++;
            } else { red = 0; }
            document.getElementById("swap1").src = ima_a[red];
            // alert(red);
            break;
        case 1:
            if(blue < ima_b.length-1) {
            blue++;
            } else { blue = 0; }
            document.getElementById("swap2").src = ima_b[blue];
            // alert(blue);
            break;
        case 2:
            if(green < ima_c.length-1) {
            green++;
            } else { green = 0; }
            document.getElementById("swap3").src = ima_c[green];
            // alert(green);
            break;
        default:
            alert("We are sorry, but an error has occured on this page.");
            break;
    }
    }
    
    //-->
    </script>
    
    <img id="swap1" src="images/redbox.jpg" width="80" height="120" border="0" onclick="swapImg(0);" style="cursor:default;" />
    
    <img id="swap2" src="images/bluebox.jpg" width="80" height="120" border="0" onclick="swapImg(1);" style="cursor:default;" />
    
    <img id="swap3" src="images/greenbox.jpg" width="80" height="120" border="0" onclick="swapImg(2);" style="cursor:default;" />
    Hope this helped. It may not work, but I am pretty sure it will. If it doesn't just give me a heads-up.

    -magicyte
    Last edited by magicyte; 09-12-2008 at 03:24 AM.

  5. The Following User Says Thank You to magicyte For This Useful Post:

    jkap (09-12-2008)

  6. #4
    Join Date
    Jul 2008
    Posts
    128
    Thanks
    0
    Thanked 17 Times in 16 Posts

    Default

    With this code all you need add to the <img> tags is a unique ID.

    This example controls cycling of images in two different image placeholders with IDs 'firstIimage' and 'secondImage'.

    Code:
    <script type='text/javascript'>
    
    function CycleClick(imgHolder, imgArray)
    {
     this.size=imgArray.length  
     this.data = [];
     this.pos = 0;  
     this.imgHolder = document.getElementById(imgHolder);
       
     for(var i=0, len=this.size; i<len; i++)
     {
      this.data[i] = new Image();  
      this.data[i].src = imgArray[i];
      
      this.imgHolder.onclick=(function(inst){return function()
      { 
       this.src = inst.data[inst.pos++].src; 
       inst.pos %= inst.size;      
      }})(this);
     }
       
    }
    
    new CycleClick("firstImage", [ "image1.gif", "image2.gif", "image3.gif" ] );
    
    new CycleClick("secondImage", [ "image4.gif", "image5.gif", "image6.gif" ] );
    
    // Add more here as required

  7. The Following User Says Thank You to clueful For This Useful Post:

    jkap (09-12-2008)

  8. #5
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much for your help, everyone!! Hugely appreciated!

  9. #6
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by magicyte View Post
    Are the boxes seperate? I will assume they are. Feel free to modify the code to fit your needs, seperate boxes or not. Anyway, here is some code.

    Code:
    <script type="text/javascript">
    <!--
    
    var ima_a = new Array(4);
    ima_a[0]= "images/redbox.jpg";
    ima_a[1] = "images/square.jpg";
    ima_a[2] = "images/circle.jpg";
    var ima_b = new Array(4);
    ima_b[0] = "images/bluebox.jpg";
    ima_b[1] = "images/happy.jpg";
    ima_b[2] = "images/sad.jpg";
    var ima_c = new Array(4);
    ima_c[0] = "images/greenbox.jpg";
    ima_c[1] = "images/tree.jpg";
    ima_c[2] = "images/flower.jpg";
    
    function swapImg(x)
    {
    var red = 0, blue = 0, green = 0;
    switch(x)
    {
        case 0:
            if(red < ima_a.length-1) {
            red++;
            } else { red = 0; }
            document.getElementById("swap1").src = ima_a[red];
            // alert(red);
            break;
        case 1:
            if(blue < ima_b.length-1) {
            blue++;
            } else { blue = 0; }
            document.getElementById("swap2").src = ima_b[blue];
            // alert(blue);
            break;
        case 2:
            if(green < ima_c.length-1) {
            green++;
            } else { green = 0; }
            document.getElementById("swap3").src = ima_c[green];
            // alert(green);
            break;
        default:
            alert("We are sorry, but an error has occured on this page.");
            break;
    }
    }
    
    //-->
    </script>
    
    <img id="swap1" src="images/redbox.jpg" width="80" height="120" border="0" onclick="swapImg(0);" style="cursor:default;" />
    
    <img id="swap2" src="images/bluebox.jpg" width="80" height="120" border="0" onclick="swapImg(1);" style="cursor:default;" />
    
    <img id="swap3" src="images/greenbox.jpg" width="80" height="120" border="0" onclick="swapImg(2);" style="cursor:default;" />
    Hope this helped. It may not work, but I am pretty sure it will. If it doesn't just give me a heads-up.

    -magicyte
    This is only cycling through 1 image - it goes from redbox.jpg to square.jpg and then its no longer clickable.

  10. #7
    Join Date
    Sep 2008
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by shadowhunter View Post
    Heres a simple class (javascript equivalent) I made that you could use.

    //This class will manage cycling through a list of images
    function ImageCollection(images) {
    this.images = images;
    this.i = 0;
    this.next = function(img) {
    this.i++;
    if (this.i == images.length)
    this.i = 0;
    img.src = images[this.i];
    }
    }

    /*
    Create an ImageCollection object for each image gallery.
    Pass each one an array of image urls to be scrolled through
    */
    var ic1 = new ImageCollection(['img1.jpg','img2.jpg', 'img3.jpg']);
    var ic2 = new ImageCollection(['img1.jpg','img2.jpg', 'img3.jpg']);

    put the following into your html where you want the clickable images
    <img src='img1.jpg' onclick="ic1.next(this)">
    <img src='img1.jpg' onclick="ic2.next(this)">
    This works perfectly! Thanks again!

  11. #8
    Join Date
    Jun 2008
    Posts
    589
    Thanks
    13
    Thanked 54 Times in 54 Posts
    Blog Entries
    1

    Default

    Sorry. I couldn't really get it to work on my browser. I figured it MAY have worked on yours (whatever it is). Once again, sorry.

    -magicyte

Bookmarks

Posting Permissions

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