如何解决模态窗口中照片的顺序
我是初学者Web开发人员。 我为我的网站编写了迷你灯箱广告。 我在项目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">×</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>
我无法放大照片。 通过单击位于猫头鹰传送带上的图片来完成模态放大。缩放效果很好。问题是,当我单击猫头鹰的第三个图像时,模态显示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">×</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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。