Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Triple picture swap

    I am trying to set up a simple script so that when the button is clicked the picture and the text box contents move to the right one spot. Then the for most right one will restart on the left (loop)

    Heres the code I have so far

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>
    <script>
    function swapContentsOfTwoPictures(){



    n=A.src
    A.src=B.src
    B.src=n

    }


    </script>
    </head>

    <body>


    <table align="center" cellspacing="2" cellpadding="2" border="2">
    <tr>
    <td><img name="A" src="1.jpg" > </td>
    <td><img name="B" src="2.jpg" > </td>
    <td><img name="C" src="3.jpg" > </td>
    </tr>
    <tr>
    <td colspan="3"><p align="center" <input type="button" value="not as assigned"

    onclick="swapContentsOfTwoPictures()" ></p></td>
    </tr>
    <tr>
    <td><input name="AA" value="one"></td>
    <td><input name="BB" value="two"></td>
    <td><input name="CC" value="three"></td>
    </tr>
    </table>

  • #2
    Regular Coder
    Join Date
    Feb 2009
    Location
    Wheeling, IL
    Posts
    358
    Thanks
    5
    Thanked 62 Times in 60 Posts
    Hmmm, well... the way you've done it... certainly may seem simple, but I personally prefer to be able to keep track of images, rather than just assigning. Now, the following will work with any amount of images (not just 3), and should pretty much achieve the carousel effect(only in one direction, considering there's only one function at the moment, but it shouldn't take too long to add a secondary for moving in the other direction):

    Code:
    <script type="text/javascript">
    minimg = 1;
    currimg = 2;
    maximg = 3;
    extension = ".jpeg"
    
    function movefwd(){
        if (currimg == minimg)
            currimg = maximg;
        else
            currimg--;
        if (currimg == minimg)
            var fstpic = maximg + extension;
        else
            var fstpic = (currimg - 1) + extension;
        A.src = fstpic;
        B.src = currimg + extension;
        if (currimg == maximg)
            lstpic = minimg + extension;
        else
            lstpic = (currimg + 1) + extension;
        C.src = lstpic;
    }
    
    function movebck() {
    }
    </script>
    And just call the function movefwd on a desired button. Enjoy.

  • #3
    Banned
    Join Date
    Feb 2009
    Posts
    36
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Circular left to right, scrolling images, with caption. Sample images, attached:


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Conveyor Belt Slideshow</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    	
    	var useWidth = "195"; // width of an image plus 10px, more or less;
    	var pause = 3 // 3 seconds for each image;
    	var speed = 3; // scroll speed, larger is faster;
    	
    	var images = [];
    	images[0] = "<img src='images/Cleve1.jpg' alt=''>";
    	images[1] = "<img src='images/Cleve2.jpg' alt=''>";
    	images[2] = "<img src='images/Cleve3.jpg' alt=''>";
    	images[3] = "<img src='images/Cleve4.jpg' alt=''>";
    	images[4] = "<img src='images/Cleve5.jpg' alt=''>";
    	
    	var caption = [];
    	caption[0] = "Terminal Tower";
    	caption[1] = "Great Lakes Science Museum";
    	caption[2] = "Cleveland City Hall";
    	caption[3] = "Cleveland Browns Stadium";
    	caption[4] = "Rock and Roll Hall of Fame";
    
    	var nContainer = "";
    	var n = 0;
    	
    	function buildImgStr(){
    
    		var imgStr = "";
    		for (i=images.length-1; i>-1; i--)
    			{
    			 imgStr += images[i]+ "&nbsp;&nbsp";
    			}
    		document.getElementById('crawl').innerHTML = imgStr;
    		nContainer.scrollLeft = nContainer.scrollWidth - useWidth - 3;
    		document.getElementById('caption').innerHTML = caption[n];
    		if (n < caption.length-1){n++}
    		else {n = 0}
    	}
    
    	function circleStr(){
    
    		var fifoImg = images[0];
    		for (i=1; i<images.length; i++)
    			{
    			 images[i-1] = images[i];
    			}
    		images[images.length-1] = fifoImg;
    		buildImgStr();
    		setTimeout("startCrawl()",pause*1000);
    	}
    
    	function startCrawl(){
    		
    		var currPos = nContainer.scrollLeft;
    		if (currPos <= nContainer.scrollWidth - (2*useWidth))
    			{
    			 circleStr();
    			}
    		else 	{
    			 nContainer.scrollLeft = currPos - speed;
    			 setTimeout("startCrawl()",10);
    			}
    	}
    	
    	function init(){
    
    		nHolder = document.getElementById('holder');
    		nHolder.style.visibility = "hidden";
    		nContainer = document.getElementById('container');		
    		nContainer.style.width = useWidth+"px";
    		nHolder.style.width = useWidth+"px";
    		buildImgStr();
    		startCrawl();
    		setTimeout("nHolder.style.visibility = 'visible'", 1500);
    	}
    	
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	 body {background-color: #fffacd; margin-top: 60px;}
    	#holder {border-right: 1px solid black; border-top: 1px solid black;
    		 margin: 10px; border-left: 1px solid black; border-bottom: 1px solid black;
    		 background-color: #ffffe0; width: 215px; margin: auto;}
    	#container {overflow: hidden;}
    	#crawl {font-family: times; font-size: 11pt; padding-right: 0px; padding-left: 3px;
    		padding-bottom: 0px; padding-top: 3px; white-space: nowrap;}
    	#caption {padding-right: 3px; padding-left: 3px; font-size: 10pt; padding-bottom: 3px;
    		  color: #00008b; padding-top: 3px; font-family: arial; background-color: #00ced1; text-align:center;}
    
    </style>
    </head>
    	<body>
             
    		<div id="holder">
                    	<div id="container">
                            	<div id="crawl"></div>
                            </div>
                            <div id="caption"></div>
                    </div>                         
    
         </body>
    </html>
    Attached Files Attached Files
    Last edited by Henley; 03-13-2009 at 07:48 PM.


  •  

    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
    •