Im Bootstrap vergrößern Bild in Modal vergrößern

Question

Wie kann ich ein Bild in einem Modal mit jQuery / js und nicht datenattribute ein Bild verwenden?

jederzeit, wenn ein Benutzer ein Bild in einen Content Editor einfügt>.

Ich habe versucht: -

generasacodicetagpre.

open / enlarge

generasacodicetagpre.

Muss ich der JQuery Infos hinzufügen, um die Bildquelle zu übergeben, um im Modal zu erscheinen?

danke !!!

Answer 1

Sie können diesen Code ausprobieren, wenn Sie Bootstrap 3 verwenden:

html

generasacodicetagpre.

Javascript:

generasacodicetagpre.

Dies ist das Arbeiten fiddle . Hoffe das hilft :)

Answer 2

Ich habe es wenig ändern, kann aber immer noch nicht wenige Dinge tun.

Ich habe hinzugefügt, dass auf ihn klicken, es war einfach, aber sehr funktional.

generasacodicetagpre.

Ich brauche auch unter jedem Foto unterschiedliche Beschreibung.Ich habe in der Fußzeile beschrieben, nur um zu zeigen, was ich brauche. Es muss sich mit jedem Foto ändern.

html

generasacodicetagpre.

Javascript:

generasacodicetagpre.

Es wäre auch schön, wenn dieses Fenster nur auf 100% des Bildschirms geöffnet wird. Hier ist ein Bild innen mit der Beschreibung mehr als 100% und in werden scrollable ... Und wenn der Bildschirm in viel größerer als Bildern ist, wird es nur auf der Originalgröße aufhören.für ex.900 px und nicht größer in der Höhe.

http://jsfiddle.net/2ve4HBMM/

Answer 3

Dieses Plugin funktioniert gut für mich.

Bootstrap 3 Lightbox-Plugin

Answer 4

Ich weiß, dass Ihre Frage als Gattungsstätte getaggt wird (obwohl Sie den Bootstrap-Exfrist nicht nicht erwähnt haben), aber ich habe es geliebt, den einfachen Weg zu sehen w3.css gelöst dies und ich denke, es ist gut, es zu teilen.

generasacodicetagpre.

Ich lasse Sie einen Link zum W3school modales Bild Beispielum die Header zu sehen, um W3.CSS-Arbeit zu machen.

Answer 5

Ich habe also ein sehr raues Modal in jsfiddle zusammengestellt, damit Sie Hinweise von nehmen.

jsfiddle

generasacodicetagpre.

Der Teil, den Sie fehlen, ist das verborgene Modal, das Sie anzeigen möchten, wenn der Link angeklickt wird.Im Beispiel verwendete ich ein zweites Bild als Modal und fügte das Bootstap Klassen hinzu.

Answer 6

generasacodicetagpre.

Answer 7

css:

generasacodicetagpre.

Javascript:

generasacodicetagpre. generasacodicetagpre. generasacodicetagpre.