mpsn Posted December 19, 2011 Share Posted December 19, 2011 Hi, I want the three images to cycle through each image when clicked, but for some reason, it only cycles once then stays on the second image. I know it's messy and not the most elegant way, but I haven't used much JavaScript so I'd like to keep my way of implementing this script. here is html: <!DOCTYPE HTML> <html> <head> <title>CSS trial</title> <link rel="stylesheet" type="text/css" href="css.css" /> <script type="text/javascript" src="js.js" ></script> </head> <body> <table style="background-color: #FFFF99;"> <tr> <td> <p><a href="javascript: togglePrograms('leftSide_a', 'leftSide', 'captionL');" id="leftSide_a">Left pix:click to expand</a></p> <img src="left_1.png" id="leftSide" style="display:none" onclick="changeScreenshot('leftSide')" > <p id='captionL' style="text-align:center;">left left left left</p> </img> </td> <td> <p><a href="javascript: togglePrograms('mid_a','mid','captionM');" id="mid_a">Middle pix:click to expand</a></p> <img src="mid_1.png" id="mid" style="display:none" onclick="changeScreenshot('mid')" > <p id='captionM' style="text-align:center;">mid mid mid mid</p> </img> </td> <td> <p><a href="javascript: togglePrograms('rightSide_a','rightSide','captionR');" id="rightSide_a">Right pix:click to expand</a></p> <img src="right_1.png" id="rightSide" style="display:none" onclick="changeScreenshot('rightSide')" > <p id='captionR' style="text-align:center;">right right right right</p> </img> </td> </tr> </table> </body> </html> here is the javaScript: var leftImgList = [ "left_1.png", "left_2.png" ]; var indexL = 0; var midImgList = [ "mid_1.png", "mid_2.png" ]; var indexM = 0; var rightImgList = [ "right_1.png", "right_2.png" ]; var indexR = 0; function changeScreenshot( projLabel ) { if ( projLabel == "leftSide" ) { if ( indexL < 2 ) { document.getElementById( "leftSide" ).src = leftImgList[ indexL + 1 ]; indxL+=1; } else if ( indexL == 2 ) { document.getElementById( "leftSide" ).src = leftImgList[ indexL - 2 ]; indexL = 0; } }//END left BIG IF if (projLabel == "mid") { if ( indexM < 2 ) { document.getElementById("mid").src = midImgList[ indexM + 1 ]; indxM+=1; } else if ( indexM == 2 ) { document.getElementById("mid").src = midImgList[ indexM - 2 ]; indexM = 0; } }//END middle BIG IF if (projLabel == "rightSide") { if ( indexR < 2 ) { document.getElementById( "rightSide" ).src = rightImgList[ indexR + 1 ]; indxR+=1; } else if ( indexR == 2 ) { document.getElementById( "rightSide" ).src = rightImgList[ indexR - 2 ]; indexR = 0; } }//END right BIG IF }//END FCN changeScreenshot //NB: hides or shows the selected screenshots of this program function togglePrograms ( nameId, imgId, captionId ) { var projName = document.getElementById( nameId ); var projScreenshots = document.getElementById( imgId ); var caption = document.getElementById( captionId ); if ( projScreenshots.style.display == "block" ) { projScreenshots.style.display = "none"; caption.style.display = "none"; if ( nameId == "leftSide_a" ) projName.innerHTML = "Left pix: Click to expand"; else if ( nameId == "mid_a" ) projName.innerHTML = "Middle pix:click to expand"; else if ( nameId == "rightSide_a" ) projName.innerHTML = "Right pix:click to expand"; } else { projScreenshots.style.display = "block"; caption.style.display = "block"; if ( nameId == "leftSide_a" ) projName.innerHTML = "Left pix: Click to collapse"; else if ( nameId == "mid_a" ) projName.innerHTML = "Middle pix:click to collapse"; else if ( nameId == "rightSide_a" ) projName.innerHTML = "Right pix:click to collapse"; } }//END togglePrograms FCN Any help appreciated. Quote Link to comment https://forums.phpfreaks.com/topic/253463-help-with-changing-screenshots/ Share on other sites More sharing options...
mpsn Posted December 19, 2011 Author Share Posted December 19, 2011 I hope someone can help me. Basically the user can click the Click to expand/collapse to toggle to hide or display each sets of images (all layed out side by side). And when clicking each img set, that causes a cycling through the images and once we reach last image, it cycles back to first. The problem: it toggles perfectly, but it only cycles once, then it stays on the last img rather than change/cycle back to the first. Any help appreciated. Quote Link to comment https://forums.phpfreaks.com/topic/253463-help-with-changing-screenshots/#findComment-1299449 Share on other sites More sharing options...
scootstah Posted December 19, 2011 Share Posted December 19, 2011 Have you considered using jQuery? You could do this in about 5 lines of Javascript. Quote Link to comment https://forums.phpfreaks.com/topic/253463-help-with-changing-screenshots/#findComment-1299492 Share on other sites More sharing options...
mpsn Posted December 19, 2011 Author Share Posted December 19, 2011 isn't it better to learn proper javascript first, you see i'm a student in last year and a lot of job requirements need javascript and jQuery, i believe for web development with client side scripting. But I guess I'll take a look at jQuery. Thanks. Quote Link to comment https://forums.phpfreaks.com/topic/253463-help-with-changing-screenshots/#findComment-1299495 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.