Lightbox/ Fancybox für Eigene Seiten

Mind

Aktives Mitglied
6. Juni 2016
6
0
Hallo, ich glaub zwar dass das Thema schön öfters durchgekaut wurde, leider hab ich noch keine Lösung gefunden die tatsächlich funktioniert..
Ich möchte das die Bilder welche ich in "Eigene Seiten" einpflege anklicken können das sie gross werden , genau so wie bei den Artikelbildern.

Rantasten tue ich mich gerad an einen "jungfräulichen" aktuellen Version des JTL Shop 4. Ich bin quasi neu und bin Modified gewöhnt :)
Vielleicht gibts ein zwei Tipps...?

Besten Dank
 

Mind

Aktives Mitglied
6. Juni 2016
6
0
AW: Lightbox/ Fancybox für Eigene Seiten

Hm hat ich unter anderem auch gefunden und getestet, also quasi das Script über die header.tpl eingeladen mitzumachen und den Code in den WYSIWYG Editor rein. Nach dem speichern gegugt ob im Quelltext alles da ist, was auch passt. Problem dabei ist nun das der Link zwar da ist und auch das Bild angezeigt wird, aber eben ohne Lightbox und es kollidiert mit dem Slider, der ist dann weg... PS. Ich arbeite mit einem Childtemplates...
 

FPrüfer

Moderator
Mitarbeiter
19. Februar 2016
1.881
529
Halle
AW: Lightbox/ Fancybox für Eigene Seiten

Hallo,

muß es Lightbox/Fancybox sein? Warum nicht die Evo eigene Funktionalität? Dafür gebe es zwei Möglichkeiten. Variante 1 ist etwas einfacher und nutzt einfach den integrierten Popup-Mechanismus. Das ist aber eher geeignet um z.B. beim Klick auf einen Link das Bild anzuzeigen:
HTML:
<a class="popup-dep" href="#" id="MyPicture" title="My Picture"><img alt="My Preview Picture" src="HierDerPfadZumVorschaubildBild" /></a>
<div class="hidden" id="popupMyPicture"><img alt="My Picture" class="center-block" src="HierDerPfadZumBild" /></div>
Die zweite Variante benutzt das integrierte Photoswipe, welches auch zum Anzeigen der Artikelbilder benutzt wird. Hier bekommt man dann aber auch einen Bilderwechsel, Thumbnails, Smartphoneunterstützung etc. Das Ganze ist aber etwas aufwändiger im Markup.
HTML:
<div class="row product-primary">
    <div class="product-gallery col-sm-5">
        <div id="gallery" class="hidden">
            <a itemprop="image" href="HierDerPfadZumErstenBild" title="My First Picture">
                <img src="HierDerPfadZumErstenVorschauBild" alt="My First Preview Picture" data-list='{
                    "xs":{
                        "src":"HierDerPfadZumErstenThumbnail",
                        "size":{"width":40,"height":40},
                        "type":2,
                        "alt":"My First Thumbnail"
                        },
                    "sm":{
                        "src":"HierDerPfadZumErstenSMBild",
                        "size":{"width":130,"height":130},
                        "type":2,
                        "alt":"My First SM Picture"},
                    "md":{
                        "src":"HierDerPfadZumErstenMDBild",
                        "size":{"width":320,"height":320},
                        "type":2,
                        "alt":"My First MDPicture"
                    },
                    "lg":{
                        "src":"HierDerPfadZumErstenLargeBild",
                        "size":{"width":800,"height":800},
                        "type":2,
                        "alt":"My First Large Picture"
                    }
                }' /></a>
            <a itemprop="image" href="HierDerPfadZumZweitenBild" title="My Second Picture">
                <img src="HierDerPfadZumZweitenVorschauBild" alt="My First Second Picture" data-list='{
                    "xs":{
                        "src":"HierDerPfadZumZweitenThumbnail",
                        "size":{"width":40,"height":40},
                        "type":2,
                        "alt":"My Second Thumbnail"
                        },
                    "sm":{
                        "src":"HierDerPfadZumZweitenSMBild",
                        "size":{"width":130,"height":130},
                        "type":2,
                        "alt":"My Second SM Picture"},
                    "md":{
                        "src":"HierDerPfadZumZweitenMDBild",
                        "size":{"width":320,"height":320},
                        "type":2,
                        "alt":"My Second MDPicture"
                    },
                    "lg":{
                        "src":"HierDerPfadZumZweitenLargeBild",
                        "size":{"width":800,"height":800},
                        "type":2,
                        "alt":"My Second Large Picture"
                    }
                }' /></a>
        </div>
    </div>
    <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="pswp__bg"></div>
        <div class="pswp__scroll-wrap">
            <div class="pswp__container">
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
                <div class="pswp__item"></div>
            </div>
            <div class="pswp__ui pswp__ui--hidden">
                <div class="pswp__top-bar">
                    <div class="pswp__counter"></div>
                    <a class="pswp__button pswp__button--close" title="Close (Esc)"></a>
                    <a class="pswp__button pswp__button--share" title="Share"></a>
                    <a class="pswp__button pswp__button--fs" title="Toggle fullscreen"></a>
                    <a class="pswp__button pswp__button--zoom" title="Zoom in/out"></a>
                    <div class="pswp__preloader">
                        <div class="pswp__preloader__icn">
                            <div class="pswp__preloader__cut">
                                <div class="pswp__preloader__donut"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                    <div class="pswp__share-tooltip"></div>
                </div>
                <a class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
                </a>
                <a class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
                </a>
                <div class="pswp__caption">
                    <div class="pswp__caption__center"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Die Größenangaben sind Standardwerte und müssen ggfs. an die eigenen Einstellungen angepasst werden. Die SM- und MD- Angaben sind für die Unterstützung verschiedener Viewports, also Desktop, Smartphone, Tablet etc. notwendig.
 

