Порядок расположения фотографий в модальных окнах

ProgramBox

Порядок расположения фотографий в модальных окнах

Post author:admin
Запись опубликована:14 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #css #owl-carousel

#javascript #jquery — запрос #css #owl-карусель #jquery

Вопрос:

Я начинающий веб-разработчик. Я пишу мини-лайтбокс для своего сайта. Я использую в своем проекте 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">amp;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>

У меня возникли проблемы с увеличением масштаба фотографий.
Масштабирование в модальном режиме осуществляется нажатием на картинку, расположенную в совиной карусели. Масштабирование работает нормально. Проблема в том, что когда я нажимаю на 3-е изображение в owl — модальное отображает 1 изображение, а не то, на которое был нажат.

Как я могу это исправить?

Пожалуйста, помогите мне.

Ответ №1:

Пожалуйста, попробуйте это вместо,

Используйте replaceWith() для замены соответствующего элемента вместо добавления.

$(".img-portfolio").each(function (i, el) {) эта функция изменена и вызывается в каждом click() из 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">amp;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>

1. Пожалуйста, попробуйте это.

2. Это работает, но я обнаружил 2 проблемы: вы удаляете мои большие пальцы, и когда я показываю фотографию в лайтбоксе — я не могу нажать next / prwiev image (стрелка не работает)