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
524
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 GPSR Plugin für Gambio Connector steht bereit Gambio-Connector 0
Neu JTL-Infoschreiben "Wichtige Neuerung im Postgesetz zur Kennzeichnungspflicht" - Umsetzung auch für Österreichische Post Labels ? JTL-ShippingLabels - Ideen, Lob und Kritik 0
Neu Benutzerdefinierte Klasse für Überschrift anlegen funktioniert nicht Templates für JTL-Shop 2
Kategoriebox Nummer für Unterkategorien JTL-Wawi 1.9 2
20 % USt wird für UK nicht ausgewiesen - was mache ich falsch JTL-Wawi 1.9 1
Neu Spezialist für Rechnungsformular-Anpassung benötigt Dienstleistung, Jobs und Ähnliches 1
Getrenntes Lager für den JTL shop JTL-Wawi 1.9 1
Neu Benutzer Authentifizierung für externe App/Shop Onlineshop-Anbindung 1
Sql Abfrage VK Preise pro Kundengruppe für Grafana JTL-Wawi 1.8 9
Neu List & Label - Eigene SQL-Abfrage als Grundlage für Tabelle im Berichtscontainer? User helfen Usern - Fragen zu JTL-Wawi 10
Schnittstelle für Zalando, Kaufland und Otto JTL-Wawi 1.9 5
Neu Die Kennzeichnungspflicht für schwere Pakete kommt am 1.1.2025 JTL-ShippingLabels - Ideen, Lob und Kritik 0
Neu Ausgabeweg => Beschreibungen werden nicht von JTL Wawi gezogen für Shop/ebay/sonst was User helfen Usern - Fragen zu JTL-Wawi 3
Neu SQL Vartable für Reservierte Artikel gesucht User helfen Usern - Fragen zu JTL-Wawi 2
Herstellername / Verantwortliche Person für die EU für Kaufland kaufland.de - Anbindung (SCX) 1
Neu Umfrage: Scanpflicht auf Artikelebene (Nur für bestimmte Artikel aktivieren/deaktivieren) JTL-WMS / JTL-Packtisch+ - Ideen, Lob und Kritik 0
Neu Workflow und Version für Vorhaben Starten mit JTL: Projektabwicklung & Migration 3
Neu Rabatt für Bundles Allgemeine Fragen zu JTL-Shop 2
Neu Suche Dienstleister für Rechnungsvorlage, MwSt Sätze User helfen Usern - Fragen zu JTL-Wawi 0
Provisionsabrechnung für Vertrieb JTL-Wawi 1.9 1
Beantwortet Kosten für Aufträge aus Shopware 5 Shopware-Connector 1
Neu Artikelbestände für Stücklistenartikel blockieren User helfen Usern - Fragen zu JTL-Wawi 2
Neu Attribute für EWR Pflichtangaben - otto.de User helfen Usern - Fragen zu JTL-Wawi 5
Neu Amazon Lister 2.0 Fehlercode: SLR402 Bild "1.jpg" für das Angebot mit SKU "xxxxx" auf Channel "AMAZONDEJTL" wurde nicht gefunden Amazon-Lister - Ideen, Lob und Kritik 0
Neu Variable für Zulaufdatum User helfen Usern - Fragen zu JTL-Wawi 1
Neu Wichtige Infos zu GPSR-Attributen für JTL-eazyAuction und kommende JTL-Wawi Version 1.9.6.0 Einrichtung und Installation von JTL-eazyAuction 116
Welche Einstellung für "Überverkäufe nicht mehr möglich" wenn "alle Lagerbestände null" sind. JTL-Wawi 1.9 5
Neu Preisdarstellung: keine „ab“-Preise mehr mit Staffelpreisen für Produkte ohne Variationen (JTL Shop 5.3.3) Allgemeine Fragen zu JTL-Shop 1
Attribute für EWR Pflichtangaben (ab 13.12.2024) auf den Marktplätzen otto.de & kaufland.de Otto.de - Anbindung (SCX) 8
Neu GTIN/EAN für mehrere Artikel verwenden Arbeitsabläufe in JTL-Wawi 2
Rabatt für einzelnen Kunden einrichten JTL-Wawi 1.9 2
Neu Artikeletikett für Kinderartikel drucken mit GTIN Barcode funktioniert nicht User helfen Usern - Fragen zu JTL-Wawi 12
Neu Vorlage für Angeboten Rechnungsbetrag ändern Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 1
Neu S: Plugin Dropdown-Menü für meine Kategorien Plugins für JTL-Shop 10
Neu EVRI Label für Versand nach UK - wer benutzt es? Business Jungle 2
Nur bestimmte Bilder für einen Marktplatz aktivieren (Hood.de) JTL-Wawi 1.8 2
Neu Drucker für WMS getauscht - Zollpapiere werden nicht gedruckt JTL-ShippingLabels - Ideen, Lob und Kritik 1
Variable für Kundengruppe Allgemeine Fragen zu JTL-Shop 6
Neu Beschreibung für Amazon ohne HTML Inhalte Arbeitsabläufe in JTL-Wawi 3
Hilfe gesucht für Änderung der internen Schlüsselnummern! JTL-Wawi 1.9 8
Beantwortet Manueller Worklfow Rechnung für Mahnung, wie den offenen Rechnungsbetrag bei Teilrechnung ausgeben? JTL-Workflows - Ideen, Lob und Kritik 9
Tipps für effiziente Änderungen bestehender Artikel JTL-Wawi 1.7 2
Neu Bilder für alle Plattformen verwenden User helfen Usern - Fragen zu JTL-Wawi 8
Neu JTL WaWI abgleich mit Amazon für Deal Day & Black Friday User helfen Usern - Fragen zu JTL-Wawi 1
Onpage composer Texte für Merkmal Seiten Einrichtung JTL-Shop5 1
Neu Amazon Lister 2.0 - Code 99016 - Ein Maximum von 1 Vorkommen (oder Vorkommnissen) ist für das Attribut color zulässig Amazon-Lister - Fehler und Bugs 1
Neu Anbindung von JTL an Onlinehandel für GPSR (Produktsicherheit) Schnittstellen Import / Export 3
Sonderpreise für den Otto Marktplatz übertragen Otto.de - Anbindung (SCX) 1
Neu Suche Tipps für Plesk Settings Installation / Updates von JTL-Shop 0
Neu Dokumentenzufuhr für Vorlagen auswählen Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 3

Ähnliche Themen