Add back and forward functionalities in slideshow

Question

I made a slideshow with php and javascript and it slides the images just fine , but i'm a bit stuck at the back and forward functionalities and i would be grateful if you could help me a bit here.This is what i've done so far:

PHP:

$dir = 'images/slideshow';
$images = scandir($dir);
$i = 0;

echo '<div id="slideshow-wrapper">';    
echo '<div id="slideshow-beta">';

foreach($images as $img){
    if ($img != '.' && $img != '..') {
        $i++;
        echo '<img src="../images/slideshow/'.$img.'" class="img_'.$i.'">';
    }
}

echo '</div>';
echo '<div id="slideshow-controller">'; 
echo '<div class="left-arrow-div"><span class="left-arrow"  onclick="SlideShow(-1);"></span></div>';
echo '<div class="right-arrow-div"><span class="right-arrow"  onclick="SlideShow(1);"></span></div>';
echo '</div>';
echo '</div>';

Javascript:

var i=1;
var begin=true;
function SlideShow(x){
    if(x==-1){
        i--;
    }else if(x==1){
        i++;
    }
    var total=$('#slideshow-beta img').length;

        for(var j=1;j<=total;j++){
            if($('.img_'+j).css('display')!='none'){
                begin=false;
                break;
            }else{
                begin=true;
            }
        }

        if(i>total){
            i=1;
            $('.img_'+total).fadeOut(1000,function(){
                $('.img_'+i).fadeIn(1000);
            });
        }else if(begin){
            $('.img_'+i).show();

        }else if(!begin){

            $('.img_'+(i-1)).fadeOut(1000,function(){
                $('.img_'+i).fadeIn(1000);
            });
        }

        setTimeout(function(){
            i++;            
            SlideShow(x);
        },5000);

}

HTML:

<body onload="SlideShow(false);">

As you can see i tried to make an onclick event to change the 'i' value on run , though the value is changed , the image is not . Maybe because pressing back/forward calls another instance of the function instead of overwriting it.I don't know for sure , i'm lost on this one.

Here's a fiddle

if you share your code in jsfiddle without php, problem will fix quickly — Sherali Turdiyev, Sep 10 '15 at 12:47
@CerlinBoss , the css is not so important , every functionality is made with js . — Petru Lebada, Sep 10 '15 at 13:01
i am trying to create a fiddle with the provided information and its incomplete without css :) — Cerlin, Sep 10 '15 at 13:03
@CerlinBoss , oh thanks a lot , but i already work on a fiddle ... — Petru Lebada, Sep 10 '15 at 13:06
@PetruLebada : Updated [FIDDLE](https://jsfiddle.net/Cerlin/Lroatbzg/2/) — Cerlin, Sep 10 '15 at 13:19
@CerlinBoss , thanks cerlin, i've added few things,now it's complete https://jsfiddle.net/Lroatbzg/7/ — Petru Lebada, Sep 10 '15 at 13:24

score 7 · Accepted Answer · answered Sep 14 '15 at 08:48

I've made a major overhaul, but the idea stays the same (fiddle):

Changes to CSS:

.left-arrow, .right-arrow {
    cursor: pointer;
    /** display: none **/
}

#slideshow-controller {
    z-index: 2;
    position: absolute;
    /** added **/
    opacity: 0;
    transition: opacity 300ms ease-in;
    /***********/
}
#slideshow-wrapper:hover > #slideshow-controller {
    opacity: 1;
}

Changes to HTML (removed inline onClick):

<div class="left-arrow-div"><span class="left-arrow">Back</span>

</div>
<div class="right-arrow-div"><span class="right-arrow">Forward</span>

</div>

Javascript:

var i = 0;
var images = $('#slideshow-beta img'); // cache all images
var total = images.length;
var timeout;

/*** hide all images at the start ***/
images.each(function (index) {
    $(this).css({
        display: 'none'
    });
});

/*** bind event handlers to arrows ***/
$('.left-arrow').click(function () {
    SlideShow(-1);
});

$('.right-arrow').click(function () {
    SlideShow(1);
});

/*** Start the slideshow on 1st image ***/
SlideShow(0);


function SlideShow(x) {
    if (isNaN(x)) { // throw error if x is not a number
        throw new Error("x must be a number");
    }

    clearTimeout(timeout); // clear previous timeout if any to prevent multiple timeouts running

    var current = (total + i + x % total) % total; // get the current image index

    $(images[i]).fadeOut(1000, function () { // fade out the previous
        $(images[current]).fadeIn(1000); // fade in the current
    });

    i = current; // set i to be the current

    timeout = setTimeout(function () { // cache the timeout identifier so we can clean it
        SlideShow(1);
    }, 5000);

}

awesome alghoritm, ' (total + i + x % total) % total ' , is the key to what i'm looking for , thanks a lot — Petru Lebada, Sep 14 '15 at 12:00

