Question

Fancybox有一项功能，可以使用类似fancybox之类的内容为页面上的每个图像添加jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox").getTitle();类。

我想对<img>标签的Twitter Bootstrap Modal做类似的事情，这样我就不必为每个图像打电话了。基本上，我想将bootstrap-modal.js用作内联图像查看器，如Lightbox / Fancybox。

我发现了这个：http://blueimp.github.com/Bootstrap-Image-Gallery/但演示显示你必须为每张图片打电话。

我将如何做到这一点？

Answer 1

使用 Bootstrap 3 这就是我在没有任何额外插件的情况下使用Bootstrap的内置Modal component设法让它工作的方式：

在HTML页面中添加一个模式，其中<img>标记为空src，如下所示：

<!-- Photo Modal -->
<div class="modal fade" id="photo-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">

               <img src="" />

    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

现在让我们说你的缩略图在这样的链接里面：

<a class="thumbnail" data-imgpath="pathToImage" data-toggle="modal" href="#">
    <img alt="PhotoName" src="pathToImage">
</a>

使用此jQuery代码在模式中显示完整大小的缩略图：

$(function()
{     
    $('a.thumbnail').click(function(e)
    {
        e.preventDefault();

        var imgPath = $(this).data('imgpath');

        $('#photo-modal img').attr('src', imgPath);

        $("#photo-modal").modal('show');
    });

    $('img').on('click', function()
    {
        $("#photo-modal").modal('hide')
    });
});

添加此CSS以使<div class="modal-dialog">内的图像居中：

#photo-modal .modal-dialog
{
    text-align:center;
    display:table;
    padding: 0;
    margin-top: 30px;
}

从palmerio采取并改编的想法 - Modal images

Answer 2

我找到了一种简单的方法来模仿boot = in bootstrap中的rel =“lightbox”之类的东西

首先我在页面底部制作了模态窗口

<!--- modal for viewing image  --->
<div class="modal hide fade in" id="full-image">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
</div>
<div class="modal-body">
<img name="pic" src="images/placeholder.jpg">
</div>
</div>

然后在我的缩略图列表中，我在缩略图链接中执行此操作（我的缩略图名称和大图像名称从查询中输出）

<!--- change img src using javascript onclick --->
<a title="click to view" href="#full-image" data-toggle="modal" onClick="window.document.pic.src='images/big-image.jpg';"><img src="images/thumbnail.jpg" /></a>

作品！：D~Megan

Answer 3

我通过将attr附加到rel=gallery代码中的图片来使用a href：

$('a > img').parent().attr('rel', 'gallery');

像魅力一样！

Answer 4

你可以只为图像使用元素选择器。

jQuery('img').modal();

更好的解决方案是使用父元素或类来标识您实际想要模拟的图像（可能是缩略图）。

<div id="thumbnails">
    <!-- all your images -->
</div>

然后使用子选择器

jQuery('#thumbnails img').modal();

<小时/> PS。如果您不想避免库或命名空间冲突，可以使用$代替jQuery。
jQuery('img').modal(); = $('img').modal();

自动为<img/>标签调用Twitter bootstrap-modal.js

4 个答案: