2

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

Twitter Bootstrapを使用していますが、サムネイルをクリックしてもフルサイズの画像に拡大できません。jQueryを使用してこれを手動で実装する必要がありますか、それともブーストラップはJSライブラリでこれをサポートしますか？

jQueryを使用する必要がある場合、誰かがドキュメントのどこにこれが記載されているかを教えてもらえますか？

ありがとうございました

4

3 に答える 3

6

はい、この機能を手動で実装する必要があります。

これに利用できるjQueryプラグインはたくさんあります。私はFancyboxとprettyPhotoが好きです。

このリンクはあなたを助けるかもしれません： あなたの今後のデザインのための15の素晴らしいjQueryライトボックスプラグイン

于 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>

ビューポートのスケールを設定し、BootstrapJSおよび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 に答える