Triple picture swap

chuc819 · 03-13-2009, 04:51 AM

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>

Eldarrion · 03-13-2009, 04:09 PM

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.

Henley · 03-13-2009, 06:33 PM

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>