模式中的照片顺序 windows

Question

我是初级网络开发人员。我为我的网站写迷你灯箱。我在我的项目中使用js，jQuery和owl，Bootstrap 4

我有这个代码：

<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,

    });
});

工作正常。

我的模态：

<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>

我在放大照片时遇到问题。通过单击 owl-carousel 中的图片可以放大模态。缩放效果很好。问题是，当我点击 owl 上的第三张图片时 - 模态显示 1 张图片，而不是被点击的图片。

我该如何解决？

请帮帮我。

Answer 1

请试试这个，

使用replaceWith()替换相应的元素而不是追加。

$(".img-portfolio").each(function (i, el) {) 此函数在 img-portfolio.

的每个 click() 中更改并调用

$(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>

模式中的照片顺序 windows

The order of photos in modal windows

javascript

jquery

css

owl-carousel