<img>タグ

Question

のためにTwitterのbootstrap-modal.jsを自動的に呼び出します。Fancyboxには、jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox").getTitle();のようなものを使用してページ上の各画像にクラスfancyboxを追加する機能があります。

<img>タグのTwitter Bootstrap Modalと似たようなことをしたいので、それぞれの画像を呼び出す必要はありません。基本的には、Lightbox/Fancyboxのように、bootstrap-modal.jsをインライン画像ビューアとして使用したいと考えています。

私はこれを見つけました：http://blueimp.github.com/Bootstrap-Image-Gallery/しかし、デモでは、それぞれの画像ごとに電話をかける必要があります。

どうすればいいですか？

Answer 1

私はa hrefタグ内の画像にrel=galleryを取り付けてattrを使用しています魔法のように

$('a > img').parent().attr('rel', 'gallery'); 

作品！

Answer 2

イメージ用の要素セレクタを使用するだけで済みます。

jQuery('img').modal();

よりよい解決策は、あなたが実際にmodalizeしたい画像（おそらくサムネイル）を識別する親要素やクラスを持っているだろう。

<div id="thumbnails"> 
    <!-- all your images --> 
</div> 

そして、子セレクタ

jQuery('#thumbnails img').modal();

---

PSを使用しています。ライブラリまたは名前空間の衝突を避けようとしていない場合は、jQueryの代わりに$を使用できます。
jQuery('img').modal(); = $('img').modal();

Answer 3

私は私の中で、ページの下部にある

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

を私のモーダルウィンドウを作った最初のブートストラップモーダル

とブートストラップでのrel =「ライトボックス」のようなものを模倣する簡単な方法を見つけました私はサムネイルリンクでこれをやったサムネイルの一覧

<!--- 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〜ミーガン

Answer 4

これは、私はそれだけでブートストラップの内蔵Modal component使用して、任意の追加のプラグインなしで働いて得ることができた方法ですBootstrap 3を使用する：

あり<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') 
    }); 
}); 

<div class="modal-dialog">内の画像を中央に、このCSSを追加します。

#photo-modal .modal-dialog 
{ 
    text-align:center; 
    display:table; 
    padding: 0; 
    margin-top: 30px; 
} 

---

取らアイデアとパルメリオから適応されました - Modal images