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
Automatischer Workflow für Versand von Gutscheinen versendet den Gutschein nicht JTL-Wawi 1.10 2
Workflow für Benachrichtigung bei Stammkunden JTL-Wawi 1.10 6
Ameise Preisimporte für Marktplätze funktionieren nicht JTL-Wawi 1.10 1
Neu Druckvorlagensets für Kundengruppen Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 7
Neu Workflow Versandart prüfen und im Auftrag setzen - speziell für Stücklistenartikel User helfen Usern - Fragen zu JTL-Wawi 0
Neu Seagull Treiber für den Zebra LP2844 JTL-ShippingLabels - Fehler und Bugs 0
Neu In welcher Tabelle werden die Daten für den Amazon Lister 2.0 gespeichert? Amazon-Lister - Fehler und Bugs 5
Neu zweiten Mandanten für Ankauf von Ware? gleiche Firma, gleiche Person. Lizenzen? User helfen Usern - Fragen zu JTL-Wawi 2
Preis im Warenkorb für 10 min sichern, wenn Preis geändert wurde. Ist das möglich? Einrichtung JTL-Shop5 3
Neu Staffelpreise für Metro.de JTL-Ameise - Ideen, Lob und Kritik 0
Neu Auslesen Bestand per Lager für Workflow zur Anzeige im Onlineshop User helfen Usern - Fragen zu JTL-Wawi 1
Einstellungen für den DHL Ausdruck für Retourenetiketten für limango JTL-Wawi 1.10 0
Neu Verschiedene Startseiten für angemeldete und nicht angemeldete Benutzer möglich? Allgemeine Fragen zu JTL-Shop 6
Keine Suchergebnisse für Artikelnummer Lieferant JTL-Wawi 1.10 2
Neu Ankündigung: Entwicklung eines modified-Connectors für JTL-WaWi Modified eCommerce-Connector 0
Neu Eazyedit - KI-Bildbearbeitung für JTL User helfen Usern 0
Neu After-Sales-Marketing für Reputationsmanagement und Kundenbindungsmaßnahme User helfen Usern 0
Kann keinen neuen Export für Google Shopping mehr erstellen Allgemeine Fragen zu JTL-Shop 4
AltTitle für Bilder im WebShop und SEO? Einrichtung JTL-Shop5 1
Neu geplanter Releasetermin für Version 5.5.3? JTL-Shop - Fehler und Bugs 4
Neu Softwarelösung für Visagist inkl. Mini-Shop & Kassa User helfen Usern 22
Neu Google shopping export - neue Produkte markieren um eine Werbung nur für neue Produkte laufen zu lassen Technische Fragen zu Plugins und Templates 1
Neu feinere WMS Rechte über Benutzergruppen für gängige WMS Vorgänge JTL-WMS / JTL-Packtisch+ - Ideen, Lob und Kritik 0
Neu Fehler Sie können aktuell keine Benutzer-Lizenzen für WMS bzw. WMS Mobile buchen Installation von JTL-WMS / JTL-Packtisch+ 9
In Diskussion Variable für die Anzahl eines Produkts auf der Pickliste JTL-Workflows - Ideen, Lob und Kritik 1
Neu howto: "Rabatte irgnorieren" für einen Artikel per Ameise importieren, so dass in einem angeschlossenen POS dieser Artikel keine Rabatte bekommt User helfen Usern - Fragen zu JTL-Wawi 11
Neu Optimale Einstellungen für Mitarbeitende mit Beeinträchtigungen finden Arbeitsabläufe in JTL-WMS / JTL-Packtisch+ 2
Neu DotLiquid zum auslesen Attribut für BrowseNodeID Amazon-Lister - Ideen, Lob und Kritik 3
Neu Neuer Dienstleister für E-Commerce Services Dienstleistung, Jobs und Ähnliches 0
Neu Lieferzeiten für Dropshipping und eigene Artikel richtig in Shopware 6 bzw. Wawi anzeigen Schnittstellen Import / Export 1
Neu Retourenlabel für DHL Selbstzahler über Retouren erstellen geht nicht JTL-ShippingLabels - Fehler und Bugs 0
Neu Buchungsgründe für Bareinnahmen und -ausgaben auf Tagesabschluss ausweisen JTL-POS - Ideen, Lob und Kritik 0
Neu Aktueller Installationsleitfaden / Softwareempfehlung für JTL Wawi 1.10.x im Netzwerk User helfen Usern - Fragen zu JTL-Wawi 2
Neu Hilfe für Amazon und Lister 2.0 gesucht Amazon-Anbindung - Ideen, Lob und Kritik 5
Neu Welches PlugIn für ein besseres Google Ranking? Plugins für JTL-Shop 2
Lieferanschrift für Lieferantenbestellung ändern JTL-Wawi 1.8 3
Versandkostenstaffel nur für bestimmte Artikel zählen lassen? JTL-Wawi 1.9 1
Neu JTL-Shop Lieferanten Artikelnummer und Suchbegiffe für Onlineshop werden im Shop nicht gefunden Allgemeine Fragen zu JTL-Shop 5
Neu Die Zahlungsart SOFORT ist eine Plugin-Zahlungsart für Mollie. Das zugehörige Plugin ist jedoch nicht installiert! Allgemeine Fragen zu JTL-Shop 0
Neu Eigene Übersicht im Kundenstammblatt für durchschnittlichen Auftragswert/Röherlös/Zahlungsdauer Eigene Übersichten in der JTL-Wawi 3
Artikel Reiter "retail" (unser Name für JTL-POS) fehlt unter Sonderpreis JTL-Wawi 1.10 1
Neu Amazon Lister 2.0 "für das Verkaufskonto 'Amazon.de Lister' konnten keine Versandregeln gefunden werden. ..." 1.10.12.0 Amazon-Lister - Fehler und Bugs 1
Neu JTL Shop 5.5 Tips für bessere Performance? Allgemeine Fragen zu JTL-Shop 7
Neu Wenn keine Postnummer für Versand per DHL notwendig ist User helfen Usern - Fragen zu JTL-Wawi 0
Bild "TT-EC15-main.png" für das Angebot mit SKU "TT-EC15" auf Channel "OTTODEJTL" wurde nicht gefunden JTL-Wawi 1.9 0
In Diskussion JTL WAWI + FFN + OrangeConnex Workflow für Versand und Lagerbestand JTL-Workflows - Ideen, Lob und Kritik 0
Neu Gleiche Designvorlage für eBay und JTL-Shop mit globalen Textbausteinen nutzen Allgemeine Fragen zu JTL-Shop 0
Neu Ändern des Dokumententitels oder andere Wege der Datenübergabe in das Dokument hinein für Artikeletiketten. Druck-/ E-Mail-/ Exportvorlagen in JTL-Wawi 3
Neu Artikel z.B. mit Rabattcode für 0€ verkaufen. Allgemeine Fragen zu JTL-Shop 4
Speicherpfad für PDF JTL-Wawi 1.10 2

Ähnliche Themen