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
527
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 Frage zu Benutzer/Rechte für Kunden im Onlineshop neues Passwort generieren User helfen Usern - Fragen zu JTL-Wawi 0
Seit Update auf 1.11.4 Workflow für Kartonauswahl gibt error JTL Das Objekt mit Nullwert muss einen Wert haben. BrowsePk: 152325 WorkflowAktionId: 155 JTL-Wawi 1.11 1
Neu Rechnung nur für bestimmte Kundengruppe drucken, aber für alle Erstellen Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 1
Neu JTL auf dem Server duplizieren für Experimente Installation von JTL-Wawi 1
25 Gutscheine für Kunden auf Rechnung erstellen Allgemeine Fragen zu JTL-Vouchers 0
Neu SEO URL für den Blog Allgemeine Fragen zu JTL-Shop 2
Neu 🚨 Hinweis für JTL-Händler, die Taxdoo nutzen News, Events und Umfragen 1
Monatsabschluss Amazon FBA UK / CH mit JTL2Datev WaWi 1.10 bei IDU Nutzung und Zwangs VCS für GB / Schweiz JTL-Wawi 1.10 0
Neu Biete Connector-Tools für vollautomatische Lieferantenbestellungen an uvm. Dienstleistung, Jobs und Ähnliches 2
Externe Auftragsnummer für Rechnungs-Druckvorlage nicht vorhanden JTL-Wawi 1.11 6
Neu Sind Support-Tickets für WaWi und Ameise ohne kostenpflichtigen Tarif nicht mehr möglich? JTL-Wawi - Fehler und Bugs 3
Neu Coupon-Steuer Plugin: Korrekte Steuerberechnung für JTL-Shop Coupons Plugins für JTL-Shop 1
Neu Neuer Server für kleines Unternehmen User helfen Usern - Fragen zu JTL-Wawi 43
Neu Welche SQL Server Version für WaWi 1.0.0.0.0 unter Windows 11 Installation von JTL-Wawi 6
Neu Was ist die korrekte Variable für die letzte Seite eines Artikellistings? Betrieb / Pflege von JTL-Shop 11
Neu Open-Source-Lösung für produzierende Betriebe User helfen Usern 0
Neu Varianten Artikel erstellen mit Lister 2.0 nur für Amazon Amazon-Lister - Ideen, Lob und Kritik 0
Neu SUCHE Freelancer für JTL WAWI Anbindung an WooCommerce und Einrichtung Dienstleistung, Jobs und Ähnliches 2
Amazon-ASIN mit mehreren SKU für Chargenverfolgung JTL-Wawi 1.10 0
Neu ID Hook für Warenkrob User helfen Usern 0
Neu Platzhalter für GPSR werden mit angezeigt PrestaShop-Connector 1
In Diskussion Workflow für voraussichtlichen Liefertag erstellen JTL-Workflows - Ideen, Lob und Kritik 6
Neu Workflow für voraussichtlichen Liefertag erstellen User helfen Usern - Fragen zu JTL-Wawi 1
Neu CustomWorkflow für Pattenkonto JTL-Workflows - Ideen, Lob und Kritik 1
Neu Adressetiketten für Briefe mit Etikettendrucker erstellen / Formatierungsproblem Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 4
Neu 🚀 Pilotkunden gesucht: HS Dynamic Pricing Plugin für JTL-Shop Plugins für JTL-Shop 0
Wichtig 💡Die Retourenplattform für Webshops – Expertise von unserem neuen Partner Returnless News, Events und Umfragen 0
Neu Kapazitäten frei für Routineaufgaben JTL Wawi Dienstleistung, Jobs und Ähnliches 0
Neu Trainingsmodus für JTL-POS gewünscht JTL-POS - Ideen, Lob und Kritik 0
Artikel teilweise nicht für Verkaufskanäle aktivierbar JTL-Wawi 1.10 0
Neu VCS lite: Arithmetischer Überlauffehler für tinyint-Datentyp, Wert = -1. Amazon-Anbindung - Fehler und Bugs 0
Monatsweise Warenbewegungen für alle Artikel exportieren JTL-Wawi 1.10 1
WF - automatisches Aktivieren / Deaktivieren für Verkaufskanal Shop JTL-Wawi 1.9 6
Artikel nicht automatisch für Verkaufskanal aktivieren JTL-Wawi 1.10 2
Neu Welcher Hoster ist für JTL-Shop 5 empfehlenswert? User helfen Usern 12
Buchhaltung vollautomatisiert für die Schweiz JTL-Wawi 1.10 10
Vote für debugging des Mobile Server Fehlers JTL-Wawi 1.11 1
Massenänderung "Lagerplatz" für Artikel bei WMS Lager JTL-Wawi 1.10 2
Neu Bestellobergrenze (999€) für Schweizer Kunden im Shop hinterlegen Betrieb / Pflege von JTL-Shop 1
Alternativtext für Artikelbilder per Ameise pro Plattform setzen JTL-Wawi 1.10 0
Neu Staffelpreise für Verpackungseinheiten Einrichtung von JTL-Shop4 4
Neu Kunden einen Retouren QR Code beim ausliefern mitschicken für Warenankauf ??? JTL-ShippingLabels - Fehler und Bugs 0
Neu Suche Freelancer für Aufsetzen JTL B2B Shop Dienstleistung, Jobs und Ähnliches 3
Gelöst Kartenleser für RKSV JTL-POS - Fragen zu Hardware 2
Neu Artikel nur für Admin sichtbar Allgemeine Fragen zu JTL-Shop 2
Neu Zusätzlicher Kundendisplay für Kassensystem iMin D4 Pro Einrichtung / Updates von JTL-POS 1
Neu Besteht Interesse an einer Versandschnittstelle für GEL-Express? Schnittstellen Import / Export 0
Neu Tailwind als Basis für JTL Shop 6 ? Templates für JTL-Shop 2
Neu Variablen für Kassenbon Einrichtung / Updates von JTL-POS 1
Neu Feature Requests für das News System Refactoring JTL-Shop - Ideen, Lob und Kritik 7

Ähnliche Themen