如何解决如何在Bootstrap灯箱图库中添加导航?
这是情况。我有一个Boostrap灯箱,但是,我正在尝试为其添加导航。
这是我当前的代码:
图片库:
<div class="row">
<?PHP
foreach ($mainPics as $pics) ?>
<div class="col-xs-6 ">
<a> <img class="thumbnail" src="imagefile" > </a>
</div>
<?PHP } ?>
</div>
JavaScript:
$(document).ready(function(){
$('a.lightBox').click(function() {
var title = $(this).attr('title');
var src = $(this).children('img').attr("src").replace('/240/140/','/480/280/');
var alt = $(this).children('img').attr("alt") || "";
var $img = $('<img class="center-block img-responsive" alt="' + alt + '" src="' + src + '">');
$('.modal-title').html(title);
$('.modal-body').html('<p>Loading...</p>');
$('#lightBox').modal({
show: true
});
$img.load(function() {
$('.modal-body').html($img);
})
});
});
CSS:
.lightBox .thumbnail{margin: 1em auto; height: fit-content;}
我的模态:
<div tabindex="-1" class="modal fade" id="lightBox" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
<h3 class="modal-title">heading</h3>
</div>
<div class="modal-body text-center">
</div>
<div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
任何帮助都会很棒。
谢谢, 凯文
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。