Question

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

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

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

谢谢

Answer 1

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

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

此链接可以帮助您： 15 Stunning jQuery Lightbox Plug-ins for Your Upcoming Designs

Answer 2

这可以通过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>

Answer 3

仅仅因为我需要相同的东西而现有的答案并不令人满意：单独使用bootstrap有一个很好的方法。我有这个功能：

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>

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

扩展缩略图Twitter Bootstrap

3 个答案: