[英]Adding next and prev buttons to jQuery image gallery
我已经使用 jQuery 制作了一个图片库(点击图片,它会在屏幕上显得很大)。 因此,我想添加一个“下一个”和“上一个”按钮来从视图切换,基本上是在单击时将图像荧光笔中的 src 属性替换为下一个或上一个图像。 但这似乎不起作用。
<div class="row">
<div class="col-md-2 col-sm-6 test-padding">
<img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-1.jpg" class="img-padding img-highlight" style="width: 100%;"/>
</div>
<div class="col-md-2 col-sm-6 test-padding">
<img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-2.jpg" class="img-padding img-highlight" style="width: 100%;"/>
</div>
<div class="col-md-2 col-sm-6 test-padding">
<img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/bg-flower-3.jpg" class="img-padding img-highlight" style="width: 100%;"/>
</div>
<div class="col-md-2 col-sm-6 test-padding">
<img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/hand-rose55.jpg" class="img-padding img-highlight" style="width: 100%;"/>
</div>
<div class="col-md-2 col-sm-6 test-padding">
<img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/ROSE-BLACK.jpg" class="img-padding img-highlight" style="width: 100%;"/>
</div>
<div class="col-md-2 col-sm-6 test-padding">
<img src="http://www.truestorytattoo.nl/wp-content/uploads/2019/12/rose-blgr.jpg" class="img-padding img-highlight" style="width: 100%;"/>
</div>
</div>
<div class="photo-size">
<a href="#" class="close">CLOSE</a>
<div class="image-viewer"></div>
<a href="#" class="next">NEXT</a>
<a href="#" class="prev">PREV</a>
</div>
我什至不确定next
函数是否处于覆盖数据的正确位置:
$( document ).ready(function() {
$('.img-highlight').click(function () {
const el = $(".photo-size");
el.css("display", "block");
var src = $(this).attr('src');
const block = $(".image-viewer");
$(this).clone().appendTo(block).attr('src', src).addClass('highlighted-img');
$('.next').click(function(ev){
ev.preventDefault();
var src = $(this).parent().next().find('img').attr('src');
alert(src);
});
});
$('.close').click(function (ev) {
ev.preventDefault();
$('.image-viewer').empty()
$(".photo-size").css("display", "none");
});
});
这个怎么样? 我最终让上一个和下一个按钮工作。
[https://codepen.io/newschapmj1/pen/WNbZOYy][1]
$(document).ready(function () {
//newimg1 - temp copy of img1
var img1, newimg1;
const block = $(".image-viewer");
$('.img-highlight').click(function () {
const el = $(".photo-size");
el.css("display", "block");
//$('div.newgallery').empty(); //empty destination
img1 = $(this);
console.log('click img1', img1);
var src = $(this).attr('src');
$(this).clone().appendTo(block).attr('src', src).addClass('highlighted-img');
});
$('.next').click(function (ev) {
ev.preventDefault();
newimg1 = $(img1).parent().next().children();
if (newimg1.length > 0) {
// image found
$(block.empty());
$(newimg1).clone().appendTo(block);
$(block).addClass('highlighted-img');
img1 = newimg1;
}
else {
//no image - so do nothing
}
});
$('.prev').click(function (ev) {
ev.preventDefault();
newimg1 = $(img1).parent().prev().children();
if (newimg1.length > 0) {
// image found
$(block.empty());
$(newimg1).clone().appendTo(block);
$(block).addClass('highlighted-img');
img1 = newimg1;
}
else {
//no image - so do nothing
}
});
$('.close').click(function (ev) {
ev.preventDefault();
$(block).removeClass('highlighted-img');
$(block.empty());
$(".photo-size").css("display", "none");
img1 = null;
newimg1 = null;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.