微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

如何在Bootstrap灯箱图库中添加导航?

如何解决如何在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 举报,一经查实,本站将立刻删除。