jQuery slide, go to next element (number of elements is not fixed)

Question

I wanted to make a slideshow fadein/out (#overlayFancy, only appears when we click a '.wrapperExtraImg', fancybox plugin style), the code so far works very well but now I wanted it to be for next (#right, and #left is the 'Prev') and if there is no other come for the first, the number of images (.wrapperExtraImg) is not fixed either have 1 or 300 images. So far I’ve got this but I’m not sure what to do from here:

HTML:

<div id="overlayFancy">
   <div class="imgSlide">
      <div id="left"></div>
      <div id="right"></div>
   </div>
</div>

    .......

<div id="projectImgs"><?php
    foreach ($dataBase->selectAllFromAtable($dataBase->getDetails($idDetails)[0]->description) as $extraImg) { ?>
        <div id="<?php echo 'admin/' .$extraImg->extra_image_path; ?>" class="wrapperExtraImg" style="background-image:url(<?php echo 'admin/' .$extraImg->extra_image_path; ?>)"></div>
    <?php } ?>
</div>

jQuery:

$(document).on('click', '.wrapperExtraImg' ,function(){
        var image = $(this).attr('id');

        $('#overlayFancy').stop().animate({
            "opacity":"1"
        }, 500);

        $('.imgSlide').append("<img src="+image+">");
        $('.imgSlide').width($('.imgSlide img').width());
});

$(document).on('click', '#overlayFancy' ,function(){

        $('#overlayFancy').stop().animate({
            "opacity":"0",
        }, 300);
        $('.imgSlide').children('img').remove();
    });

    $(document).on('click', '.imgSlide img, #left, #right', function (event) {
        event.stopPropagation(); // PARA QUE O SLIDE (#overlayFancy) NÃO DESAPAREÇA SE CLICARMOS NUM DESTES ELEMENTOS
});

Answer 1

Use the attribute data to store data, the path and name of the images contains characters not allowed for the attribute id. Seen this, you can do something like this:

HTML:

<div id="overlayFancy">
   <div class="imgSlide">
      <div id="prev"></div>
      <div id="next"></div>
   </div>
</div>

    .......

<div id="projectImgs"><?php
    foreach ($dataBase->selectAllFromAtable($dataBase->getDetails($idDetails)[0]->description) as $extraImg) { ?>
        <div data-image="<?php echo 'admin/' .$extraImg->extra_image_path; ?>" class="wrapperExtraImg" style="background-image:url(<?php echo 'admin/' .$extraImg->extra_image_path; ?>)"></div>
    <?php } ?>
</div>

jquery:

$(document).on('click', '.wrapperExtraImg', function () {
    $("#overlayFancy .imgSlide").append("<img src='" + $(this).data('image') + "' data-index='" + $(this).index() + "'>");
    $('#overlayFancy .imgSlide').width($('#overlayFancy .imgSlide img').width());
    $("#overlayFancy").stop().fadeIn(500);
});


$(document).on('click', '#overlayFancy img, #prev, #next', function (event) {
    event.stopPropagation();
});

$(document).on('click', '#overlayFancy', function () {
    $('#overlayFancy').stop().fadeOut(300, function () {
        $(this).find('img').remove();
    });
});

$(document).on('click', '#prev', function () {
    var index = $('#overlayFancy .imgSlide img').data('index');
    if (index == 0) index = $('.wrapperExtraImg').length;
    index--;
    $('#overlayFancy .imgSlide img').fadeOut(500, function () {
        $(this).data('index', index).attr('src', $('.wrapperExtraImg:eq(' + index + ')').data('image')).fadeIn(500);
    })
});

$(document).on('click', '#next', function () {
    var index = $('#overlayFancy .imgSlide img').data('index');
    index++;
    if (index == $('.wrapperExtraImg').length) index = 0;
    $('#overlayFancy .imgSlide img').fadeOut(500, function () {
        $(this).data('index', index).attr('src', $('.wrapperExtraImg:eq(' + index + ')').data('image')).fadeIn(500);
    })
});

See working on Jsfiddle