Автоматически вызывать Twitter bootstrap-modal.js для <img> тег

Question

У Fancybox есть функция, где он добавляет класс fancybox для каждого изображения на странице, используя что-то вроде этого jQuery(thumbnails).addClass("fancybox").attr("rel","fancybox").getTitle();.

Я хотел бы сделать что-то подобное с Twitter Bootstrap Modal для тегов <img>, так что мне не нужно делать звонок для каждого изображения. По сути, я хочу использовать bootstrap-modal.js в качестве встроенного средства просмотра изображений, например, Lightbox/Fancybox.

Я нашел это: http://blueimp.github.com/Bootstrap-Image-Gallery/, но демонстрация показывает, что вам нужно сделать звонок для каждого изображения.

Как бы я это сделал?

Answer 1

Я использовал attr путем присоединения rel=gallery к изображениям в пределах a href тега:

$('a > img').parent().attr('rel', 'gallery'); 

работает как шарм!

Answer 2

Вы можете использовать селектор элементов для изображений.

jQuery('img').modal();

Лучшее решение будет иметь родительский элемент или класс, который определяет, какие изображения (предположительно уменьшенные изображения), вы на самом деле хотите modalize.

<div id="thumbnails"> 
    <!-- all your images --> 
</div> 

Затем используйте селектор дочерних

jQuery('#thumbnails img').modal();

---

PS. Вы можете использовать $ вместо jQuery, если вы не пытаетесь избежать столкновений с библиотекой или именами.
jQuery('img').modal(); = $('img').modal();

Answer 3

Я нашел простой способ имитировать что-то вроде отн = «лайтбокс» в начальной загрузки с начальной загрузки модальный

первый я сделал модальное окно в нижней части страницы

<!--- modal for viewing image ---> 
<div class="modal hide fade in" id="full-image"> 
<div class="modal-header"> 
<a class="close" data-dismiss="modal">×</a> 
</div> 
<div class="modal-body"> 
<img name="pic" src="images/placeholder.jpg"> 
</div> 
</div> 

то в моем список миниатюр, которые я сделал это в связи уменьшенной (имена моих миниатюр и больших имена изображений выводятся из запроса)

<!--- change img src using javascript onclick ---> 
<a title="click to view" href="#full-image" data-toggle="modal" onClick="window.document.pic.src='images/big-image.jpg';"><img src="images/thumbnail.jpg" /></a> 

работает!: D ~ Меган

Answer 4

Использование Bootstrap 3 это, как мне удалось получить его работу без каких-либо дополнительных плагинов, используя только Bootstrap встроенный Modal component:

Добавить модальность в вашей HTML-страницы с <img> тег, который имеет пустой src так:

<!-- Photo Modal --> 
<div class="modal fade" id="photo-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 

       <img src="" /> 

    </div><!-- /.modal-dialog --> 
</div><!-- /.modal --> 

Теперь предположим, что у вас есть уменьшенные изображения внутри ссылки, как это:

<a class="thumbnail" data-imgpath="pathToImage" data-toggle="modal" href="#"> 
    <img alt="PhotoName" src="pathToImage"> 
</a> 

Используйте этот JQuery код, чтобы показать миниатюрное изображение в полном размере внутри модального:

$(function() 
{  
    $('a.thumbnail').click(function(e) 
    { 
     e.preventDefault(); 

     var imgPath = $(this).data('imgpath'); 

     $('#photo-modal img').attr('src', imgPath); 

     $("#photo-modal").modal('show'); 
    }); 

    $('img').on('click', function() 
    { 
     $("#photo-modal").modal('hide') 
    }); 
}); 

Добавить CSS для центрирования изображения внутри <div class="modal-dialog">:

#photo-modal .modal-dialog 
{ 
    text-align:center; 
    display:table; 
    padding: 0; 
    margin-top: 30px; 
} 

---

идея, взятая и адаптировано из palmerio - Modal images