Jump to content

JS: image slide

tinfanide

By tinfanide
in JavaScript

Recommended Posts

tinfanide Member

tinfanide

Posted
Posted

I'm trying building an image slider and am stuck at a point where I don't know how to describe the problem I'm havingTo be simple, the problem is:When I press PREV or NEXT, the index number (imgNumber) is working well.When I click the 1,2,3,4, they are okay as well (can link to the correct image).The problem is,If I first press NEXT, it goes to image 2 (Youtube) and of course the index number is imgNumber[1].Then I select, say, the forth picture (imgNumber[3]) - GMail, I know the index number still stays at [1].So when I press NEXT, it does not go to the first image (imgNumber[0]) - Google, but it goes from [1] to [2].Then, how is it possible to fix this problem? I mean to make sure even folks like I randomly click the PREV/NEXT buttons and the 1,2,3,4 and they still co-work (index number and the image links) well.Hope I'm expressing it clearly enough.Thanks for any patient explanation.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: Image Slider</title><script language="JavaScript">window.onload = function(){	imgSize();	imglink();	}function imgSize(){	if(document.slideImage && document.slideImage.style){		document.slideImage.style.height = '400px';		document.slideImage.style.width = '400px';		}	}var img = new Array();img[0] = "http://cdn.unixmen.com/images/stories/linuxlogos/google-chrome-logo.jpg";img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";var imgNumber = 1;function previousImage(){  if(imgNumber > 1){	imgNumber--	}  else{	  imgNumber = img.length;	}  document.slideImage.src = img[imgNumber-1]  } function nextImage(){  if(imgNumber < img.length){	imgNumber++	}  else{	  imgNumber = 1;	}  document.slideImage.src = img[imgNumber-1]  }function showcase(imgNumber){	document.slideImage.src = img[imgNumber-1];	}</script><style>a {text-decoration: none;}	a:hover {	color: black;	font-size: 18px;	font-weight: bold;}</style></head><body><table style="width: 400px;"><tr><td colspan="3"><img src="http://www.creston.com/assets/images/layout/showcase.png" name="slideImage"></td></tr><tr><td width="55"><a href="java script:previousImage()">Previous</a></td><td id="imglink" width="576" align="center"><a href="java script:showcase(1)">1</a><a href="java script:showcase(2)">2</a><a href="java script:showcase(3)">3</a><a href="java script:showcase(4)">4</a></td><td width="55"><a href="java script:nextImage()">Next</a></td></tr></table><ul><li>First: Google</li><li>Second: Youtube</li><li>Third: Facebook</li><li>Forth: GMail</li></ul></body></html>

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted

In your showcase function you need to change the imgNumber to whatever the number was that was clicked.

function showcase(newImgNum){	imgNumber = newImgNum;	document.slideImage.src = img[imgNumber-1];}

(Notice I renamed the function's parameter to avoid confusion and ambiguity)

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Do yourself a favor and start your internal indexing at 0, the same way your array is constructed. Keep the entire script consistent that way. Offsetting everything by 1 will eventually drive you crazy. Just get used to the idea that computers start counting at 0. Train your mind to start counting at 0 also, and you will eventually preserve your sanity.I would bet my teeth that every senior on this board and 99.99% of all professional programmers count up from 0.The only one who needs to see the images labeled differently is your user.

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
Do yourself a favor and start your internal indexing at 0, the same way your array is constructed. Keep the entire script consistent that way. Offsetting everything by 1 will eventually drive you crazy. Just get used to the idea that computers start counting at 0. Train your mind to start counting at 0 also, and you will eventually preserve your sanity.I would bet my teeth that every senior on this board and 99.99% of all professional programmers count up from 0.The only one who needs to see the images labeled differently is your user.
I give that a second....(Yeah, I always index everything starting at 0, too.... :))
Link to comment
Share on other sites
brucemand Member

brucemand

