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

Question

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

Navigation

#1 by (1 votes)

2

I wanted to do a fadein / out slideShow (#overlayFancy, it only appears when we click on a '.wrapperExtraImg', fancybox plugin style), the code so far works great but now I wanted it to go to the next (#right being #left is 'prev'), and if there is not another one for the first one, the number of images (.wrapperExtraImg) is not fixed so it can have 1 to 300 images. So far I have 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
});

jquery slide

asked by anonymous 02.09.2014 / 11:40

1 answer

Client-Side Validation (Jquery) conditional attribute SQL Server 2008 Express Remote Connection

score 1 · Accepted Answer

Use the data attribute to store data, the path and image names contain characters not allowed for the id attribute. 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 at JSFiddle