FancyBox als Alternative zur Lightbox (+ IE8 Fix)
Die Lightbox ist sicherlich jedem ein Begriff - die Meisten möchten sie im Shop oder der Website als Image-Zoom integrieren. Aber schauen Sie sich mal um, es gibt eine Menge Lightbox Klone die man sich etwas genauer ansehen sollte.
Hier eine Liste der gängigen Lightbox Alternativen:
- Lightview
- prettyPhoto
- Slimbox
- Highslide
- LightWindow
- Thickbox
- FancyBox
Hier können Sie sich anhand der Lightbox Clones Matrix vergleichen.
Ich habe mich für die FancyBox entschieden - hier die Gründe dafür:
- Schlagschatten in der Vergrößerung
- Gruppierung von Elementen mit Navigation (Vorladen/Preload von Bildern)
- Darstellung von Bildern, Inline-, Ajax- und iFramed Inhalt
- Wurde entwickelt unter der Verwendung von jQuery (Nutzung von jQuery Base möglich)
- Vergößerung passt sich der Bildschirmgröße an (Keine Überlappungen)
- Support von easing plugin
Für die Integration von Magento, habe ich die Bilder, CSS und Javascript bereits angepasst, damit man Sie nur noch in ein Skin kopieren muss. Am Ende finden Sie alle benötigten Dateien zum Download in einem ZIP-Archiv. Die darin enthaltene Version ist inklusive eines Bugfix für den Internet Explorer8!
Umsetzung (Default Theme!)
Kopieren Sie folgende Dateien:
jquery.fancybox-1.2.1.js nach skin/frontend/default/[Ihr Theme]/js
jquery.fancybox-1.2.1.pack.js nach skin/frontend/default/[Ihr Theme]/js
jquery.easing.1.3.js nach skin/frontend/default/[Ihr Theme]/js (optional)
jquery.fancybox.css nach skin/frontend/default/[Ihr Theme]/css
Bilder nach skin/frontend/default/[Ihr Theme]/images/fancybox
Wenn Sie sich die original Daten downloaden, müssen Sie die Verzeichniss für die Bildquellen in der jquery.fancybox.css selbst anpassen.
Als nächstes muss die Datei app/design/frontend/default/[Ihr Theme]/template/catalog/product/view/media.phtml angepasst werden.
Das Hauptbild wird von einem P-Tag umgeben. Dieses packen wir in ein A-Tag welches von der FancyBox verlinkt wird.
Wir ersetzen
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
mit folgendem Code
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()):
$_url = $this->helper('catalog/image')->init($_product, 'image');
$_label = $this->htmlEscape($this->getImageLabel());
$_img = '<img id="image" src="'.$this->helper('catalog/image')->init($_product, 'image').'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />'; ?>
<a href="<?php echo $_url ?>" rel="group" title="<?php echo $_label;?>" >
Als nächstes wird der Doppelklick deaktiviert. Entfernen Sie das Wort “Double” (ca. Zeile 46), und tauschen Sie
<script type="text/javascript">
Event.observe(window, 'load', function() {
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
});
</script>
mit folgendem Code aus.
<script type="text/javascript">
Event.observe(window, 'load', function() {
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
Event.stopObserving($('image'), 'dblclick', null);
});
</script>
Über <?php if (count($this->getGalleryImages()) > 0): ?> fügen Sie folgenden Code ein.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".product-img-box a").fancybox({
'padding':4,
'imageScale': true,
'zoomOpacity': true,
'hideOnContentClick': true,
'zoomSpeedIn': 300,
'zoomSpeedOut': 300,
'zoomSpeedChange': 300,
'overlayShow': false,
'overlayOpacity': 0.3,
'hideOnContentClick': false,
'centerOnScroll': true,
'easingIn': 'swing',
'easingOut': 'swing',
'easingChange': 'swing'
});
});
</script>
Damit Sie nicht noch die verschiedenen Parameter für die FancyBox suchen und eintragen müssen, habe ich die meisten Parameter “zum spielen” bereits integriert.
Und zum Schluß wird noch die Bildgallerie erzeugt. Suchen Sie folgenden Code:
<li>
<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300, height=300, left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
</li>
und ersetzen Sie diesen mit folgendem Code.
<li>
<?php
$img_label = $this->htmlEscape($_image->getLabel());
$img_url_small = $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56);
$img_url = $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile());
?>
<a rel="group" title="<?php echo $img_label;?>" href="<?php echo $img_url ?>"><IMG src="<?php echo $img_url_small ?>" width=56 height=56></a>
</li>
Kopieren Sie die media.phtml nun wieder auf Ihren Webserver und aktualisieren Sie im Backend von Magento den Cache. Voilà - die FancyBox ist integriert.
Demo: http://www.demo-store.de/steven-by-steve-madden-pryme-pump.html
Viele Grüße
Johannes Teitge
37 Kommentare to “FancyBox als Alternative zur Lightbox (+ IE8 Fix)”
Kategorien
Letzte Artikel
- Neuer Version von Mxperts Products-Import
- Fehlersuche mit Mage::Log()
- Achtung: ungewolltes ausspionieren Ihres Onlineshops
- Backend-Navigation mit eigenem Logo (Image)
- Personalisierter Browsertitel
- Produkte importieren für Magento 1.4.x
- Kostenfreie Broschüre für Magento-Interessierte und Agenturen
- Sprachpaket | Lokalisierung für Magento ab Version 1.4
- Erweiterung: Mxperts Tooltip
- Schneegestöber für Ihren Magento-Shop
Letzte Kommentare
- ds_1984 bei Erweiterung: Mxperts - NoRegion
- mister_tt bei Erweiterung: Mxperts - NoRegion
- ds_1984 bei Erweiterung: Mxperts - NoRegion
- mister_tt bei Erweiterung: Mxperts - NoRegion
- eren bei Bewegtes Bild (Slide,Fade,Zoom)
- JoernBernd bei Neue Version Mxperts Invoice 1.0.8
- Tobi bei Erweiterung: Mxperts Tooltip
- Bali4you bei Personalisierter Browsertitel
- itintouch bei Magento-Shop nur als Katalog: Teil 4 - Zubehör, UpSelling, Produktoptionen & Layered Nav
- cbatik bei Eigene Layouts in Magento CMS integrieren
Admin Controler Animation Anleitung Backend Bestellung Bilder Blätterkatalog Block CMS Deutsch E-Mail Erweiterung Erweiterungen Extension Frontend Ausgabe Import iPhone jQuery jQuery-Tools Kategorieren importieren Kontaktformular Kurs Layered Navigation Magento 1.3 Magento Update Menü Navigation Produkt-Import Produkte rechte Spalte Scrolling seo Service Shipping-Modul Sprachfile Sprachpaket Tutorial Versandkosten Versenden Version 1.3.0 Video Vorlagen Währungen YouTube Zoom
WP Cumulus Flash tag cloud by Roy Tanck requires Flash Player 9 or better.
Gutem Morgen,
wie ich sehe wart Ihr schon wieder fleissig, da ist der Sonntag morgen für mich schon wieder gerettet. Hatte zwar die Fancybox mit JQeury schon integriert, aber mit den coolen Parametereinstellungen sieht sie jetzt sogar noch besser aus.
Habe als Plus bei mir noch einen kleinen Scroller eingebaut, sodass eine grössere Anzahl von Bildern, das Layout nicht zerschlägt -> zu betrachten hier
http://www.trendshop4u.de/royal-t-shirt
vielen Dank an die Unermüdlichen von Mxperts
Joe
Danke, fürs Dein Feedback - es ist immer schön wenn man unsere Arbeit auch mal in Aktion sehen kann. Dann wissen wir, dass sich der Aufwand, den wir hier betreiben auch lohnt. Leider bist Du einer von wenigen die das auch machen.
Viele Grüße
Johannes Teitge
Endlich gibbets ne wirklich gute alternative su Lightbox!
Ich glaub darauf hab ich schon ewig gewartet ^^
Funktioniert, wie immer wieder einmal Einwandfrei!
Hier mal meine Integration:
http://www.meeko.de/store/index.php/damen/baseball-lsl.html
Marry
Hi Marry,
Toll, sieht gut aus, finde aber die Frau ist ein bischen dick,
um das zu ändern bzw anzupassen gibt es ein Extension, die sich direkt resize nennt. Wenn Du Hilfe bei der Integration brauchst, kannst Du gerne auf mich zukommen.
Gruss
Joe
hast du mal nen link zu?
klar hier ist er
http://www.magentocommerce.com/extension/153/direct-resize
gruss
Joe
das problem war einfach dat ich direkt in der css die imagegröße angepasst hatte, hab ich jetzt mal wieder enfertn. plugin dennoch installiert^^ mal schaun wie dat is
na klasse , schon besser ;-))
kann man dat überhaupt im admin einstellen? habs jetzt mal installiert, im admin bereich bei mir find ich keinerlei einstellungsmöglichkeiten -.-
so ne kurze beschreibung von dir wär jetzt nett ^^ thx
kk integriert ist es jetzt (hätte bei der pluginbeschreibung nur mal bissle runterscrollen müssen *schäm*) , allerdings werden mir meine thumpails net mehr angezeigt oO
siehe hier:
http://www.meeko.de/store/index.php/damen/watch.html
Ist jetzt alles okay ?
net wirklich der macht dat automatische rezise einfach net -.- und so wie dat jetzt is gefälllt mir dat au net wirklich
http://www.magentocommerce.com/extension/153/direct-resize
For use, replace the actuals calls :
$this->resize(150,150);
with :
$this->directResize(150,150,3);
where the options are : (width, height, ratio)
For example, in the file design/frontend/default/default/template/catalog/product/list.phtml
at line 95, you can find : “->resize(x,y)” that you must replace with “->directResize(x,y,r)” with r = ratio of your choice.
Gerade habe ich bemerkt, dass die FancyBox ein Problem mit dem IE8 hat. Dies habe ich nun gefixt und die ZIP-Datei aktualisiert. Also auf alle Fälle die FanyBox aus dem Archiv benutzen, oder in Zeile 30 die 8 mit einer 9 ersetzen.
Viele Grüße
Dscho
eventuell wäre es für einige hilfreich wenn du noch dazu sagst dat du die fancybox.js meinst ^^
Siehe hier: http://www.magenity.de/index.php?page=Thread&threadID=156
Hallo,
prima Sache und überhaupt ist das eine echt gute Seite - dickes Lob. Ich würde gerne den Doppelklick behalten, denn ich finde den orginalen Zoom-Effekt und das Verschieben des Bild-Ausschnittes nett.
Was muss ich ändern um den Doppel-Klick zu behalten?
Grüße
Ramon
Hallo, erst einmal danke fürs Lob. Das mit dem Doppelklick habe ich mir noch nicht angesehen - ich tendiere eher dazu den Zoom zu entfernen. Its nicht so mein Ding, aber die Geschmäcker sidn ja verschieden
Gruß
Johannes Teitge
Hallo,
ich nochmal..
Beim überprüfen des Quelltextes auf Validität ist mir aufgefallen, dass diese Erweiterung nicht validen Quelltext erzeugt.
Der Fehler ist das p-Tag innerhalb des a-Tags.
Legt man allerdings das P-Tag ausserhalb das a-Tags an, so funktioniert die verkleinerung des Bildes auf die richtige Vorschaugröße nicht mehr.
Was könnte man da machen damit es klappt?
Grüße
Hallo,
auch auf die Gefahr hin, dass ich nerve, aber dass Problem mit der W3C-Validität besteht noch.
Hier die Fehlermeldung wenn man eine Produktseite durch den W3C-Validator jagt:
Line 198, Column 30: document type does not allow element “p” here; missing one of “object”, “ins”, “del”, “map”, “button” start-tag
✉
The mentioned element is not allowed to appear in the context in which you’ve placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you’ve forgotten to close a previous element.
One possible cause for this message is that you have attempted to put a block-level element (such as “” or “”) inside an inline element (such as ““, “”, or “”).
Dann folgen noch 30 andere Fehler die auf die selbe Ursache zurück zu führen sind.
Wie zuvor beschrieben liegt es daran, dass das innerhalb vom liegt.
Ich würde ja gerne die FancyBox behalten, aber nicht auf Kosten der Validität.
Leider kann man nicht einfach das entfernen, weil dann die Berechnung des Vorschaubildes nicht mehr geht.
Bin noch am Ball, würde mich aber auch über Unterstützung freuen.
Grüße
Hallo,
ein Paar W3C-Validitätsfehler kann man umgehen indem man
<a rel=”group” title=”" href=”"><img src=”" width=”56″ height=”56″ alt=”"/>
benutzt.
Leider bleibt noch die Sache mit dem .
Grüße
Sorry das wichtige wurde abgeschnitten.
Also:
- IMG -> img
- das img-Tag mit /> schließen
- ein alt-Attribut ins img-Tag einfügen
- width=”56″ height=”56″
Hallo,
ich hab noch ein Problem, vieleicht hat hier jemand dafür eine Lösung. Und zwar habe ich 90% der Artikel mit dem OSC-Importtool importiert. Offensichtlich wird aber nur ein Thumbnail auf der Produktseite erzeugt, wenn man das Bild im Admin-Bereich von Hand hochläd und speichert.
Meine importierten Artikel (4000 Stück) haben kein Thumbnail. Deswegen funktioniert bei diesen Artikeln auch nicht die Fancybox nicht.
Grüße
Ramon
Lösung:
Backup!
1. Bilder ins media/import-Verzeichnis (Dateiendungen klein schreiben)
2. Datei /srv/www/vhosts/aquaportal.de/httpdocs/app/code/core/Mage/Catalog/Model/Product.php
public function addImageToMediaGallery($file, $mediaAttribute=null, $move=false, $exclude=true)
in
public function addImageToMediaGallery($file, $mediaAttribute=null, $move=false, $exclude=false)
ändern.
Sonst werden die Bilder nur Importiert, aber nicht im Frontend angezeigt.
3. csv Datei erstellen z.B. so
store;websites;sku;image;small_image;thumbnail
“default”;”base”;”1234″;”/1234.jpg”;”/1234.jpg”;”/1234.jpg”
Wichtig! der Slash vor dem Dateinamen.
4. System/Import/Profile mit einem entsprechenden Profil importieren
5. Ins Kino gehen, der Import dauert bei 4000 Produkten recht lange, bei mir ca.2Std..
6. Für jedes Produkt wurden die Bilder, die mit dem OSC-Import-Tool importiet wurden deaktiviert und ein neues Bildset angelegt welches aktiviert ist. Im Frontend werden die Thumbnails angezeigt und somit funktioniert auch die wunderbare Fancybox.
Grüße
Ramon
Hallo wcm4u,
vielen Dank für Deine ausführliche Beschreibung. Wenn man sich jetzt noch einen eigenen Adapter als Extension erstellt ist das perfekt. Sonst musst Du bei jedem Magento-Update bangen.
Beipsiel-Config:
<catalog>
<rewrite>
<convert_adapter_product>Mxperts_Import_Model_Convert_Adapter_Productsimport</convert_adapter_product>
</rewrite>
</catalog>
Auch wenn ich mir wiederhole - bitte den letzten Absatz (graue Box) lesen. Wir (Daniel und ich) verbringen wir schon sehr viel Zeit mit http://www.mxperts.de. Außerdem haben wir auch noch einen Job, weshalb wir nicht auf alle Fragen eingehen können. Für kommerzielle Anfragen und Support, bzw. wer die Tutorials individuell angepasst haben möchte, kann Daniel Sasse und mich per E-Mail kontaktieren. http://www.mxperts.de/uber-mxperts/
Du hast natürlich recht, die Frage mit den Thumbnails gehört natürlich in das Magento-Forum. Nun denn, jetzt ist Sie ja gestellt und vieleicht stolpert ja ein mxperts-Fan darüber…
Grüße
Ramon
Hey wcm4u,
frag doch einfach mal die netten Leute von Mxperts, es kostet sicher nicht die Welt …
Klar kannst Du Dich auch im Forum von einem Problem zum nächsten hangeln, und fiebern ob Dir jemand helfen kann oder wird ….. es ist ja deine Zeit, mir persönlich ist es lieber etwas zu bezahlen, die Sache vernünftig gemacht zu bekommen und den Shop am Start zu haben.
Aber jeder setzt ja seine Prioritäten anders oder ….. ????
gruss aus Spanien
Joe
Olà diver66,
Zeit und/oder Budget (ist meist zu knapp bemessen) sind in diesem Fall eher zweitrangig, ich möchte bei diesem Shop-Projekt möglichst viel Magento-KnowHow sammeln und das geht bei mir Erfahrungsgemäß am besten, wenn ich selbst Hand anlege. Natürlich freue ich mich über Hilfe von von jemandem, der schon tiefer im Thema ist, denn das rad muss ja nicht zwei mal erfunden werden.
In diesem Sinne, gut daß es Blogs wie diesen gibt und viel Spaß bei euren Projekten.
Grüße
Ramon
Mal nur eine Frage, warum IE 8 Fix???
Wer den 8er nicht im Modus des 7er laufen lässt ist doch ohnehin Lebensmüde.
http://www.mxperts.de/probleme-mit-internet-explorer-8-schnell-beheben/
Und lebensmüde Geister gibt es genug
Also ich muss die 9 durch eine 8 ersetzen, damit es bei mir im IE8 funktioniert. Geht somit ohne Fix besser als ohne!?!
Why small image (more views) have full size? They dont scale to 56px
Klappt ja soweit alles, nur habe ich folgendes Problem: Wieso werden meine Thumbs jetzt nicht mehr proportional verkleinert? Ich hab alles mögliche versucht, aber die Thumbnails werden nicht mehr proportional verkleinert.
Also ich konnte dank der tollen Anleitung (auch als Laie) die Fancybox ohne probleme implementieren. Sie funktioniert bei den Produktbildern problemlos. Ich möchte sie aber auch weiter im Content nutzen um z.B. ein Produktvideo in ihr abzuspielen. Leider bekommen ich sie nicht aufgerufen.
Nach der Anleitung von desse Homepage müsste es so funktionieren:
This goes to iframe
Also wollte man Google einbinden:
Klicken und über google freu´n
Klappt aber irgendwie nicht. Die Fancybox öffnet sich einfach nicht. Man wird per target=”_blank” auf Google geleitet.
Ich versuche das auf der Artikelseite in die Artikelbeschreibung einzubinden. Wie gesagt die Bilder öffnen in der Box.
Kann mir bitte einer helfen?
Sorry, wusste nicht das HTML erlaubt ist. Also noch mal der Code:
a class=”iframe” href=”http://www.example”>This goes to iframeFür google hier klicken</a
Sorry für das geflame
Gibt es bereits ein Lösung für das Problem mit dem iFrame? Ich habe mittlerweile auch alles ausprobiert. Es ist kein Problem, einen iFrame in einem HTML-Dummy mit den aktuellen Dateien von fancybox.net umzusetzen.
Unter http://anda.brandimago.de/freunde.html habe ich es lediglich geschafft, dass eine mit einer von mir nicht in der Größe einstellbaren leeren Fancybox erscheint.
In Magento funktioniert es bei mir leider nicht. Ich wäre über Hilfe & Tipps dankbar.