1

Fancybox には、fancyboxこのようなものを使用して、ページ上の各画像のクラスを追加する機能がありますjQuery(thumbnails).addClass("fancybox").attr("rel","fancybox").getTitle();。

タグの Twitter Bootstrap Modal で同様の<img>ことを行い、すべての画像を呼び出す必要がないようにしたいと考えています。bootstrap-modal.js基本的に、Lightbox/Fancybox のようなインライン イメージ ビューアとして使用したいと考えています。

http://blueimp.github.com/Bootstrap-Image-Gallery/を見つけましたが、デモでは、すべての画像に対して呼び出しを行う必要があることが示されています。

どうすればこれを行うことができますか？

4

4 に答える 4

2

Bootstrap 3を使用すると、Bootstrap の組み込みModal コンポーネントだけを使用して、追加のプラグインなしで動作させることができました。

次のような<img>空のタグを使用して、HTML ページにモーダルを追加します。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;
}

パルメリオから取られて適応されたアイデア -モーダル画像

于 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=gallerya 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 に答える