Как заставить работать предыдущую и следующую кнопки в модальной фотогалерее - PullRequest
Новая
       24

Как заставить работать предыдущую и следующую кнопки в модальной фотогалерее

0 голосов
/ 28 апреля 2019

Я сделал галерею изображений с Bootstrap, с модальной функцией.Я добавил кнопки «предыдущий» и «следующий» к модальному, чтобы показать предыдущее / следующее изображение, но они не работают.Я думаю, что застрял в выборе 'src' предыдущей / следующей кнопки.

HTML: 

//image gallery
<div class="gallery justify-content-center">
    <div class="img">
        <img src="images/vink.jpg" alt="Appelvink">
    </div>
    <div class="img">
        <img src="images/eekhoorn.jpg" alt="Eekhoorn">
    </div>
    <div class="img">
        <img src="images/pimpelmees.jpg" alt="Pimpelmees">
    </div>
</div>

//modal
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <img src="" class="imagepreview" alt="" style="width:100%;" >  
            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>                     
            </a>                        
        </div>
    </div>
</div>

jQuery 

//prev button
    $('.carousel-control-prev').on('click', function() {
        $('#imagemodal').modal('hide');
        var src = $(this).siblings('img').attr('src'); //current image
        var srcprev = $(this).parent('#imagemodal').siblings('.gallery').find("img[src='"+src+"']").prev('img').attr('src'); //prev image
        $('.imagepreview').attr('src', srcprev);
        $('#imagemodal').modal('show');
    });

//next button   
    $('.carousel-control-next').on('click', function() {
        $('#imagemodal').modal('hide');
        var src = $(this).siblings('img').attr('src'); //current image
        var srcnext = $(this).parent('#imagemodal').siblings('.gallery').find("img[src='"+src+"']").next('img').attr('src'); //next image
        $('.imagepreview').attr('src', srcnext);
        $('#imagemodal').modal('show');
    });
...