Results 1 to 4 of 4

Thread: Default onClick image swaps with loop

  1. #1
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Default onClick image swaps with loop

    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?

  2. #2
    Join Date
    May 2012
    Location
    Hitchhiking the Galaxy
    Posts
    1,013
    Thanks
    47
    Thanked 139 Times in 139 Posts
    Blog Entries
    1

    Default

    Quote Originally Posted by croberts View Post
    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?
    Alright, I'm a little confused here, although I do get the fact that you're trying to loop back to the first image, so In the spawImg function you have to change:
    Code:
    function swapImg(){
        var doc = document.getElementById("swap");
        doc.src = "images/" + oImgs[x];
        if(x<oImgs.length-1){
        x ++;
        }else{
        x = 0;
        }
        }
    To:
    Code:
    function swapImg(){
        var doc = document.getElementById("swap");
        doc.src = "images/" + oImgs[x];
        if(x = oImgs.length){
        x = 0;
        }else{
        x++;
        }
    if(x<oImgs.length-1){
        x ++;
        }else{
        x = 0;
        }
        }
    That should work.
    "Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program." - Linus Torvalds
    Anime Views Forums
    Bernie

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,982
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    (function(){
    	var swaps = {
    		swap1: {
    			images	: [
    				'james0.jpg',
    				'james1.jpg',
    				'james2.jpg'
    			]
    		},
    		swap2: {
    			images	: [
    				'martha0.jpg',
    				'martha1.jpg',
    				'martha2.jpg'
    			]
    		}
    	}, p, t;
    
    	function swapImg(cfg){
    		t.src = 'images/' + cfg.images[cfg.x = ++cfg.x % cfg.images.length];		
    	}
    
    	swapImg.preload = function(images){
    		var i = 0;
    		while(images[++i]){
    			(function(im){
    				var nim = new Image();
    				nim.src = 'images/' + im;
    			})(images[i]);
    		}
    	};
    
    	for(p in swaps){
    		swaps[p].x = 0;
    		swapImg.preload(swaps[p].images);
    	}
    	
    	function swaponclick(e){
    		e = e || event;
    		t = e.target || e.srcElement;
    		swaps[t.id] && swapImg(swaps[t.id]);
    	}
    
    	document.addEventListener && document.addEventListener('click', swaponclick, false) ||
    	!document.addEventListener && document.attachEvent && document.attachEvent('onclick', swaponclick);
    
    })();
    </script>
    </head>
    <body>
    <img id="swap1" src="images/james0.jpg" width="100" height="100" alt="james image" title="James Image"><br>
    <img id="swap2" src="images/martha0.jpg" width="100" height="100" alt="martha image" title="Martha Image"><br>
    </body>
    </html>
    Or the more compact, yet more verbose (changes highlighted):

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    
    (function(){
    	var swaps = {}, p, t;
    
    	swaps.swap1 = {images: []};
    	swaps.swap1.images[0] = 'james0.jpg';
    	swaps.swap1.images[1] = 'james1.jpg';
    	swaps.swap1.images[2] = 'james2.jpg';
    
    	swaps.swap2 = {images: []};
    	swaps.swap2.images[0] = 'martha0.jpg';
    	swaps.swap2.images[1] = 'martha1.jpg';
    	swaps.swap2.images[2] = 'martha2.jpg';
    
    	function swapImg(cfg){
    		t.src = 'images/' + cfg.images[cfg.x = ++cfg.x % cfg.images.length];		
    	}
    
    	swapImg.preload = function(images){
    		var i = 0;
    		while(images[++i]){
    			(function(im){
    				var nim = new Image();
    				nim.src = 'images/' + im;
    			})(images[i]);
    		}
    	};
    
    	for(p in swaps){
    		swaps[p].x = 0;
    		swapImg.preload(swaps[p].images);
    	}
    	
    	function swaponclick(e){
    		e = e || event;
    		t = e.target || e.srcElement;
    		swaps[t.id] && swapImg(swaps[t.id]);
    	}
    
    	document.addEventListener && document.addEventListener('click', swaponclick, false) ||
    	!document.addEventListener && document.attachEvent && document.attachEvent('onclick', swaponclick);
    
    })();
    </script>
    </head>
    <body>
    <img id="swap1" src="images/james0.jpg" width="100" height="100" alt="james image" title="James Image"><br>
    <img id="swap2" src="images/martha0.jpg" width="100" height="100" alt="martha image" title="Martha Image"><br>
    </body>
    </html>
    Last edited by jscheuer1; 07-15-2012 at 05:46 PM. Reason: efficiencies and fix typo in preload function
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jul 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks John and Bernie, that makes sense.

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
  •