如何为自定义“灯箱”编写“下一步”/“上一步”按钮
How to code next/previous buttons for a custom "lightbox"
我正在从头开始创建类似灯箱的功能。到目前为止，我有接管元素的工作和正确显示图像，但现在我想编码下一个/上一个按钮。我还希望按钮通过画廊循环(如果"previous"在第一张图片上点击，它加载最后一张图片，反之亦然)。
下面是显示我的图像缩略图的HTML:
<div id="gallery-wrapper">
<ul>
<li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
<li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
<li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
<li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
</ul>
</div>
当一个图像缩略图被点击时，灯箱生成并通过Javascript显示:
$(document).ready(function() {
$('.image').click(function(e) {
e.preventDefault();
$('body').width($('body').width());
$('body').css('overflow', 'hidden');
var image_href = $(this).attr("href");
if ($('#lightbox').length > 0) {
$('#content').html('<img src="' + image_href + '" />');
$('#lightbox').show();
}
else {
var lightbox =
'<div id="lightbox">' +
'<div id="content">' +
'<div class="close-gallery">Close<span>X</span></div>'+
'<div class="gallery-previous"></div>'+
'<img src="'+ image_href +'" />' +
'<div class="gallery-next"></div>'+
'</div>' +
'</div>';
$('body').append(lightbox);
}
});
$('body').on('click', '.close-gallery', function () {
$('body').removeAttr('style');
$('#lightbox').remove();
});
});
这是我到目前为止所尝试的。它只适用于当前选定图像之前或之后的同级图像:
$(document).ready(function($) {
$('.image').click(function(e) {
$(this).addClass('active');
e.preventDefault();
$('body').width($('body').width());
$('body').css('overflow', 'hidden');
var image_href = $(this).attr("href");
var prevImage = $('.active').parent().prev().find('a').attr("href");
var nextImage = $('.active').parent().next().find('a').attr("href");
console.log(prevImage, nextImage);
if ($('#lightbox').length > 0) {
$('#content').html('<img src="' + image_href + '" />');
$('#lightbox').show();
}
else {
var lightbox =
'<div id="lightbox">' +
'<div id="content">' +
'<div class="close-gallery">Close<span>X</span></div>'+
'<div class="gallery-previous" data-nav="'+ prevImage +'"></div>'+
'<img src="'+ image_href +'" />' +
'<div class="gallery-next" data-nav="'+ nextImage +'"></div>'+
'</div>' +
'</div>';
$('body').append(lightbox);
}
});
$('body').on('click', '.gallery-previous', function () {
var prev = $(this).data('nav');
console.log(prev);
$('#content').find('img').attr('src',prev);
});
$('body').on('click', '.gallery-next', function () {
var next = $(this).data('nav');
console.log(next);
$('#content').find('img').attr('src',next);
});
$('body').on('click', '.close-gallery', function () {
$('body').removeAttr('style');
$('#lightbox').remove();
});
});
我的想法是用下一个/上一个图像链接替换当前的灯箱图像src，但我很难弄清楚我将如何实际实现这一目标。任何帮助，非常感谢!
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js' id='jquery-core-js'></script>
<div id="gallery-wrapper">
<ul>
<li><a href="https://mb.cision.com/Public/12091/3216809/95a99f5c35185d28_org.png" class="cision_gallery_image"><img src="https://mb.cision.com/Public/12091/3216809/95a99f5c35185d28_org.png" alt="Image" /></a></li>
<li><a href="https://mb.cision.com/Public/12091/3216809/887b4860968192bd_org.png" class="cision_gallery_image"><img src="https://mb.cision.com/Public/12091/3216809/887b4860968192bd_org.png" alt="Image" /></a></li>
<li><a href="http://165.22.182.59/cision/wp-content/uploads/2021/11/3D-Visualisering.jpg" class="cision_gallery_image"><img src="http://165.22.182.59/cision/wp-content/uploads/2021/11/3D-Visualisering.jpg" alt="Image" /></a></li>
<li><a href="http://165.22.182.59/cision/wp-content/uploads/2021/11/S-Granstorp-1.jpg" class="cision_gallery_image"><img src="http://165.22.182.59/cision/wp-content/uploads/2021/11/S-Granstorp-1.jpg" alt="Image" /></a></li>
</ul>
</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
jQuery('body').removeAttr('style');
jQuery('#cision_lightbox_cs').remove();
}
};
jQuery('.cision_gallery_image').click(function(e) {
jQuery('.cision_gallery_image').removeClass("cision_active")
jQuery(this).addClass('cision_active');
e.preventDefault();
jQuery('body').width(jQuery('body').width());
jQuery('body').css('overflow', 'hidden');
var image_href = jQuery(this).attr("href");
var prevImage = jQuery('.cision_gallery_image.cision_active').parent().prev().find('a').attr("href");
var nextImage = jQuery('.cision_gallery_image.cision_active').parent().next().find('a').attr("href");
console.log(prevImage, nextImage);
if (jQuery('#cision_lightbox_cs').length > 0) {
jQuery('#cision_content').html('<img src="' + image_href + '" />');
jQuery('#cision_lightbox_cs').show();
}
else {
var cision_lightbox_cs =
'<div id="cision_lightbox_cs" style="display: block;">' +
'<div id="cision_content">' +
'<div class="close-gallery">Close<span>X</span></div>'+
'<div class="gallery-previous""><</div>'+
'<img src="'+ image_href +'" />' +
'<div class="gallery-next">></div>'+
'</div>' +
'</div>';
jQuery('body').append(cision_lightbox_cs);
}
});
jQuery('body').on('click', '.gallery-previous', function () {
var prev = jQuery('.cision_gallery_image.cision_active').parent().prev().find('a').attr("href");
if (prev) {
jQuery('.cision_gallery_image.cision_active').parent().prev().find('a').addClass("cision_active");
jQuery('.cision_gallery_image.cision_active').parent().next().find('a').removeClass("cision_active");
console.log(prev);
jQuery('#cision_content').find('img').attr('src',prev);
}
});
jQuery('body').on('click', '.gallery-next', function () {
var next = jQuery('.cision_gallery_image.cision_active').parent().next().find('a').attr("href");
if (next) {
jQuery('.cision_gallery_image.cision_active').parent().next().find('a').addClass("cision_active");
jQuery('.cision_gallery_image.cision_active').parent().prev().find('a').removeClass("cision_active");
console.log(next);
jQuery('#cision_content').find('img').attr('src',next);
}
});
jQuery('body').on('click', '.close-gallery', function () {
jQuery('body').removeAttr('style');
jQuery('#cision_lightbox_cs').remove();
});
});
</script>
<style type="text/css">
div#gallery-wrapper {}
div#gallery-wrapper ul li {
float: left;
width: 25%;
box-sizing: border-box;
padding: 20px;
}
div#gallery-wrapper ul li a.cision_gallery_image {
width: 100%;
}
div#gallery-wrapper ul li a.cision_gallery_image img {
width: 100%;
}
div#cision_lightbox_cs {
display: none;
position: fixed;
width: 100%;
height: 100vh;
z-index: 9999;
overflow-x: scroll;
background-color: rgb(124 121 121 / 50%);
}
div#cision_lightbox_cs div#cision_content {
position: absolute;
top: 50%;
left: 50%;
width: 60%;
height: 90vh;
transform: translateX(-50%) translateY(-50%);
padding-bottom: 50px;
padding-top: 50px;
}
div#cision_lightbox_cs div#cision_content img {
width: 100%;
padding-bottom: 30px;
}
</style>enter code here
相关文章：
- 如何使用Jquery一步一步地获取PHP数据
- 在谷歌应用程序脚本中，如何在满足条件的情况下只发送一次电子邮件
- 按下空格键一次后，Jquery功能不起作用
- 如何在没有 AJAX 的情况下调用上一页
- Javascript 中的第一个下一个/上一个子字符串位置
- jQuery下拉菜单一遍又一遍
- jQuery 下拉面板 - 一次只能打开一个面板
- 如何在不刷新 angularjs 的情况下返回上一页
- 一步一步地从java调用javascript
- 一步通过K个组合算法X步一次
- 链式转换不会一步一步触发
- Html5-javascript画布绘制一步一步
- 使用node.js一步一步创建自定义应用程序
- Javascript没有遵循一步一步的指令
- 创建一步一步点击通过HTML5/Javascript图形的教育工具
- 输出每一行被执行的javascript代码和/或一步一步地执行代码，无论在什么"进程"，计时器等代码
- Angular JS一步一步的验证是行不通的
- Angular JS和验证的一步一步
- 一步一步地浏览html表
- 正确的调用函数的方法“一步一步”
