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 XML Export Artikel Stammdaten für Mercateo Schnittstellen Import / Export 0
Neu Wareneingang für eine "Variobox" richtig buchen User helfen Usern - Fragen zu JTL-Wawi 0
Neu Workflow - Wert "Netto-EK" im Auftrag auf 0,00 € setzen für eine bestimmte Kundengruppe User helfen Usern - Fragen zu JTL-Wawi 1
Neu Umsetzung von JTL Plan & Produce für das Unternehmen Dienstleistung, Jobs und Ähnliches 1
Neu Aktueller Prozess für einen sauberen Umtausch Allgemeine Fragen zu JTL-POS 5
Lieferschein Formel für Datum JTL-Wawi 1.9 3
Neu Für Datev Export, Konto 4400 ändern Allgemeine Fragen zu JTL-POS 7
Neu Statistik für Anfänger User helfen Usern - Fragen zu JTL-Wawi 9
Alternative für Ebay / Amazon Listings JTL-Wawi 1.9 0
Neu Fehlermeldung im JTL Shop 5.2.2 Frontend - Wo zu finden für Debugging? JTL-Shop - Fehler und Bugs 0
Erzeugung des Barcodes für die Gebinde EAN JTL-Wawi 1.9 3
Neu Artikelbezeichnung aus Auftrag in Druckvorlage für Picklisten Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 4
Individuelle Verkaufskanäle für Hersteller (Seiten) JTL-Wawi 1.9 3
Neu Validierung Lieferadresse - welchen Feldnamen für fehlendeAngaben Technische Fragen zu Plugins und Templates 1
JTL-Ameise Export Verkaufsrechnungen // Beleglink für Steuerberaterin JTL-Wawi 1.9 1
Neu Lieferdatum/Lieferzeit in Angebot/AB/Lieferschein/Rechnung für einzelne Positionen darstellen Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 3
Listen Ansicht für Artikel deaktivieren Einrichtung JTL-Shop5 2
Automatischer bestandsabgleich für mehrere Artikel JTL-Wawi 1.8 1
Neu erweiterte Eigenschaften für Dezimalzahl in US format Amazon-Lister - Fehler und Bugs 2
Keywords für Kaufland in Kurzbeschreibung JTL-Wawi 1.9 1
Neu Cookies für Google Ads User helfen Usern - Fragen zu JTL-Wawi 0
Neu Anzeige der Seriennummer nur für den Wareneingang Eigene Übersichten in der JTL-Wawi 0
In Diskussion Workflow für eBays neues "Kaufabbruch"-Feature JTL-Workflows - Ideen, Lob und Kritik 2
Neu Amazon Für das Feld "Preis mit Steuern zur Anzeige eBay-Anbindung - Fehler und Bugs 2
Neu Anlegen einer eigenen Seite ohne Text für externen Link nicht möglich JTL-Shop - Fehler und Bugs 2
Rechnungslegung für verschiedene Bezahlarten aus B2B & B2C JTL-Wawi 1.9 1
Neu Soehnle Waage für anstehende DHL Wiegepflicht... Waage zu alt? Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 4
Neu 2 verschiedene Lager - Trennung - nur ein Lager für WMS Versand möglich ? User helfen Usern - Fragen zu JTL-Wawi 2
Neu Workflow für Warenpost nur wenn bestimmte Artikel in Bestellung User helfen Usern - Fragen zu JTL-Wawi 1
Neu JTL-WAWI für Windows 11 on ARM Installation von JTL-Wawi 1
Netto Rechnungen für B2B JTL-Wawi 1.9 4
Neu Für den Shop-Connector konnte kein Steuersatz zugeordnet werden. WooCommerce-Connector 0
Neu Endlich Vertreterprovsionen für JTL-Wawi mit arpaTools ProviMate User helfen Usern 0
Neu JTL WAWI - Suche nach Designer für eBay-Vorlage mit CLP-Feldern Dienstleistung, Jobs und Ähnliches 1
Neu Amazon Abgleich Fehler - Hotfix für Version 1.5.55.8 funktioniert nicht JTL-Wawi - Fehler und Bugs 6
Neu Artikelbilder für mehrere Sprachen Technische Fragen zu Plugins und Templates 2
Neu Extra Versandkostenbetrag für Schnellversand möglich? Gelöste Themen in diesem Bereich 4
Neu Plugins für den Shopify Connector Shopify-Connector 1
Neu E-Commerce Manager (m/w/d) für den Zweiradbereich bei MSZweirad in Heinsberg Dienstleistung, Jobs und Ähnliches 0
Neu Lager sperren für POS Allgemeine Fragen zu JTL-POS 0
Neu Kleines PHP Skript für MySQL Shop Datenbank Backup - gratis Betrieb / Pflege von JTL-Shop 3
Neu Suche nach zuverlässigen Lieferanten für umweltfreundliche Kartonagen mit Höhenriller Smalltalk 1
Neu Amazon VCS keine Rechnungsstellung für Lieferungen in die Türkei JTL-Wawi - Fehler und Bugs 2
Neu günstiger Anbieter für Kartenzahlung mit Gerät gesucht User helfen Usern - Fragen zu JTL-Wawi 3
Neu Neu: Das innovative Anzahlungs-Tool für JTL Wawi und JTL POS! Arbeitsabläufe in JTL-Wawi 0
In Diskussion Geplante Abkündigung für JTL-POS für Android 7 Geräte wie Sunmi T2 in Sicht? JTL-POS - Fragen zu Hardware 16
JTL Wawi Statistiken für die JTL Wawi App JTL-Wawi App 0
Neu Kategoriebilder für erste Unterkategorie auch auf dem handy anzeigen lassen Templates für JTL-Shop 3
Rechnungsadresse Email Workflow Bedingungen für Rechnung erstellt fehlt JTL-Wawi 1.8 0
Neu html code für Bewertungssiegel. Wohin? Gelöste Themen in diesem Bereich 4

Ähnliche Themen