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?
Du musst angemeldet sein, um einen Kommentar abzugeben.
Ich würde Ihnen empfehlen, eine HTML5 Benutzerdefinierte Daten-Attribute in Ihrem
<a>
- tag zu identifizieren, die Benutzername und halten Sie Ihreimg-modal
Klasse.Trigger-Aufruf modal auf klicken Sie auf .img-modal (Sie brauchen nicht die data-toggle="modal")
Können Sie den Wert der username-mithilfe
Da haben Sie den Benutzernamen ein, den Sie ersetzen können, die
src
Eigentum Ihrer<img>
tag in Ihrem einzigartigen modal mit etwas wie.Öffnen und Ihre modalen
Und schließlich, stellen Sie sicher, bootstrap-modal.js oder boostrap.js ist im Lieferumfang enthalten.
$(this).data('username')
.