score 4 · Answer 2 · answered Sep 14 '15 at 08:07

I have fixed your problems - the main problem was that you call the function inline - but the function doesn't exist at this moment (the milliseconds in pageload). The other one was your if (now with 3 = that includes the type - because false, 0, -1 and so on are "the same". The only problem now is that the interval runs infinitely and can call the next image instantly after a manual change.

In conclusion I recommend you to use a library like cycle2 or anything like this.

https://jsfiddle.net/Lroatbzg/15/

jQuery(window).on('load', function() {
    $("#slideshow-wrapper").hover(function(){
       $(".left-arrow,.right-arrow").fadeIn();
    }, function(){
         $(".left-arrow,.right-arrow").fadeOut();
    });
    var i=1;
    var total = $('#slideshow-beta img').length;
    function SlideShow(x) {
        if(x === -1) {
            i--;
        } else if(x === 1) {
            i++;
        }

        if(i > total) {
            i = 1;
        }

        $('#slideshow-beta img').hide();
        $('#slideshow-beta .img_' + i).fadeIn(1000);
    }

    setInterval(function() {
        i++;
        SlideShow(i);
    }, 5000);

    jQuery('.left-arrow-div').on('click', function() {
        SlideShow(-1);
    });

    jQuery('.right-arrow-div').on('click', function() {
        SlideShow(1);
    });

    SlideShow(false);
});

thanks for your answer,but i don't want to use any library , this code is written by me entirely , and i wan't to keep it that way , though i need some help here... — Petru Lebada, Sep 14 '15 at 08:31
Then I recommend you to write an object, possibly a jQuery extension, and add there functions like: "SlideShow.next()" and handle everything in this object and don't let anyone change your internal things. — Gummibeer, Sep 14 '15 at 08:49

score 0 · Answer 3 · answered Sep 14 '15 at 07:25

0

Your fiddle throws a ReferenceError: SlideShow is not defined (Firefox using Firebug).

Try replacing function SlideShow(x){...} with SlideShow = function (x) {...} (https://jsfiddle.net/Lroatbzg/12/).

Honestly I don't know why the latter works, as those two statements are equivalent to me (any explanation on that?).

Declaring your function the other way around gets rid of the error - at least in my browser.

answered Sep 14 '15 at 07:25

PinkTurtle

6,942
3
25
44

until now no one complained about a issue like this , neither i have this error – Petru Lebada Sep 14 '15 at 07:41
Is your code throwing an error or your click events just don't do anything ? Are you using a debugger (like firebug) ? – PinkTurtle Sep 14 '15 at 08:50
my code is working fine , there is no error , i just need some help to make some functionalities , re read the question please – Petru Lebada Sep 14 '15 at 09:44

score 0 · Answer 4 · answered Sep 16 '15 at 10:01

0

use

if(x=='-1'){
    i--;
}else if(x=='1'){
    i++;
}

instead of

if(x==-1){
    i--;
}else if(x==1){
    i++;
}

answered Sep 16 '15 at 10:01

DaveG · Answer 5 · 2015-09-14T08:04:35.403

The problem is that the setTimeOut will execute the function SlideShow delayed. However, when you click a button, this delayed execution is not stopped. To stop this execution, I made a small change to the code. Furthermore, I solved the ReferenceError in jsfiddle by launching the onClick-functionality through jQuery.

This result can be checked here: https://jsfiddle.net/Lroatbzg/13/

$("#slideshow-wrapper").hover(function(){
   $(".left-arrow,.right-arrow").fadeIn();
}, function(){
     $(".left-arrow,.right-arrow").fadeOut();
});
    var i=1;
var direction=1;
var begin=true;
var latest=Math.random();
function SlideShow(parameter){
    if(latest!=parameter)
        return;  //Return when this function is not called through the last click or timeout.
    var total=$('#slideshow-beta img').length;
    i=i+direction;
    if(i>total)
        i=1;
    if(i<1)
        i=total;
    begin=true;
    for(var j=1;j<=total;j++)
    {
        if($('.img_'+j).css('display')!='none')
        {
            begin=false;
            $('.img_'+total).fadeOut(1000,function(){
                $('.img_'+j).css('display','none');
                $('.img_'+i).fadeIn(1000);
            });
            break;
        }
    }
    if(begin)
        $('.img_'+i).show();
    setTimeout(function(){
        SlideShow(parameter);
    },5000);
}
SlideShow(latest);
$("#left").click(function(){ latest=Math.random(); direction=-1; SlideShow(latest); });
$("#right").click(function(){ latest=Math.random(); direction=1; SlideShow(latest); });

The HTML is changed as follows:

<div id="slideshow-controller"> 
    <div class="left-arrow-div" id="left"><span class="left-arrow">Back</span></div>
    <div class="right-arrow-div" id="right"><span class="right-arrow">Forward</span></div>
</div>

Add back and forward functionalities in slideshow

5 Answers5