Ottenere il valore src con un clic per un modal bootrap

Question

Sto cercando di ottenere il valore src di un'immagine con JQuery per passarlo in un modal bootstrap per visualizzarlo. Il mio problema è che non so come ottenere questo valore src, ho provato a creare qualche javascript ma suppongo che non funzioni correttamente. Qualsiasi aiuto per favore.

Ecco la mia immagine:

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

Il modal bootstarp:

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

E infine la javascript:

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

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

Answer 1

Prova questa, in sostanza, è necessario per ottenere la fonte del img e inseriscilo nel modale "";

Innanzitutto, è necessario fornire un ID all'immagine da cui si desidera ottenere l'origine per semplificare il recupero e assicurarsi che più di 1 immagine non sia associata a una classe.

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

In secondo luogo, la funzione deve essere regolata come segue:

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); 
} 

In secondo luogo, è possibile eseguire il codice quando la pagina viene caricata:

Opzione 1:

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

Opzione 2:

È possibile eseguire la funzione quando è caricata la modale, potrebbe esserci un ritardo in quanto deve essere caricato.

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

    loadImage(); 
}); 

Spero che questo aiuti.

Answer 2

Quando si fa clic sull'immagine #pic, la sua origine verrà aggiunta come origine dell'immagine #photo_modal.

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

Answer 3

Se avete bisogno di ottenere la fonte di qualsiasi immagine che si può fare:

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

Answer 4

Aggiungi ad esempio un ingresso hidden identificato da clicked-img-src e definire click evento per gestire l'utente fa clic su img e ottenere l'attributo src dall'immagine cliccato utilizzando .attr('src') quindi memorizzare in ingresso:

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

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

Poi, quando la funzione loadImage() chiamato nella onload ottenere il src dall'input:

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

Spero che questo aiuti.

Answer 5

Ecco un'idea.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> 

• ho usato i dati-bigpic in modo che è possibile aggiungere una piccola immagine per la vostra miniatura e un secondo più grande per il modale.

• Una classe è stato aggiunto al riutilizzare la funzionalità della funzione 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"); 
    }); 
} 

• La funzione ottiene il valore dei dati-bigpic e lo aggiunge all'immagine modale.

--EDIT-- qui è la stessa fiddle ma usando lo src dall'immagine.

Questa è solo la mia opinione, ma credo che potrebbe essere meglio ricaricare il contenuto modale utilizzando ajax. Se lo fai, la tua pagina dovrà solo caricare i mini-pollici. Quindi, utilizzando il valore bigimage dei dati, si caricano i dati restituiti dal server. Potrebbe esserti utile se hai un sacco di immagini