Jump to content

help with changing screenshots

mpsn

By mpsn
in Javascript Help

Recommended Posts

mpsn Regular Member

mpsn

Posted
Posted

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.

Link to comment
https://forums.phpfreaks.com/topic/253463-help-with-changing-screenshots/
Share on other sites
mpsn Regular Member

mpsn

Posted
  • Author
Posted

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.

 

mpsn Regular Member

mpsn

Posted
  • Author
Posted

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.

Archived

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

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

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.