Jump to content

Image Rotation on the Click of Next and Previous Buttons


amitamberker
 Share

Recommended Posts

Hello JavaScript Experts, Greetings! What should I do to make this Change upon Clicking Next and Previous Buttons? There are 2 more Files inside "images" Folder: * rod3.jpg* rod6.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Rotating Images</title><style type="text/css">#container { border: 1px solid #C3C3C3; width: 272px; margin: 0 auto;}.FloatLeft{ float:left;}.FloatRight{ float:right;}.NoBorder { border-width: 0px;}</style> </head><body><div id="container"><div><span class="FloatLeft"><a href="#"><img alt="" src="images/prev.jpg" width="29" height="29" class="NoBorder" /></a></span><span class="FloatRight"><a href="#"><img alt="" src="images/next.jpg" width="29" height="29" class="NoBorder"/></a></span></div><div><img alt="Product 1" src="images/prod1.jpg" width="272" height="326" /></div></div></body></html>
Edited by creative1977
Link to comment
Share on other sites

You need to store all of the image URLs in an array in the order you want them to appear. The function that you run when you click next or previous should get the URL that is currently shown, find it in the array, and get either the next or previous URL in the array to set for the img element.

Link to comment
Share on other sites

You need to store all of the image URLs in an array in the order you want them to appear. The function that you run when you click next or previous should get the URL that is currently shown, find it in the array, and get either the next or previous URL in the array to set for the img element.
Hi justsomeguy,Could you please provide me some reference links?
Link to comment
Share on other sites

first you need to define starting variable var current_img=0; you then insert all the images within the div container (give it a id ref as in 'pic_frame') and use display:none to hide them all. use javascript to workout how many images you have placed in div container.

var parent_frame = document.getElementById("pic_frame"); //target parent containerchild_images = parent_frame.getElementsByTagName("img"); // target all img element within parent frame ('pic_frame')child_images[0].style.display="block"; //show first image - starts at 0img_total=child_images.length; // get total of img tags found

add onclick event to prev and next that will run respective functions prev() will decrease (current_img--) by 1, whereas next() will increase (current_img++) by 1. As each function is run to increase or decrease the current_img value, you will also check to see if this value is lower than 0 (then change to total images found -1), if value greater than total images found -1 change to 0; then loop through all images and hide using display none, then show image determine by value of current_img

    for(i=0;i<child_images.length;i++)        {        child_images[i].style.display="none";        }    child_images[current_img].style.display="block";

Link to comment
Share on other sites

first you need to define starting variable var current_img=0; you then insert all the images within the div container (give it a id ref as in 'pic_frame') and use display:none to hide them all. use javascript to workout how many images you have placed in div container.
var parent_frame = document.getElementById("pic_frame"); //target parent containerchild_images = parent_frame.getElementsByTagName("img"); // target all img element within parent frame ('pic_frame')child_images[0].style.display="block"; //show first image - starts at 0img_total=child_images.length; // get total of img tags found

add onclick event to prev and next that will run respective functions prev() will decrease (current_img--) by 1, whereas next() will increase (current_img++) by 1. As each function is run to increase or decrease the current_img value, you will also check to see if this value is lower than 0 (then change to total images found -1), if value greater than total images found -1 change to 0; then loop through all images and hide using display none, then show image determine by value of current_img

	for(i=0;i<child_images.length;i++)		{		child_images[i].style.display="none";		}	child_images[current_img].style.display="block";

Hi dsonesuk,Here is the Updated CODE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR...ransitional.dtd"]http://www.w3.org/TR...ransitional.dtd[/url]"> <html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Rotating Images</title> <style type="text/css"> #container { border: 1px solid #C3C3C3; width: 272px; margin: 0 auto; } .FloatLeft { float:left; } .FloatRight { float:right; } .NoBorder { border-width: 0px; } </style>  <script type="text/javascript">/*<![CDATA[*/var current_img=0;var parent_frame = document.getElementById("pic_frame"); //target parent containerchild_images = parent_frame.getElementsByTagName("img"); // target all img element within parent frame ('pic_frame'child_images[0].style.display="block"; //show first image - starts at 0img_total=child_images.length; // get total of img tags foundfor(i=0;i<child_images.length;i++){child_images[i].style.display="none";}child_images[current_img].style.display="block";/*]]>*/</script> </head> <body> <div id="container"> <div> <span class="FloatLeft"><a href="#"><img alt="" src="images/prev.jpg" width="29" height="29" class="NoBorder" onclick="(current_img--) by 1" /></a></span> <span class="FloatRight"><a href="#"><img alt="" src="images/next.jpg" width="29" height="29" class="NoBorder" onclick="(current_img++) by 1"/></a></span> </div> <div><img alt="Product 1" src="images/prod1.jpg" width="272" height="326" /></div> </div> </body></html>

Link to comment
Share on other sites

Hi dsonesuk,Here is the Updated CODE:
Updated as in, copied my example code and just pasted into your page? didn't do much did it. create FUNCTIONS (prev() and next()) for calling upon when previous and next buttons are clicked, these will increase or decrease current_img variable value, and also check its value is between 0 and img_total -1. ADD ALL images you wish to show in the div container below AND (most important!) give id ref, which is referenced here var parent_frame = document.getElementById("pic_frame");
 <div id="pic_frame"><img alt="Product 1" src="images/prod1.jpg" width="272" height="326" /><img alt="Product 2" src="images/prod2.jpg" width="272" height="326" /><img alt="Product 3" src="images/prod3.jpg" width="272" height="326" /></div> 

Link to comment
Share on other sites

Updated as in, copied my example code and just pasted into your page? didn't do much did it. create FUNCTIONS (prev() and next()) for calling upon when previous and next buttons are clicked, these will increase or decrease current_img variable value, and also check its value is between 0 and img_total -1. ADD ALL images you wish to show in the div container below AND (most important!) give id ref, which is referenced here var parent_frame = document.getElementById("pic_frame");
 <div id="pic_frame"><img alt="Product 1" src="images/prod1.jpg" width="272" height="326" /><img alt="Product 2" src="images/prod2.jpg" width="272" height="326" /><img alt="Product 3" src="images/prod3.jpg" width="272" height="326" /></div> 

Hi dsonesuk,Could you please try to Explain Again in a Different and More Easier Way?1. How should I create FUNCTIONS (prev() and next()) for calling upon when previous and next buttons are clicked?2. Where / How should I check the Value is between 0 and img_total -1?3. You mean, I should ADD ALL the Images Underneath This?<div><img alt="Product 1" src="images/prod1.jpg" width="272" height="326" /></div>4. You mean, I should give ID reference in the Container?5. When you said - "which is referenced here var parent_frame = document.getElementById("pic_frame");", I understood what you mean by that.
Link to comment
Share on other sites

Do you know how to create a function in Javascript? If not, go to the tutorials for the basics for that. You need to create 2 functions that will run they click on the 2 buttons. The current_img variable should be global so that both functions can access the same value in it. Each function checks the value to verify that it's in the correct range, if it overflows then it needs to be reset to either the first or last image based on which direction they want to go. And yes, he's suggesting that you add all images to a container with an ID that you can reference in the Javascript functions to show or hide.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...