Twitter bootstrap-modal для изображений

Question

У меня есть страница, которая содержит сведения о зарегистрированных пользователях. Каждая таблица html включает пользователей 80-90. Для каждого пользователя есть переменная $ username. Обычно я показываю свои фотографии в таблице, как показано ниже.

print "<a href=\"small-avatar-$username.jpg\" target=\"_blank\"> 
<img src=\"big-avatar-$username.jpg\"> 
</a>"; 

Но пользователь может открывать изображения на новой вкладке. Я хочу показать большие аватары легко. Мой первый выбор был lightbox-jquery. Но поскольку я использую twitter-bootstrap на моем сайте, я решил использовать функции загрузки и jquery по умолчанию.

Я видел, что есть «bootstrap-модалы». Когда пользователь нажимает ссылку, я не планирую показывать что-либо большее, чем большая картинка.

Я попытался это:

print "<a href=\"#$username" data-toggle=\"modal\" class=\"img-modal\" > 
     <img src=\"small-avatar-$username.jpg\" ></a>"; 
print '</td>'; 

.

print "<div id=\"$username\" class=\"modal\">"; 
     <img src=\"big-avatar-$username.jpg\"> 
print "</div>"; 

.

<script type="text/javascript" id="js"> 
     $('#username').modal(); 
</script> 

Я полагаю, положить $('#username').modal();
для каждого пользователя на моей странице будет сделать HTML-файл огромно.

Но тогда я попробовал назвать имя класса якоря следующим образом: $('.img-modal').modal();
Но это не сработало.

Что вы посоветрите в этой ситуации?

Answer 1

Я бы рекомендовал вам использовать HTML5 Custom Data Attributes в вашем теге <a>, чтобы определить имя пользователя и оставить свой класс img-modal.

"<a href="#myModal" data-username='".$username."' class="img-modal">... 

Trigger вызов модального по щелчку на .img покадрово (вам не нужны данные рычажками = «модальный»)

$('.img-modal').click(function(event) { 

Вы можете получить значение имени пользователя по используя

var username = $(this).attr('data-username') 

Поскольку у вас есть имя пользователя, вы можете заменить src свойства вашего <img> тега в вашем уникальном модальном что-то вроде.

$("#img-in-modal").attr("src","big-avatar-" + username + ".jpg") 

и открыть модальное

$('#myModal').modal('show') 

И, наконец, убедитесь, что бутстраповские-modal.js или boostrap.js включен.