擴展縮略圖Twitter Bootstrap

Question

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

我一直在使用Twitter Bootstrap，但是單擊縮略圖時我無法將縮略圖擴展為全尺寸圖像。 我必須使用jQuery手動實現此功能還是boostrap在其JS庫中支持此功能？

如果我必須使用jQuery，有人可以指出我在他們的文檔中可能提到的地方嗎？

謝謝

Answer 1

是的，您必須手動實現此功能。

有很多可用的jQuery插件。 我喜歡Fancybox和prettyPhoto 。

此鏈接可以幫助您： 15個令人驚嘆的jQuery Lightbox插件，適合您即將推出的設計

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>

這會在同一頁面上的模型框中創建一個淡入淡出。