Search code examples
javascriptjquerycssowl-carousel

The order of photos in modal windows

I am beginner webdeveloper. I write mini Lightbox for my website. I use in my project js, jQuery and owl, Bootstrap 4

I have this code:

<section>
        <div class="container">
            <div id="portfolio-carousel" class="owl-carousel project-gallery">
                <img src="{{ asset('assets/project1-small.jpg') }}" data-id="{{ asset('assets/project1.jpg') }}" class="img-portfolio img-fluid" alt="project "/>
                <img src="{{ asset('assets/project2-small.jpg') }}" data-id="{{ asset('assets/project2.jpg') }}" class="img-portfolio img-fluid" alt="project "/>
                <img src="{{ asset('assets/project3-small.jpg') }}" data-id="{{ asset('assets/project3.jpg') }}" class="img-portfolio img-fluid" alt="project "/>
                <img src="{{ asset('assets/project4-small.jpg') }}" data-id="{{ asset('assets/project4.jpg') }}" class="img-portfolio img-fluid" alt="project "/>
                <img src="{{ asset('assets/project5-small.jpg') }}" data-id="{{ asset('assets/project5.jpg') }}" class="img-portfolio img-fluid" alt="project "/>
                <img src="{{ asset('assets/project6-small.jpg') }}" data-id="{{ asset('assets/project6.jpg') }}" class="img-portfolio img-fluid" alt="project "/>
                <img src="{{ asset('assets/project7-small.jpg') }}" data-id="{{ asset('assets/project7.jpg') }}" class="img-portfolio img-fluid" alt="project "/>
                <img src="{{ asset('assets/project8-small.jpg') }}" data-id="{{ asset('assets/project8.jpg') }}" class="img-portfolio img-fluid" alt="project "/>
                <img src="{{ asset('assets/project9-small.jpg') }}" data-id="{{ asset('assets/project9.jpg') }}" class="img-portfolio img-fluid" alt="project "/>
                <img src="{{ asset('assets/project10-small.jpg') }}" data-id="{{ asset('assets/project10.jpg') }}" class="img-portfolio img-fluid" alt="project "/>
                <img src="{{ asset('assets/project11-small.jpg') }}" data-id="{{ asset('assets/project11.jpg') }}" class="img-portfolio img-fluid" alt="project "/>
            </div>
        </div>
    </section>



    $(window).on('load', function () {
    $('#portfolio-carousel').owlCarousel({
        loop: true,
        margin: 10,
        responsiveClass: true,
        autoplay: 3000,
        autoPlaySpeed: 3000,
        autoPlayTimeout: 3000,
        items: 4,
        autoplayHoverPause: true,
        nav: true,
        navText: ["<div class='nav-btn prev-slide'></div>", "<div class='nav-btn next-slide'></div>"],

        responsive: {
            0: {
                items: 1,
            },
            600: {
                items: 2,
            },
            1000: {
                items: 3,
            },
            1400: {
                items: 4,
            }
        }
    })


    $(".img-portfolio").each(function (i, el) {
        var img = $(this).attr("data-id");
        var active = "";
        if (i === 0) {
            active = " active ";
        }

        $(".carousel-inner").append(
            '<div class="carousel-item ' + active + ' "><img class="d-block w-100 px-3 photo" src="' +
            img + '"></div>');
    });

    $( ".img-portfolio" ).on( "click", function() {
        $('#myProjectImg').modal('show');
    });

    $('.carousel').carousel({
        interval: 3000,
        keyboard: true,
        pause: false,

    });
});

It's work fine.

My modal:

<div class="modal show" id="myProjectImg" role="dialog">
        <div class="modal-dialog modal-full-width">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner px-5"></div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

I'm having trouble zooming in on photos. Zooming in modal is done by clicking on the picture located in the owl-carousel. Zooming works fine. The problem is that when I click on the 3rd image on the owl - the modal displays 1 image, not the one that was clicked on.

How can I fix it?

Please help me.

Solution

  • Please try this instead,

    Use replaceWith() to replace corresponding element instead of append.

    $(".img-portfolio").each(function (i, el) {) this function changed and called in every click() of img-portfolio.

    $(window).on('load', function () {
    $('#portfolio-carousel').owlCarousel({
        loop: true,
        margin: 10,
        responsiveClass: true,
        autoplay: 3000,
        autoPlaySpeed: 3000,
        autoPlayTimeout: 3000,
        items: 4,
        autoplayHoverPause: true,
        nav: true,
      
        responsive: {
            0: {
                items: 1,
            },
            600: {
                items: 2,
            },
            1000: {
                items: 3,
            },
            1400: {
                items: 4,
            }
        }
    })
    $( ".img-portfolio" ).on( "click", function(e) {
      var img = $(this).attr("src");
        var active = "";
        var i=0;
        if (i === 0) {
            active = " active ";
        }
        $(".carousel-inner").replaceWith('<div class="carousel-inner px-5"><div class="carousel-item ' + active + ' "><img class="d-block w-100 px-3 photo" src="' +
            img + '"></div></div>');
            var a = $(".carousel-inner div");
        $('#myProjectImg').modal('show');
        
    });

    $('.carousel').carousel({
        interval: 3000,
        keyboard: true,
        pause: false,

    });
});
    .owl-prev {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 30%;
    margin-left: -20px;
    display: block !important;
    border:1px solid black !important;
}

.owl-next {
    width: 15px;
    height: 100px;
    position: absolute;
    top: 30%;
    right: -25px;
    display: block !important;
    border:1px solid black !important;
}
.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;}
.nav-btn.prev-slide,.nav-btn.next-slide{
  background:#111 !important;
  color:#111 !important
}
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
<style>
.owl-carousel button.owl-dot {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid #111 !important;
  margin: 0 5px !important;
  padding: 3px !important;
  border-radius:10px;
  display:inline-block;
}
.owl-dots{
  margin:0 auto;
  text-align:center;
}
.owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev,{
  background: #111 !important;
}
</style>
<section>
        <div class="container">
            <div id="portfolio-carousel" class="owl-carousel project-gallery">
                <img src="https://www.gstatic.com/webp/gallery/4.sm.jpg" class="img-portfolio img-fluid" alt="project "/>
                <img src="https://www.gstatic.com/webp/gallery3/1_webp_ll.sm.png" class="img-portfolio img-fluid" alt="project "/>
                <img src="https://www.gstatic.com/webp/gallery3/2.sm.png" class="img-portfolio img-fluid" alt="project "/>
                <img src="https://www.gstatic.com/webp/gallery3/3_webp_ll.sm.png" class="img-portfolio img-fluid" alt="project "/>
                <img src="https://www.gstatic.com/webp/gallery3/5.sm.png" class="img-portfolio img-fluid" alt="project "/>
                <img src="https://www.gstatic.com/webp/gallery3/4.sm.png" class="img-portfolio img-fluid" alt="project "/>
                <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" class="img-portfolio img-fluid" alt="project "/>
                <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" class="img-portfolio img-fluid" alt="project "/>
                <img src="https://www.gstatic.com/webp/gallery/3.sm.jpg" class="img-portfolio img-fluid" alt="project "/>
                <img src="https://www.gstatic.com/webp/gallery/5.sm.jpg" class="img-portfolio img-fluid" alt="project "/>
                <img src="https://www.gstatic.com/webp/gallery/2.sm.jpg" class="img-portfolio img-fluid" alt="project "/>
            </div>
        </div>
    </section>
    <div class="modal show" id="myProjectImg" role="dialog">
        <div class="modal-dialog modal-full-width">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                        <div class="carousel-inner px-5"></div>
                        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="false"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>