Posted
Posted
...I would bet my teeth that every senior on this board and 99.99% of all professional programmers count up from 0....
I give that a second....(Yeah, I always index everything starting at 0, too.... :P)
hmm... so a programmer's first spouse is a '0' ? :)that kind of guarantees a divorce if you really want to marry someone with value ?? :)
Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Other way around. The spouse's first programmer will be a "0." Programmers tend to be very strange people. We especially dislike uncertainty. We say things like, "Huh? Who are you talking about? Please explain that so I understand what you mean. I don't care what color the house is, I want to know the number of the house. Please do not ask me to look for something in your purse without an index."Well, maybe that's just me. :)

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: Image Slider</title><script language="JavaScript">window.onload = function(){	imgSize();	imglink();	}function imgSize(){	if(document.slideImage && document.slideImage.style){		document.slideImage.style.height = '400px';		document.slideImage.style.width = '400px';		}	}var img = new Array();img[0] = "http://cdn.unixmen.com/images/stories/linuxlogos/google-chrome-logo.jpg";img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";var imgNumber = 0;function previousImage(){  if(imgNumber > 1){	imgNumber--	}  else{	  imgNumber = img.length;	}  document.slideImage.src = img[imgNumber-1]  } function nextImage(){  if(imgNumber < img.length){	imgNumber++	}  else{	  imgNumber = 1;	}  document.slideImage.src = img[imgNumber-1]  }function showcase(idx){	imgNumber = idx;	document.slideImage.src = img[imgNumber-1];	}function imglink(){	var x;	for(x=0;x<img.length;x++){		var imglink = document.getElementById('imglink');		var a = document.createElement('a');		var idx = x+1;							a.innerHTML = x+1 + ' ';		a.setAttribute("href","java script:showcase("+idx+")");		a.style.textDecoration = 'none';				imglink.appendChild(a);		}	}/////////////////////////////////////////////var prev;var next;function play(){		function swap(){				prev = previousImage();		next = nextImage();				var s = [prev,next]		this.s = this.s == 0 ? 0 : 1; 				}		autoplay = setInterval(swap,1000);	}	function pause(){	clearInterval(autoplay);	}////////////////////////////////////////////////</script><style>a:hover {	color: black;	font-size: 18px;	font-weight: bold;}</style></head><body><table style="width: 400px;"><tr><td colspan="5"><img src="http://www.creston.com/assets/images/layout/showcase.png" name="slideImage"></td></tr><tr><td width="55"><a href="java script:previousImage()">Previous</a></td><td><a href="java script:play()">Play</a></td><td id="imglink" width="576" align="center"></td><td><a href="java script:pause()">Pause</a></td><td width="55"><a href="java script:nextImage()">Next</a></td></tr></table></body></html>

How can I make the "Play" button either execute the previousImage function or the nextImage function randomly?I've tried to put those functions in a conditional operator but it failed.Anything wrong with that?

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: Image Slider</title><script language="JavaScript">window.onload = function(){	imgSize();	imglink();	}function imgSize(){	if(document.slideImage && document.slideImage.style){		document.slideImage.style.height = '400px';		document.slideImage.style.width = '400px';		}	}var img = new Array();img[0] = "http://cdn.unixmen.com/images/stories/linuxlogos/google-chrome-logo.jpg";img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";var imgNumber = 0;function previousImage(){  if(imgNumber > 1){	imgNumber--	}  else{	  imgNumber = img.length;	}  document.slideImage.src = img[imgNumber-1]  } function nextImage(){  if(imgNumber < img.length){	imgNumber++	}  else{	  imgNumber = 1;	}  document.slideImage.src = img[imgNumber-1]  }function showcase(idx){	imgNumber = idx;	document.slideImage.src = img[imgNumber-1];	}function imglink(){	var x;	for(x=0;x<img.length;x++){		var imglink = document.getElementById('imglink');		var a = document.createElement('a');		var idx = x+1;							a.innerHTML = x+1 + ' ';		a.setAttribute("href","java script:showcase("+idx+")");		a.style.textDecoration = 'none';				imglink.appendChild(a);		}	}/////////////////////////////////////////////var prev;var next;function play(){		function swap(){				prev = previousImage();		next = nextImage();				var s = [prev,next]		this.s = this.s == 0 ? 0 : 1; 				}		autoplay = setInterval(swap,1000);	}	function pause(){	clearInterval(autoplay);	}////////////////////////////////////////////////</script><style>a:hover {	color: black;	font-size: 18px;	font-weight: bold;}</style></head><body><table style="width: 400px;"><tr><td colspan="5"><img src="http://www.creston.com/assets/images/layout/showcase.png" name="slideImage"></td></tr><tr><td width="55"><a href="java script:previousImage()">Previous</a></td><td><a href="java script:play()">Play</a></td><td id="imglink" width="576" align="center"></td><td><a href="java script:pause()">Pause</a></td><td width="55"><a href="java script:nextImage()">Next</a></td></tr></table></body></html>

