Hallo, wir haben bei unseren Artikeln mehrere Bilder hinterlegt. Wenn ein Bild angeklickt wird wird dieses größer in der Mitte des Bildschirms angezeigt. Von anderen Shopware-Shops kennen wir, dass ein Pfeil im Bild nach links und nach rechts erscheint, auf den man dann klickt und das vorherige Bild bzw. das nächste Bild vergrößert erscheint. Bei uns scheint ein Modul installiert zu sein, dass wenn wir mit der Maus über das Bild fahren dieses in einem Ausschnitt vergrößert dargstellt wird. Das soll auch so bleiben. Nur wenn das Bild dann angeklickt und größer auf der Bildschirmmitte erscheint sollen die Pfeile zum weiterklicken erscheinen. Vielen Dank für die Hilfe
Das liegt daran, dass dafür lightbox eingestellt ist. Das mit den Pfeilen kann zum Beispiel fancybox. Hier mal eine Anleitung Schritt 1: Fancybox hier herunterladen: http://fancybox.googlecode.com/files/jq … -1.3.4.zip Schritt 2: Dateien auf Deinem PC in einem beliebigen Ordner entpacken Schritt 3: Aus dem Ordner ‘jquery.fancybox-1.3.4/fancybox’ folgendes kopieren: → Alle Bilder in ‘templates/DEIN_TEMPLATE/frontend/_resources/images/fancybox/’ —> (fancybox Ordner muss erst erstellt werden) → ‘jquery.fancybox-1.3.4.css’ in ‘templates/DEIN_TEMPLATE/frontend/_resources/styles’ → ‘jquery.fancybox-1.3.4.pack.js’ in ‘templates/DEIN_TEMPLATE/frontend/_resources/javascript’ → ‘jquery.mousewheel-3.0.4.pack.js’ in ‘templates/DEIN_TEMPLATE/frontend/_resources/javascript’ Schritt 4: Die ‘jquery.fancybox-1.3.4.css’ muss noch bearbeitet werden, damit die Pfade zu den Bildern stimmen. → Suche url(' und ersetze alle mit url('../images/fancybox/ Schritt 5: ‘templates/DEIN_TEMPLATE/frontend/index/header.tpl’ öffnen und folgendes ans Ende vor ‘’ einfügen: <link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='frontend/_resources/styles/jquery.fancybox-1.3.4.css'%7D"><script type="text/javascript" src="%7Blink%20file='frontend/_resources/javascript/jquery.fancybox-1.3.4.pack.js'%7D"></script><script type="text/javascript" src="%7Blink%20file='frontend/_resources/javascript/jquery.mousewheel-3.0.4.pack.js'%7D"></script><script type="text/javascript">
$(document).ready(function() {
$("a[rel=fancybox]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Bild ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
</script> Schritt 6: Öffne die Datei ‘templates/DEIN_TEMPLATE/frontend/details/image.tpl’ → Suche lightbox[{$sArticle.ordernumber}] und ersetze mit fancybox (Damit das Bild auch in der Fancybox angezeigt wird) Schritt 7: Öffne die Datei ‘templates/DEIN_TEMPLATE/frontend/details/images.tpl’ → Suche [) [code] {if $sArticle.image.src.4} ]({$sArticleImage.src.5})[config('sUSEZOOMPLUS')}class="cloud-zoom-gallery"{/if} rev="{$sArticle.image.src.4}"\>]({$sArticle.image.src.5} "{if $sArticle.image.description}{$sArticle.image.description}{else}{$sArticle.articleName}{/if}") {/if} Jetzt wird das Hauptbild nicht nochmal als kleines Bild darunter angezeigt Schritt 8: Öffne die Datei ‘templates/DEIN_TEMPLATE/frontend/_resources/javascript/jquery.shopware.js’ → Suche $('div.thumb\_box a').bind('click', function(event) { event.preventDefault(); $('a#zoom1').hide().attr('href', $(this).attr('href')).children().attr('src', $(this).attr('rev')); $('a#zoom1').fadeIn('slow'); return false; }); und löschen oder auskommentieren () (Das verhindert, dass beim Klick auf ein kleines Bild das Hauptbild wechselt) Fertig. Bei Fragen oder Problemen einfach melden.
2 „Gefällt mir“
Hallo Marcel, wirklich grandios beschrieben -danke nochmals. Hast du die neuere V.2 auch schon mal angetestet? http://fancybox.net/ Grüße rattaui
Freut mich dass die Anleitung gut angekommen ist. Die V.2 hatte ich noch gar nicht gesehen, ups. Werde ich demnächst mal machen. Gruß Marcel
ohja gut - eine Rückmeldung wäre klasse. Grüße rattatui
Habe die V.2.0.5 getestet und funktioniert einwandfrei. Auch hierfür eine Anleitung. Schritt 1: Fancybox hier herunterladen: https://github.com/fancyapps/fancyBox/zipball/v2.0.5 Schritt 2: Dateien auf Deinem PC in einem beliebigen Ordner entpacken Schritt 3: Aus dem Ordner ‚fancyapps-fancyBox-5403ca0‘ folgendes kopieren: → Bilder aus ‚source‘ und ‚source/helpers‘ in ‚templates/DEIN_TEMPLATE/frontend/_resources/images/fancybox/‘ —> (fancybox Ordner muss erst erstellt werden) → in ‚templates/DEIN_TEMPLATE/frontend/_resources/styles‘ —> ‚source/jquery.fancybox.css‘ —> ‚source/helpers/jquery.fancybox-buttons.css‘ —> ‚source/helpers/jquery.fancybox-thumbs.css‘ → in ‚templates/DEIN_TEMPLATE/frontend/_resources/javascript‘ —> ‚source/jquery.fancybox.pack.js‘ —> ‚source/helpers/jquery.fancybox-buttons.js‘ —> ‚source/helpers/jquery.fancybox-thumbs.js‘ —> ‚lib/jquery.mousewheel-3.0.6.pack.js‘ Schritt 4: Die ‚jquery.fancybox.css‘ muss noch bearbeitet werden, damit die Pfade zu den Bildern stimmen. → Suche url(' und ersetze alle mit url('../images/fancybox/ Das gleich auch mit der ‚jquery.fancybox-buttons.css‘ durchführen! Schritt 5: ‚templates/DEIN_TEMPLATE/frontend/index/header.tpl‘ öffnen und folgendes ans Ende vor ‚‘ einfügen: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='frontend/_resources/styles/jquery.fancybox.css'%7D"><link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='frontend/_resources/styles/jquery.fancybox-buttons.css'%7D"><link type="text/css" media="screen, projection" rel="stylesheet" href="%7Blink%20file='frontend/_resources/styles/jquery.fancybox-thumbs.css'%7D"><script type="text/javascript" src="%7Blink%20file='frontend/_resources/javascript/jquery.fancybox.pack.js'%7D"></script><script type="text/javascript" src="%7Blink%20file='frontend/_resources/javascript/jquery.fancybox-buttons.js'%7D"></script><script type="text/javascript" src="%7Blink%20file='frontend/_resources/javascript/jquery.fancybox-thumbs.js'%7D"></script><script type="text/javascript" src="%7Blink%20file='frontend/_resources/javascript/jquery.mousewheel-3.0.6.pack.js'%7D"></script><script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox();
});
</script><style type="text/css">
.fancybox-custom .fancybox-outer {
box-shadow: 0 0 50px #222;
}
</style> Dieser Teil des Codes: $('.fancybox').fancybox(); kann noch durch Effekte erweitert werden. Nachzulesen auf der Anbieterseite oder in der Demodatei. Ich stehe zur Hilfe auch zur Verfügung. Schritt 6: Öffne die Datei ‚templates/DEIN_TEMPLATE/frontend/details/image.tpl‘ → Suche und lösche rel="lightbox[{$sArticle.ordernumber}]" → Suche {if $this-\>config('USEZOOMPLUS')}class="cloud-zoom"{/if} und ersetze mit {if $this-\>config('USEZOOMPLUS')}class="cloud-zoom fancybox"{else}class="fancybox"{/if} Schritt 7: Öffne die Datei ‚templates/DEIN_TEMPLATE/frontend/details/images.tpl‘ → Suche rev="{$sArticleImage.src.4}" {if $this-\>config('sUSEZOOMPLUS')}class="cloud-zoom-gallery"{/if} und ersetze mit rev="{$sArticleImage.src.4}" {if $this-\>config('sUSEZOOMPLUS')}class="cloud-zoom-gallery fancybox"{else}class="fancybox"{/if} - Suche und lösche (oder auskommentieren mit ) {if $sArticle.image.src.4} [config('sUSEZOOMPLUS')}class="cloud-zoom-gallery"{/if} rev="{$sArticle.image.src.4}"\>]({$sArticle.image.src.5} "{if $sArticle.image.description}{$sArticle.image.description}{else}{$sArticle.articleName}{/if}") {/if} Schritt 8: Führe Schritt 8 aus meiner ersten Anleitung aus. Fertig. Bei Fragen oder Problemen einfach melden. Zu beachten ist noch, dass hierbei jquery 1.7 zusätzlich zu 1.4.2 eingebunden wird. Bei mir gab es dadurch keine Probleme, kann bei Euch aber schon wieder anders sein.
3 „Gefällt mir“
…Klasse, danke Marcel. Hatte garnicht gesehen, dass jquery 1.7 benötigt wird. wie ich sehe, hast Du jquery 1.7 „extern“ eingebunden - wie schaut es denn jetzt mit der Ladezeit der Seite aus? Externes Einbinden habe ich noch nie verwendet. Wäre „intern“, auf dem eigenen Server nicht besser gewesen? Oder spricht etwas dagegen? Weiterhin nehme ich an, dass es nicht funktioniert die 1.4.2 generell durch 1.7 zu erstezen -entweder laufen ggf. andere Scripte nicht die man verwendet oder Shopware selbst bekommt Probleme. Langsam wird’s eh Zeit für eine css/js combine-Möglichkeit… Grüße rattatui
Stimmt, intern einbinden ist natürlich besser, hatte ich so gar nicht drauf geachtet. Richtig, die 1.4.2 ersetzen geht nicht, wie du schon sagst. Aber hauptsache Fancybox läuft 
1 „Gefällt mir“
[quote=“Marcel Görtz”]Stimmt, intern einbinden ist natürlich besser, hatte ich so gar nicht drauf geachtet. [/quote] einfach als Anmerkung: intern einbinden ist natürlich in den meisten Fällen gut. Man sollte aber nicht vergessen, dass auch ein externes Einbinden in einigen Fällen sinnvoll sein kann, weil die Datei dann über CDN ausgeliefert wird. Und danke für die Anleitung! :thumbup:
[quote]Man sollte aber nicht vergessen, dass auch ein externes Einbinden in einigen Fällen sinnvoll sein kann, weil die Datei dann über CDN ausgeliefert wird.[/quote] Das ist natürlich auch gut zu wissen. [quote]Langsam wird’s eh Zeit für eine css/js combine-Möglichkeit…[/quote] Ich stehe grade mit Christian Schepp in Verbindung https://github.com/Schepp/CSS-JS-Booster Ich zitere hier mal aus seiner letzten Antwort: [quote]…liegt das an der Kombination mit Smarty (ohne dass Smarty da was falsch macht). Die Pfade versuche ich mir meist via dirname(__FILE__) aus der aktuellen Datei herauszuextrahieren. Vielleicht ist genau das im Zusammenspiel mit Smarty ein Problem, weil das innerhalb der .tpl-Datei der Pfad zu ebendieser ist, und nicht der zu der ausgebenden Seite?..[/quote] Bezogen auf meinen Versuch, den Booster mit Shopware zum laufen zu bringen. Vielleicht schaffen wir das ja zusammen, wenn Interesse besteht? Grüße rattui
Super Anleitung von Marcel Görtz! Anscheinend funktioniert sie auch bei anderen - bei mir leider nicht 
Setze Shopware v3.5.6 ein und bin ganau nach der 2. Anleitung (für fancybox 2.0) gegangen. Zuerst hat die fancybox nur eine leere, quadratische Box (mit Overlay etc.) geöffnet. Habe dann bei image.tpl/images.tpl die rel=“fancybox” allen a-Tags zugewiesen: jetzt öffnet zumindest die Lightbox - von fancybox mit Navi-Pfeilen keine Spur. Muss ich noch woanders eine Änderung vornehmen? Gruß, topdirndl.de
Irgendetwas scheinst du vergessen zu haben. Gehe Schritt 6 nochmal genau durch. Denn die “kleinen” Bilder werden ja schon in der Fancybox bei Dir geöffnet, wie hier zu sehen: http://www.topdirndl.de/dirndl/midi/1/dreaming
Hallo, ich bin irritiert, denn wenn ich mir den Code ansehe, mit dem die Lighbox standardmäßig eingebettet ist, dann müsste diese auch die Pfeile anzeigen. Der Aufruf erfolgt ja im Grunde auch wie bei Fancybox mittels rel=„Lighbox{Galleriename}“. Anstatt Galleriename wird standardmäßig die Artikelnummer des Artikel eingesetzt. Ich kann mir kaum vorstellen, dass man die LB gegen die FB ersetzen muß, um die Pfeile zu bekommen. Leider habe ich nicht herausgefunden, wo die LB initialisiert wird. Ideen sind willkommen. Henning
Hallo zusammen, Sorry, dass ich mit meinem ersten Post in diesem Forum den alten Thread ausgrabe, das Thema interessiert mich aber sehr. Ich denke aus Usability-Sicht ist die Möglichkeit die Artikelbilder mithilfe der VOR und ZURÜCK-Pfeile zu blättern äußerst wichtig. Ist sie auch in der aktuellen Version der Shopware nicht vorhanden? Ich kann mir das auch nicht so wirklich vorstellen. Ist die Mehrzahl der Shopbetreiber der Meinung, dass diese Funktion unwichtig ist oder warum wurde das immer noch nicht umgesetzt? Viele Grüße, Tom
1 „Gefällt mir“
Hallo, nein im Standard ist das nicht drin. Daher haben wir das als Plugin bereitgestellt http://store.shopware.de/template-desig … hausupport Bei Bedarf kannst du das also kostenlos nachinstallieren. Sebastian
1 „Gefällt mir“
Hallo Sebastian, ist das Plugin auch mit der Version 4.3 kompatibel? Viele Grüße, Tom
Funktioniert hier mit einer 4.3.0 problemlos Gruß Mario
ja aber wie am Anfang beschrieben liegt das Problem darin das die zoom Funktion auch beibehalten werden soll. wie kann man die beiden Funktionen kombinieren bei shobware 4 ?
Für mich wären die Pfeile PREV und NEXT in der Standard-Version von Lightbox die optimale Lösung. Es muss wohl einen triftigen Grund geben, warum das nicht gemacht wurde. In den früheren Versionen war doch die Funktion vorhanden, erinnere mich hier im Forum gelesen zu haben.
Wenn es dir nur um die Pfeile geht, sollte das nicht so problematisch sein. Im Ordner des Lightbox-Plugins gibt es ein Views/frontend/_resources/img-Verzeichnis, dort liegen die aktuellen Pfeile. Wenn du die gegen die Originale austauschst und wahrscheinlich noch die swag_lightbox.css im css-Ordner des Plugins anpasst, sollte das eigentlich passen. Gruß Mario