0

I have made an image gallery with Bootstrap, with modal function. I added 'prev' and 'next' buttons to the modal, to show the previous/next image, but they don't work. I think I got stuck in selecting the 'src' of the previous/next button.

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');
    });
Nora
  • 1

0 Answers0