Javascript 将“下一步”和“上一步”按钮添加到Lightbox
我正在我的图片库页面上显示一些图像 在这个页面上,我使用jquery lightbox来显示图像 lightbox工作正常,但没有“下一步”和“上一步”按钮。 如何在这些页面上添加“下一页”和“上一页”按钮 有很多页面都有灯箱,所以我不想做重大更改。 有谁能建议我如何添加“下一步”和“上一步”按钮而不做任何更改 以下是我的aspx页面代码:Javascript 将“下一步”和“上一步”按钮添加到Lightbox,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在我的图片库页面上显示一些图像 在这个页面上,我使用jquery lightbox来显示图像 lightbox工作正常,但没有“下一步”和“上一步”按钮。 如何在这些页面上添加“下一页”和“上一页”按钮 有很多页面都有灯箱,所以我不想做重大更改。 有谁能建议我如何添加“下一步”和“上一步”按钮而不做任何更改 以下是我的aspx页面代码: <div class="row"> <div class="col-xs-12 col-md-3"> <
<div class="row">
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="9.jpg" alt="..." class="styleforimg"/>
</a>
</div>
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="10.jpg" alt="..." class="styleforimg"/>
</a>
</div>
<div class="col-xs-12 col-md-3">
<a href="#" class="thumbnail" data-toggle="modal" data-target="#lightbox">
<img src="11.jpg" alt="..." class="styleforimg"/>
</a>
</div>
</div>
<div id="lightbox" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog">
<button type="button" class="close hidden" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-content">
<div class="modal-body">
<img src="<%= ResolveUrl("~") %>Images/logo.png" alt="" />
</div>
</div>
</div>
</div>
你试过什么吗?您使用了什么lightbox?不,我没有尝试添加这些按钮。代码显示供您参考,我使用jquery lightbox选中此项。这可能会对您有所帮助不,我不想再做太多更改您正在使用引导模式来显示图像。为什么你不能使用一个专门为此而建的图书馆?喜欢
$(document).ready(function () {
var $lightbox = $('#lightbox');
$('[data-target="#lightbox"]').on('click', function (event) {
var $img = $(this).find('img'),
src = $img.attr('src'),
alt = $img.attr('alt'),
css = {
'maxWidth': $(window).width() - 100,
'maxHeight': $(window).height() - 100
};
$lightbox.find('.close').addClass('hidden');
$lightbox.find('img').attr('src', src);
$lightbox.find('img').attr('alt', alt);
$lightbox.find('img').css(css);
});
$lightbox.on('shown.bs.modal', function (e) {
var $img = $lightbox.find('img');
$lightbox.find('.modal-dialog').css({ 'width': $img.width() });
$lightbox.find('.close').removeClass('hidden');
});
});