How can I make the "Play" button either execute the previousImage function or the nextImage function randomly?I've tried to put those functions in a conditional operator but it failed.Anything wrong with that?

It's solved by adding Math.random to the function play().
var autoplay;function play(){		var prev = previousImage;	var next = nextImage;		var playSwitch = new Array (prev,next);	var rand = Math.ceil(Math.random()*2)-1;		autoplay = setInterval(playSwitch[rand],1000);		}function pause(){	clearInterval(autoplay);	}

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: Image Slider</title><script language="JavaScript">window.onload = function(){	imgSize();	imglink();	}function imgSize(){	if(document.slideImage && document.slideImage.style){		document.slideImage.style.height = '400px';		document.slideImage.style.width = '400px';		}	}var img = new Array();img[0] = "http://cdn.unixmen.com/images/stories/linuxlogos/google-chrome-logo.jpg";img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";var imgNumber = 0;function previousImage(){  if(imgNumber > 1){	imgNumber--	}  else{	  imgNumber = img.length;	}  document.slideImage.src = img[imgNumber-1]  } function nextImage(){  if(imgNumber < img.length){	imgNumber++	}  else{	  imgNumber = 1;	}  document.slideImage.src = img[imgNumber-1]  }function showcase(idx){	imgNumber = idx;	document.slideImage.src = img[imgNumber-1];	}function imglink(){	var x;	for(x=0;x<img.length;x++){		var imglink = document.getElementById('imglink');		var a = document.createElement('a');		var idx = x+1;							a.innerHTML = x+1 + ' ';		a.setAttribute("href","java script:showcase("+idx+")");		a.style.textDecoration = 'none';				imglink.appendChild(a);		}	}var autoplay;function play(){		var prev = previousImage;	var next = nextImage;		var playSwitch = new Array (prev,next);	var rand = Math.ceil(Math.random()*2)-1;		autoplay = setInterval(playSwitch[rand],1000);		}	function randPlay(){	var rand = Math.ceil(Math.random()*img.length)-1;	document.slideImage.src = img[rand];	}function shuffle(){	shuffle = setInterval(randPlay,1000);	}function pause(){	clearInterval(autoplay);	clearInterval(shuffle);	}</script><style>a:hover {	color: black;	font-size: 18px;	font-weight: bold;}</style></head><body><table style="width: 400px;"><tr><td colspan="6"><img src="http://www.creston.com/assets/images/layout/showcase.png" name="slideImage"></td></tr><tr><td width="55"><a href="java script:previousImage()">Previous</a></td><td><a href="java script:play()">Play</a></td><td><a href="java script:shuffle()">Shuffle</a></td><td id="imglink" width="576" align="center"></td><td><a href="java script:pause()">Pause</a></td><td width="55"><a href="java script:nextImage()">Next</a></td></tr></table></body></html>

