Bir bootrap modal için bir tıklamada src değerini alma

Question

JQuery'li bir görüntünün src değerini, onu görüntülemek için bir önyükleme modalına aktarmak için çalışıyorum. Benim sorunum, bu src değerini nasıl elde edeceğimi değil, biraz javascript yapmayı denedim ama sanırım düzgün çalışmıyor. Herhangi bir yardım lütfen. İşte

benim görüntü bu:

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

Ve nihayet javascript:

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

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

Answer 1

bu deneyin, esasen sen kaynağını almak gerekir Boostrap modal

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

img ve modalın "" içine sokun; İlk olarak, daha kolay almak için kaynak almak istediğiniz görüntüye bir kimlik vermeli ve aynı zamanda 1'den fazla görüntünün bir sınıfla ilişkilendirilmediğinden emin olmalısınız.

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

İkincisi, fonksiyon aşağıdaki gibi ayarlanmalıdır:

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

İkincisi, bu kodu yürütebilirsiniz sayfa yüklendiğinde:

Seçenek 1:

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

Seçenek 2:

Modal yüklendiğinde işlevi çalıştırabilirsiniz, yüklenmesi gereken bir gecikme olabilir.

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

    loadImage(); 
}); 

Bu yardımcı olur umarım.

Answer 2

Resmi tıkladığınızda, #pic görüntünün kaynağına resim #photo_modal olarak eklenecektir.

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

Answer 3

herhangi görüntünün kaynağını almak gerekirse yapabilirsiniz:

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

Answer 4

clicked-img-src örneğin belirlenen bir giriş hidden ekleyin ve img kullanıcı tıklayın işlemek için click olayı tanımlamak ve almak .attr('src') kullanılarak tıklandığında görüntüden src nitelik sonra giriş saklamak:

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

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

Sonra onload denilen loadImage() fonksiyon girişten src olsun: Bu yardımcı olur

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

Umut.

Answer 5

İşte bir fikir.Eğer küçük resim için küçük resim eklemek ve ikinci büyük modal için bir böylece

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

• JSFiddle

  HTML Veri-bigpic kullandı.

• A sınıfı jquery fonksiyonunun özelliğe

---

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

• işlevi veri-bigpic değeri alır yeniden ilave edildi ve modal resme ekler.

--EDIT-- Burada aynı fiddle ama görüntüden src kullanıyor.

Bu sadece benim görüşüm ama ajax kullanarak modal içerikleri tekrar daha iyi olabilir inanıyoruz. Bunu yaparsanız, sayfanızın yalnızca mini başparmaklarını yüklemesi gerekir. Daha sonra veri-bigimage değerini kullanarak sunucunuzun döndürdüğü verileri yüklersiniz. Eğer görüntülere sen #photo_model için src eklemek istediğiniz olay günü