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