İçindekilerdeki bir görüntü ile nasıl bir model oluşturabilirim ve modelin bağlantısı resmin kendisidir (daha küçük bir sürümde))

Question

Bir resmi tıklatırsanız küçük resim galerisinde bir resim göstermek istiyorum. bir modelde daha büyük görünecektir.

Modelin bağlantısını görüntü olarak tutarsam, üst sağ veya sol üstte, sağ üst köşedeki yakın işaret dışında bir şey göstermez.

Bootstrap kullanıyorum. Ayrıca, modal bölümü açmak için img etiketini <a> etiketine değiştirip değiştiremeyeceğimi bilmek istiyorum. Lütfen yardım et. İşte

kodudur:

<div class="col-lg-3 col-md-4 col-xs-6 thumb"> 
     <img id="image-modal" class="img-responsive img-rounded" src="<?php echo base_url();?>img/Desert.jpg" data-target="#myModal" data-toggle="modal" alt=""> 
     <div class="modal fade" id="myModal" role="dialog"> 
      <div class="modal-dialog"> 
       <!-- Modal content--> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
         <h4 class="modal-title">Modal Header</h4> 
        </div> 
        <div class="modal-body"> 
         <img class="img-responsive" src="<?php echo base_url();?>img/Desert.jpg" alt=""> 
        </div> 
        <div class="modal-footer"> 
         <p>This is footer</p> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 

Answer 1

Yalnızca Bootstrap ile yapabilirsiniz, ancak bu yapmak istediğiniz ne için yardımcı olur gibi görünüyor budur: https://blueimp.github.io/Bootstrap-Image-Gallery/

Bu dava için tam olarak birkaç web sitesinde kullanıyorum. Bu Bootstrap-Image-Gallery eklentisini kullanmanıza yardımcı olacak

Answer 2

. Demo'u kontrol edin.

Komut modal

Answer 3

Kullanım modal event listener ve görüntüyü aktarmak

$(document).ready(function() { 
    $('#myModal').on('show.bs.modal', function (e) { 
     var img = $(e.relatedTarget).attr('src'); // get image 
     $('#showimg').attr('src' , img); //load image in modal 
    }); 
}); 

<div class="modal-body"> 
    <img class="img-responsive" src="" alt="" id="showimg"> 
</div> 

Fiddle with <img> tag

Evet siz de yapabilirsiniz Modal Gövde resim etiketi <img> için id="showimg" eklemek 012 ileetiketi

<a> etiketi

<a class="btn btn-primary btn-xs" href="imagepath" data-target="#myModal" data-toggle="modal">Open Image</a> 

ve olay dinleyici komut olacak

$(document).ready(function() { 
    $('#myModal').on('show.bs.modal', function (e) { 
     var img = $(e.relatedTarget).attr('href'); // get image with <a> tag 
     $('#showimg').attr('src' , img); //load image in modal 
    }); 
}); 

Fiddle with <a> tag