Twitter Bootstrap modale non la visualizzazione delle immagini a distanza

Question

sto usando Twitter finestra modale di bootstrap per caricare un'immagine remota

<a href="assets/500x300.gif" data-target="#image-preview" data-toggle="modal"><img alt="250x150" src="/assets/250x150.gif"></a> 

Sono following these docs

L'immagine non viene eseguito il rendering correttamente nel modale.

ottengo un carico di dati confusi, invece -

Cosa sta succedendo? Come posso risolvere?

Answer 1

Quando si utilizza href per specificare il contenuto remoto per un modale, Bootstrap utilizza il metodo di caricamento di jQuery per recuperare il contenuto, quindi inserisce il contenuto recuperato nell'elemento del corpo del modale. In breve, ha senso solo quando il contenuto remoto (il valore href) carica HTML o testo.

Quello che stai vedendo è previsto, in quanto è la stessa cosa che accadrebbe se si apre il file gif in un editor di testo, ed appena incollato un tag HTML.

Per farlo funzionare nel modo desiderato, l'href deve puntare a un documento HTML contenente un tag img > che fa riferimento all'immagine che si desidera nel modale.

Answer 2

Sì, ho avuto anche questo. La risposta che ho trovato è here.

ho creato un link come questo:

<a href="gallery/blue.jpg" class="thumbnail img_modal"> 

//handler for link 
$('.img_modal').on('click', function(e) { 
    e.preventDefault(); 
    $("#modal_img_target").attr("src", this); 
    $('#modal').modal('show'); 
}); 

//and modal code here 

<div id="modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3 id="myModalLabel">Title to go here</h3> 
    </div> 
    <div class="modal-body"> 
     <img id="modal_img_target"> 
    </div> 
    <div class="modal-footer"> 
     <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
</div> 

Answer 3

Nel posto di Mark Robson - cambiamento 'questo' a 'this.href':

$("#modal_img_target").attr("src", this);

=>

$("#modal_img_target").attr("src", this.href); 

(Non ho la reputazione per il commento)