Help please. make the manual slideshow repeatable?

Question

Any one help please the webpage is:

http://weblink.computersforpeople.info/users/1/properties/518/images/2869

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!!!

Answer 1

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.

Also: when someone provides you with a correct answer, you should mark the answer as correct (this affects your accept rate).

Answer 2

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.

Answer 3

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

Answer 4

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.