1

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/但演示显示您必须为每张图片进行调用。

我该怎么做呢？

4

4 回答 4

2

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

在您的 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 获取和改编的想法 -模态图像

于 2013-10-10T15:16:50.313 回答
1

我找到了一种简单的方法来在引导模式中模仿类似 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 ~梅根

于 2013-02-09T22:08:14.850 回答
0

我 attr通过附加rel=gallery到a href标签内的图像来使用：

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

奇迹般有效！

于 2012-04-24T23:31:34.147 回答
-1

您可以只对图像使用元素选择器。

jQuery('img').modal();

更好的解决方案是有一个父元素或类来标识您实际想要模态化的图像（可能是缩略图）。

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

然后使用子选择器

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

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

于 2012-04-21T16:02:04.017 回答