Twitter bootstrap-modal für Bilder

Ich habe eine Seite, die beinhaltet die details der registrierten Benutzer.
Jede html-Tabelle enthält 80-90 Benutzer.
Für jeden Benutzer gibt es ein $username-variable.
Ich in der Regel zeigen Ihre Bilder in einer Tabelle wie der folgenden Codes.

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

Aber der Benutzer kann die Bilder öffnen in einem neuen tab. Ich möchte zeigen große Avatare einfach.
Meine erste Wahl war lightbox-jquery. Aber da ich mit twitter-bootstrap in meine Website, habe ich beschlossen, verwenden Sie die Standard-bootstrap-und jquery-Funktionen.

Sah ich, dass es "bootstrap-modals". Wenn Benutzer klickt auf link, ich nicht planen, um zu zeigen, mehr zu sein, als ich das große Bild.

Habe ich versucht, dieses:

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>

Ich nehme an, putting $('#username').modal();

für jeden Benutzer, der auf meiner Seite wird die HTML-Datei riesig.

Aber dann versuchte ich Klasse name der Anker wie diese: $('.img-modal').modal();

Aber das hat nicht funktioniert.

Was empfehlen Sie in dieser situation?

InformationsquelleAutor trante | 2012-04-28
Schreibe einen Kommentar