Tutorial :Help please. make the manual slideshow repeatable?


Any one help please the webpage is:


How can I make it repeatable, I mean when I click the next button on the last photo, it can go to the first one again.

have asked before, but still couldn't solve. could someone help please.

Many thanks!!!


Simply change the false to true. displaymode: {type:'manual', pause:2500, cycles:0, wraparound:false}.


Neo's answer in your original question was correct:

you can either set the number of cycles in displaymode: {type:'auto', pause:2500, cycles:[here], wraparound:false}, you should also try changing persist: true as it will remember the last viewed slide and recall it.

Viewing your current page, you don't have his changes implemented. Try making these changes, post your current code and provide feedback with the results. If you leave them in place, we can review and try and help. My guess, you have a syntax error (as in your previous question as well).

Also: you shouldn't have removed the 'duplicates' tag that was added, this question is clearly a duplicate of your previous question.


Let try this script I hope it can help you more.

<script language="javascript">      var imageShow = document.getElementById("imageShow"),          imageIndex = 0,          isSlidePlay = false,          img = document.createElement("img"),          opacity = 0,          buttonPlay = document.getElementById("btnPlay"),          buttonPrevious = document.getElementById("btnPrevious"),          buttonNext = document.getElementById("btnNext"),          imgs = [              "images/1.jpg",              "images/2.jpg",              "images/3.jpg",              "images/4.jpg",              "images/5.jpg",              "images/6.jpg",              "images/7.jpg",              "images/8.jpg",              "images/9.jpg",              "images/10.jpg"          ];        img.src = imgs[imageIndex];      img.width = 300;      img.height = 400;      img.opacity = opacity;      imageShow.appendChild(img);        function fadeIn() {          img.style.opacity = opacity;           fadeInInterval = setInterval(              function() {                  opacity += 1;                  img.style.opacity = opacity/10;                  if (opacity/10 == 1) {                      fadeOut();                            clearInterval(fadeInInterval);                                        }              },              100          );      }        function fadeOut(){                   img.style.opacity = opacity;           fadeOutInterval = setInterval(              function() {                  opacity -= 1;                  img.style.opacity = opacity/10;                  if (opacity == 0) {                                       if (imageIndex >= imgs.length) imageIndex = 0;                      imageIndex++;                      img.src = imgs[imageIndex];                      fadeIn();                                             clearInterval(fadeOutInterval);                  }              },              100          );      }        buttonPlay.addEventListener("click",           function(){              if(!isSlidePlay){                  buttonPlay.value="||";                  fadeIn();                  isSlidePlay = true;                  buttonNext.disabled = true;              }              else {                  buttonPlay.value = "Play";                  isSlidePlay = false;                  buttonNext.disabled = false;                  clearInterval(fadeInInterval);                  clearInterval(fadeOutInterval);                  img.src = imgs[imageIndex];              }            },           false      );        buttonNext.addEventListener("click",              function(){                  buttonPrevious.disabled = false;                  imageIndex++;                  img.src = imgs[imageIndex];                  if (imageIndex >= imgs.length) buttonNext.disabled = true;              },          false      );        buttonPrevious.addEventListener("click",          function(){              buttonNext.disabled = false;              imageIndex--;              img.src = imgs[imageIndex];              if (imageIndex <= 0) buttonPrevious.disabled = true;          },          false      );  </script>  

Note: you can create button by yourself.


Just as a heads up your page is throwing a javascript error in your body tag's "onload" attribute when you call your javascript "load()" function. I would start by correcting that. Also IE8 has a great built in javascript debugger or you can get Firebug plugin for Firefox which does a great job too. Helps a lot when tracking down javascript errors.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »