2

参考：http: //twitter.github.com/bootstrap/components.html#thumbnails

我一直在使用 Twitter Bootstrap，但是当我点击缩略图时，我无法将它们展开为全尺寸图像。我是否必须使用 jQuery 手动实现这个，或者 boostrap 在他们的 JS 库中支持这个？

如果我必须使用 jQuery，有人可以指出他们的文档中可能提到的地方吗？

谢谢你

4

3 回答 3

6

是的，您必须手动实现此功能。

有很多 jQuery 插件可用于此。我喜欢Fancybox和prettyPhoto。

此链接可能对您有所帮助： 15 个令人惊叹的 jQuery Lightbox 插件，适用于您即将推出的设计

于 2012-12-23T20:23:28.043 回答
1

这可以通过 Bootstrap 来完成。

像这样：

    <a href="images/content/dummy-image.jpg" class="thumbnail"><img src="images/content/dummy-image.jpg " alt='Dummy Image' /></a>

我设置了视口比例并确保也使用了您的 Bootstrap JS 和 CSS 链接：

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
于 2015-08-09T15:30:08.693 回答
0

仅仅因为我需要同样的东西并且现有的答案并不令人满意：单独使用引导程序有一个很好的方法。我有这个功能：

function image(id, img, text) {
        return text + "<div id='" + id + "' class='modal fade' tabindex='-1' role='dialog'>" 
             + "<div class='modal-dialog'><div class='modal-content'><div class='modal-body'>"
             + "<img src='" + img + "' class='img-responsive'></div></div></div></div>"
             + "<div class='col-xs-4 col-md-4 text-right'><a class='thumbnail' href='#' data-toggle='modal' data-target='#" + id + "'>"
             + "<img src='" + img + "'/></a></div>"
    }

这会产生这样的 HTML：

<div id="tea-live" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <img src="images/tea-live.png" class="img-responsive">
            </div>
        </div>
    </div>
</div>
<div class="col-xs-4 col-md-4 text-right">
    <a class="thumbnail" href="#" data-toggle="modal" data-target="#tea-live">
        <img src="images/tea-live.png">
    </a>
</div>

这会在同一页面上创建一个淡入淡出的模型框。

于 2017-08-11T08:20:36.767 回答