ブートストラップモーダルのクリックでsrc値を取得する

Question

イメージの値をsrcにして、JQueryをブートストラップモーダルに渡して表示させようとしています。私の問題は、私はこれを得る方法がないことです。src値、いくつかのjavascriptを作ろうとしましたが、正しく動作しないと思います。助けてください。ここで

は私の画像です：

<img class="img-thumbnail" src="" data-def-dd="pic" id="pic" name="pic"> 

ブートストラップモーダル：

<div id="img_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <img class="img-thumbnail" src="" data-onload="loadImage()" 
       data-def-dd="photo" id="photo_modal" name="photo"> 
     </div> 
    </div> 
</div> 

そして最後のjavascript：

var src = $(this).attr('src'); 
console.log(src); 

function loadImage(){ 
    $('#photo_modal').attr('src', src); 
} 

Answer 1

はあなたのソースを取得する必要があり、本質的に、これを試してみてくださいimgをモーダルの ""に挿入します。

最初に、取得しやすくするためにソースを取得するイメージのIDを指定し、複数のイメージがクラスに関連付けられていないことを確認する必要があります。

<img id="img-thumbnail" class="img-thumbnail" src="" data-def-dd="pic" id="pic" name="pic"> 

第二に、関数は次のように調整する必要があります。

function loadImage(){ 
    // get the src of the image 
    var image_src = $("#img-thumbnail").attr('src'); 

    // assign it to the modal's body 
    $("#photo_modal").attr('src',image_src); 
} 

第二に、あなたはこのコードを実行することができ、ページのロード時：

オプション1：

jQuery(document).ready(function($){ 
    loadImage(); 
}); 

オプション2：

モーダルがロードされたときに関数を実行することができます。ロードする必要があるので、ラグが存在する可能性があります。

$('#img_modal').on('show.bs.modal', function (event) { 

    loadImage(); 
}); 

希望します。

Answer 2

画像#picをクリックすると、そのソースが画像#photo_modalのソースとして追加されます。

$('#pic').on('click', function() { 
    $('#photo_modal').attr('src', $(this).attr('src')); 
}); 

Answer 3

あなたが行うことができます任意の画像のソースを取得する必要がある場合：

$('img').on('click', function(){ 
    var imageSource = $(this).attr('src') 
}) 

Answer 4

は、例えばclicked-img-srcによって識別された入力hiddenを追加し、img上のユーザーのクリックを処理し、取得するためにclickイベントを定義.attr('src')を使ってクリックした画像からsrc属性は、入力中に格納します。

<input type="hidden" id='clicked-img-src'/> 

$('body').on('click', 'img', function(){ 
    var img_source = $(this).attr('src'); 
    $('#clicked-img-src').val(img_source); 
}) 

次にonloadに呼び出されたときloadImage()関数は、入力からsrcを得る：

function loadImage(){ 
    $('#photo_modal').attr('src', $('#clicked-img-src').val()); 
} 

・ホープ、このことができます。

Answer 5

ここにアイデアがあります。あなたは、サムネイル用の小さな画像やモーダルのための大きな第2 1を追加できるようにJSFiddle

HTML

<img class="thumbnail mini-thumb" src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" /> 

<img class="thumbnail mini-thumb" src="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" width="200" data-def-dd="pic" id="pic" name="pic" data-bigpic="http://www.planwallpaper.com/static/images/Winter-Tiger-Wild-Cat-Images.jpg" /> 

<div id="img_modal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <img class="img-thumbnail" src="" id="photo_modal" name="photo"> 
     </div> 
    </div> 
</div> 

• は、私は、データbigpic使用しました。

• クラスは関数がデータbigpic値を取得するjQueryの関数の機能

---

のJavascript（jQueryの）

$(document).ready(function(){ 
    loadPreviews(); 

}); 

function loadPreviews(){ 
    $(".mini-thumb").on('click', function(){ 
     console.log("Img url " + $(this).data('bigpic')); 
     $("#photo_modal").attr("src", $(this).data('bigpic')); 
     $("#img_modal").modal("show"); 
    }); 
} 

• を再利用するために添加しましたモーダル画像に追加します。

- EDIT_ 画像のsrcを使用して同じですが、fiddleです。

これは私の意見ですが、私はajaxを使ってモーダルコンテンツをリロードする方が良いかもしれないと信じています。これを行うと、ページにはミニサムをロードするだけで済みます。次に、データの大きいイメージ値を使用して、サーバーが返すデータを読み込みます。たくさんの画像を持っていると助けになるかもしれません。