Mind

Aktives Mitglied
6. Juni 2016
6
0
AW: Lightbox/ Fancybox für Eigene Seiten

Danke FPrüfer, die erste Variante passt, man kann da zwar (logischerweise) nicht die Bilder "durchklicken" aber es ist erstmal ein Kompromiss. Super Besten Dank dafür.

Aber :) es muss es doch trotzdem möglich sein, eine Lightbox oder ähnliches einzubauen. Hab das mit einer Thickbox probiert das klappte soweit, dass beim klicken alles dunkel wird und das Ladegif kommt... allerdings ist da Schluß... Gibt es hier nichts was man im JTL dafür ansprechen kann? Der Nivo bringt doch auch viel mit... ?!

Ich bin für jeden "Anstoß" dankbar.
 

Mind

Aktives Mitglied
6. Juni 2016
6
0
AW: Lightbox/ Fancybox für Eigene Seiten

Holzauge sei wachsam...! Der Vollständigkeit zuliebe, ich hab den Ansatz hier Lightbox für eigene Bilder im CMS nochmal in allerruhe durchgespielt... und siehe da geht doch (JTL Shop 4) Quasi gelöst. Danke nochmal ram1 und FPrüfer
 
Ähnliche Themen
Titel Forum Antworten Datum
Neu Wir suchen Mitstreiter für ein gemeinsames Konfigurator-Projekt Dienstleistung, Jobs und Ähnliches 0
Neu Wir suchen Mitstreiter für ein gemeinsames Konfigurator-Projekt User helfen Usern - Fragen zu JTL-Wawi 5
In Diskussion Workflow für Erinnerungen an bevorstehende Lieferungen JTL-Workflows - Ideen, Lob und Kritik 0
Neu Wie stelle ich Retouren in JTL für DPD ein? JTL-ShippingLabels - Ideen, Lob und Kritik 1
Neu JTL Shop Plugin - BD Automatisierter Widerruf (Von Händler für Händler - Schluss mit Mail-Chaos & Spam-Sorgen!) Plugins für JTL-Shop 0
Wroker macht keinen abgleich für Kaufland JTL-Wawi 2.0 8
Neu Beta-Tester gesucht: Produktdaten aus Artikelfotos schneller für JTL/CSV vorbereiten Dienstleistung, Jobs und Ähnliches 0
Neu Kundengruppeneinstellungen für Mindestabnahme und Abnahmeintervall löschen User helfen Usern - Fragen zu JTL-Wawi 0
Neu Installationsdatei für JTL‑Wawi 1.9.6.5 Installation von JTL-Wawi 2
Wie lange braucht ihr aktuell für die Anlage eines neuen Artikels? JTL-Wawi App 3
Neu kostenlos: DHL Sendungsverfolgung für JTL-Wawi – Web-Dashboard mit Frühwarnsystem Schnittstellen Import / Export 0
In Diskussion Tool für Abrechnung von Fulfillment Dienstleistungen Arbeitsabläufe im Fulfillment Network 0
Neu Widerrufsbutton für JTL-Shop 4 Allgemeine Fragen zu JTL-Shop 17
Neu Keine Labels für Warenpost international über Packtisch JTL-ShippingLabels - Fehler und Bugs 8
Neu Laut Backend Shop Update für Shop 5.71 - Download nicht zu finden? Betrieb / Pflege von JTL-Shop 3
Neu Meta Shop seit September 2025: JTL-Lösung für neue Checkout-URL gesucht Allgemeine Fragen zu JTL-Shop 0
Angebliche externe Aufträge "für Rechnungserstellung freigeben" und Rechnungen erstellen. Gibt es dazu eine akzeptable Erklärung von JTL? JTL-Wawi 1.11 1
Neu Artikelname & Beschreibung angepasst für jeweiligen Marktplatz Arbeitsabläufe in JTL-Wawi 1
Neu OnFinds: KI-Suche für JTL-Shop mit fairer Abrechnung nach Artikelanzahl. 30 Tage kostenlos testen Plugins für JTL-Shop 0
API 2.1 für OnPrem? JTL-Wawi 2.0 6
Neu Dummy-ID oder Freiposition für Angebot mit mehrzeiliger Beschreibung JTL-Wawi - Ideen, Lob und Kritik 7
Neu Neue Kennzeichnungspflicht für Elektrogeräte (Altgeräterücknahme) Betrieb / Pflege von JTL-Shop 4
Neu Freelancer für JTL-Wawi, Shop & Prozessautomatisierung Dienstleistung, Jobs und Ähnliches 2
Neu Exportgenehmigung / Ausfuhrgenehmigung automatisch für Auslandskunden als Aufpreis Allgemeine Fragen zu JTL-Shop 2
Für Ihren SQL-Server wurde ein Service Pack zur Verfügung gestellt - nö, gelogen, wie kriege ich die Meldung weg? JTL-Wawi 1.11 15
Neu Ab welcher JTL Wawi Version ist der OnPremise REST API Endpoint POST /v2/returns oder POST /v1/returns für Create Return verfügbar? Schnittstellen Import / Export 0
Neu Seller2Go – Mobile App & JTL-Plugin für Bestellungen, Support und Produktmanagement Plugins für JTL-Shop 0
Neu Neues Plugin: Erweiterter Widerrufsbutton für JTL-Shop Plugins für JTL-Shop 9
JTL-Worker 2.0 - Einrichtung als Dienst - Auffälligkeiten und Problemlösungen für manche JTL-Wawi 2.0 3
Neu Muss man für DHL Versenden 4.0 einen neuen Benutzer bei DHL anlegen? JTL-ShippingLabels - Ideen, Lob und Kritik 2
Neu Retourenetikett für Briefe kann unter Internetmarke 2.0 nicht erstellt werden JTL-ShippingLabels - Fehler und Bugs 5
Neu Neue Tracking-URL für DPD JTL-ShippingLabels - Fehler und Bugs 4
AboutYou keine Felder für GPSR Daten SCX-(Ninepoint)-Anbindungen 0
globale Angebotsvorlage anpassen für eBay Angebote "Artikelspezifisch" JTL-Wawi 1.11 0
Neu Connectorupdates für Shopware 6.7.7 bzw 6.7.8? Shopware-Connector 39
Neu Streichpreise oder Rabatte für Staffelpreise von einem Artikel einrichten? Wie am Besten? JTL-Wawi 1.6 0
Neu DRIGEND HILFE!!! Ebay Abgleich endet mit Arithmetischer Überlauffehler für tinyint-Datentyp, Wert = -1. Die Anweisung wurde beendet. eBay-Anbindung - Fehler und Bugs 4
Neu Stornobeleg für Verkauf ohne Rechnung User helfen Usern - Fragen zu JTL-Wawi 9
Neu Neuentwicklung - Helpdesk für JTL Wawi - Eure Ideen und Wünsche? User helfen Usern - Fragen zu JTL-Wawi 4
Kein changelog für 1.11.8 JTL-Wawi 1.11 29
Text Vorbereitung für WAWI import JTL-Wawi 1.11 3
gelöst: Für diesen User wurde zum angegebenen Mandanten keine Firma gefunden!! JTL-Wawi 1.10 13

Ähnliche Themen