Link auf Bild in Modal Box öffnen

Hallo liebes Forum, wir möchten auf der Artikeldetailseite (lichtshop.de) von einem Bild (Energiepfeil) auf das Energielabel (Bild 200 x 400 Pixel) verlinken. Aktuell öffnet sich das Energielabel in einem neuen Tab. Das soll sich nun in der Modal Box öffnen. Wie kann das am besten (einfachsten) gelöst werden? Vielen Dank für jede Unterstützung…

Oh das ist ein bischen komplizierter… Das habe ich vor kurzem auch gemacht. Eigentlich sollte es reichen einen Link in ein umschließendes div zu packen wobei das umschließende div die Klasse modal_open bekommt. Bei Bildern funktioniert das allerdings nicht. Quick-Fix könnte so aussehen: [code]

A++
[/code] und dann die jquery.shopware.js ergänzen nach $('.modal\_open a').click(function (event) { event.preventDefault(); $.post(this.href, function (data) { $.modal(data, '', { 'position': 'fixed' }).find('.close').remove(); }); }); das hier einfügen: $('.modalPic\_open a').click(function (event) { event.preventDefault(); $.post(this.href, function (data) { $.modal(' ![](' + document.getElementById()', '', { 'position': 'fixed' }).find('.close').remove(); }); }); So ist das natürlich nicht updatesicher! Darum muss man sich jetzt noch kümmern!

1 „Gefällt mir“

Hallo! Ich wollte den Beitrag noch einmal nach oben setzen, ich komme nicht so recht weiter das updatesicher einzubauen. Ob ich das direkt im Plugin mitgebe oder das über ein eigenes jQuery Plugin registriere - die $.modal Funktion kennt er beim Aufruf nicht, die kommt wohl aus shopware.js und ist nicht in den anderen verfügbar. Gibt es noch eine Idee/einen Ansatz sich an dem Teil aufzuschließen? Schöne Grüße, Niklas

Wenn du dein Plugin korrekt lädst, dann kannst du das modal so öffnen: $.modal.open( content, { title: title, width: 100, height: 100 } ); Siehe zb http://www.blubbertuning.de/ oben rechts Klick auf die Weltkarte. Viele Grüße

1 „Gefällt mir“

Ah, klasse - Danke dir! Ein schönes Wochenende, Niklas

Wie würde das denn in html aussehen? Z.B. für Einkaufswelten? Wenn ich hier ein Bild in einer Größeren x habe und es aber vergrößert in Größe y im modal dargestellt haben möchte bei klick aufs Bild? Oder ist eine andere Funktion sinnvoller?

HI, nachdem ich nun den Tipp von hier befolgt habe: Modalbox in Einkaufswelten funktiniert data-modalbox=“true” auch korrekt in den html-Elementen der Einkaufwelt. Jedoch bei: [code]


[/code] Nur “local” führt dazu, dass das Bild geladen wird, ansonsten wird die ganze Seite in der Modalbox geladen. Wird das Bild geöffnet in einer Modalbox, verschwindet das Bild aus der Einkaufswelt. Es wird dort ausgeblendet. Hat jemand eine Idee warum es verschwindet? Mein Ziel ist es ein kleines Bild in der Einkaufwelt, groß in einer Modalbox anzuzeigen.

Hat mich nicht losgelassen läuft jetzt: [code]


[/code] Jetzt nur noch schön machen.