Начальная загрузка Twitter -модальный режим для изображений

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

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

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

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

Я попробовал это:

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();
Но это не сработало.

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