But sooner or later I added more to the image slider and made things more complicated.I made a shuffle function that randomly plays the images in the slider. It works well, but seperately.When I put a clearInterval for the shuffle function under the pause function (I want to let one button clear both of the functions (shuffle & play))I pressed the shuffle function. Good that it worked. But when I pressed the pause, and I started the play function and soon turned back to the shuffle one,it seemed that they crashed with each other and the shuffle one could not be run because the play one was running.How is it possible to let them work in their own ways in JS?

Link to comment
Share on other sites
tinfanide Member

tinfanide

Posted
  • Author
Posted 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>JS: Image Slider</title><script language="JavaScript">window.onload = function(){	imgSize();	imglink();	}function imgSize(){	if(document.slideImage && document.slideImage.style){		document.slideImage.style.height = '400px';		document.slideImage.style.width = '400px';		}	}var img = new Array();img[0] = "http://cdn.unixmen.com/images/stories/linuxlogos/google-chrome-logo.jpg";img[1] = "http://thenextweb.com/socialmedia/files/2010/07/youtube_logo.png";img[2] = "http://www.techlifeweb.com/facebook_logo.jpg";img[3] = "http://hackingarticles.com/wp-content/uploads/gmail_logo_stylized.png";var imgNumber = 0;function previousImage(){  if(imgNumber > 1){	imgNumber--	}  else{	  imgNumber = img.length;	}  document.slideImage.src = img[imgNumber-1]  } function nextImage(){  if(imgNumber < img.length){	imgNumber++	}  else{	  imgNumber = 1;	}  document.slideImage.src = img[imgNumber-1]  }function showcase(idx){	imgNumber = idx;	document.slideImage.src = img[imgNumber-1];	}function imglink(){	var x;	for(x=0;x<img.length;x++){		var imglink = document.getElementById('imglink');		var a = document.createElement('a');		var idx = x+1;							a.innerHTML = x+1 + ' ';		a.setAttribute("href","java script:showcase("+idx+")");		a.style.textDecoration = 'none';				imglink.appendChild(a);		}	}var autoplay;function play(){		var prev = previousImage;	var next = nextImage;		var playSwitch = new Array (prev,next);	var rand = Math.ceil(Math.random()*2)-1;		autoplay = setInterval(playSwitch[rand],1000);		}	function randPlay(){	var rand = Math.ceil(Math.random()*img.length)-1;	document.slideImage.src = img[rand];	}function shuffle(){	shuffle = setInterval(randPlay,1000);	}function pause(){	clearInterval(autoplay);	clearInterval(shuffle);	}</script><style>a:hover {	color: black;	font-size: 18px;	font-weight: bold;}</style></head><body><table style="width: 400px;"><tr><td colspan="6"><img src="http://www.creston.com/assets/images/layout/showcase.png" name="slideImage"></td></tr><tr><td width="55"><a href="java script:previousImage()">Previous</a></td><td><a href="java script:play()">Play</a></td><td><a href="java script:shuffle()">Shuffle</a></td><td id="imglink" width="576" align="center"></td><td><a href="java script:pause()">Pause</a></td><td width="55"><a href="java script:nextImage()">Next</a></td></tr></table></body></html>

But sooner or later I added more to the image slider and made things more complicated.I made a shuffle function that randomly plays the images in the slider. It works well, but seperately.When I put a clearInterval for the shuffle function under the pause function (I want to let one button clear both of the functions (shuffle & play))I pressed the shuffle function. Good that it worked. But when I pressed the pause, and I started the play function and soon turned back to the shuffle one,it seemed that they crashed with each other and the shuffle one could not be run because the play one was running.How is it possible to let them work in their own ways in JS?

After several testings, I realise that seemingly a variable name should not be the same as that of a function.shuffle changed to shuffle1
function shuffle(){	shuffle1 = setInterval(randPlay,1000); // It seems that the variable name cannot be the same as the function name	}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...