Wenn Sie Ihre Website-Design Online-Handel , visuellen Aspekt Ihrer Website ist das sehr wichtig. Dies ist der erste Eindruck, den Sie machen wollen oder nicht, Ihre potenziellen Käufer auf Ihrer Website fortsetzen oder gehen Sie zu Ihrem Wettbewerber.

Deshalb müssen wir Rechnung tragen: Bildqualität, Geschwindigkeit anzuzeigen, eine einfache Navigation durch Ihre Website ... aber die Präsentation der Bilder von Produktblättern ist ebenfalls wichtig. Zum Beispiel, zeigen ein Bild eines Gegenstandes auf einem schwarzen Hintergrund, wenn Sie darauf klicken, um es zu vergrößern, können Sie aus und haben eine angenehmere Produkt.

Diese Funktion ist in den integrierten Standard Prestashop , aber nicht in Magento . Die Lösung ist (verwenden Sie das Skript lightbox.js können Website siehe Beispiele auf der: Lightbox 2 ).

Ein sehr guter Artikel von Sebastian Enders erklärt, wie Sie auf die Wiki Magento .

Also werde ich weiter unten eine Übersetzung dieser Erklärungen mit einigen Änderungen vor:

Beginnen Sie mit dem Download der ZIP-Version von lightbox und dekomprimieren.

Ich habe es nicht mit einer neueren Version getestet, aber nach Sebastian neueren Versionen sind nicht kompatibel mit der Version des Prototyps von Magento eingesetzt.

Zunächst gehen wir davon aus, dass Magento in einem Ordner auf Ihrem Server installiert ist Magento.

Das Kopieren von Dateien in Magento lightbox

Beginnen Sie, indem Sie ein Verzeichnis in der Lightbox JS Magento-Ordner und kopieren Sie die Datei lightbox.js, dass Sie in dieses Verzeichnis entpackt.

Dann kopieren Sie die Datei in dem Verzeichnis lightbox.css / skin / frontend / default / default / css / Magento.

Erstellen Sie ein Verzeichnis / skin / frontend / default / default / images / lightbox / in Magento und kopieren Sie alle Dateien in diesem Ordner finden Sie in der Bilder-Ordner entpackt lightbox finden.

Ändern CSS-Dateien und js lightbox

Dann öffnen Sie die Datei, die in lightbox.css ist / Magento / skin / frontend / default / default / css und ersetzen:

Hintergrund: transparent url (.. / images / blank.gif) no-repeat;

von:

Hintergrund: transparent url (/ Magento / skin / frontend / default / default / images / lightbox / blank.gif) no-repeat

und:

# PrevLink: hover, # prevLink: visited: hover (background: url (.. / images / prevlabel.gif) Linke 15% no-repeat;)

von:

# PrevLink: hover, # prevLink: visited: hover (background: url (/ Magento / skin / frontend / default / default / images / lightbox / prevlabel.gif) Linke 15% no-repeat;)

und:

# Nextlink: hover, # nextlink: visited: hover (background: url (.. / images / nextlabel.gif) rechte 15% no-repeat;)

von:

# Nextlink: hover, # nextlink: visited: hover (background: url (/ Magento / skin / frontend / default / default / images / lightbox / nextlabel.gif) rechte 15% no-repeat;)

Nun öffnen: / Magento / js / lightbox / lightbox.js, Suchen und Ersetzen:

fileLoadingImage var = "images / loading.gif";

fileBottomNavCloseImage var = "images / closelabel.gif";

von:

fileLoadingImage var = "/ Magento / Haut / frontend / default / default / images / lightbox / loading.gif";

fileBottomNavCloseImage var = "/ Magento / skin / frontend / default / default / images / lightbox / closelabel.gif";


Legen Sie den Aufruf von JavaScript-Dateien und Stylesheets lightbox in Magento

Öffnen Sie die Datei: / magento / app / design / frontend / default / default / layout / page.xml und legen Sie zwischen:

= “head” as= “head” > "Page / html_head" <block type = name = "head" as= "head">
....
</ Block>

die beiden folgenden Zeilen:

<action method="addJs"> <script> lightbox / lightbox.js </ script> </ action>
<action method="addCss"> <stylesheet> css / lightbox.css </ stylesheet> </ action>

Einsetzen einer Aufforderung zum Leuchtkasten Produkten

Öffnen Sie die Datei:

/ Magento / app / design / frontend / default / default / template / catalog / product / view / media.phtml

und ersetzen:

<? Php foreach ($ this-> getGalleryImages () as $ _bild):?>

<li>

<A href = "#" onclick = "popWin ('<? Php echo $ this-> getGalleryUrl ($ _bild )?>',' Galerie ',' scrollbars = yes, width = 200, height = 200, resizable = yes ') return false ">

<Img src = "<? Php echo $ this-> Helfer (" Katalog / Bild ') -> init ($ this-> getProduct (),' Thumbnail ', $ _bild-> getFile ())-> resize (68 , 68);?> "alt =" <? php echo $ this-> htmlEscape ($ _bild-> getLabel ())?> "title =" <? php echo $ this-> htmlEscape ($ _bild-> getLabel ( )) ?>"/>

</ A>

</ Li>

<? Php endforeach;?>

von:

<? Php foreach ($ this-> getGalleryImages () as $ _bild):?>

<li>

<A href = "<? Php echo $ this-> Helfer (" Katalog / Bild ') -> init ($ this-> getProduct (),' Bild ', $ _bild-> getFile ());?>" Rel = "lightbox [Drehung]" title = "<? php echo $ _PRODUCTS-> getName ();?>">

<Img src = "<? Php echo $ this-> Helfer (" Katalog / Bild ') -> init ($ this-> getProduct (),' Thumbnail ', $ _bild-> getFile ())-> resize (68 , 68);?> "width =" 68 "height =" 68 "alt =""/>

</ A>

</ Li>

<? Php endforeach;?>


Denn wenn du jetzt auf ein Produkt in Magento es erscheint auf einem schwarzen Hintergrund mit der lightbox-Funktion groß.

Für eine korrekte Anzeige Ihrer Fotos, die ich schlage vor, Sie beschränken ihre Größe 600 x 600 Pixel.

    Artikel zum gleichen Thema:

  1. Xnview Optimierungen für Fotos mit ihnen in Ihrem Online-Shop Fühlen Sie sich frei Feed Abonnieren Sie den RSS zu verpassen Sie keine article.1ère Schritt: Vorbereiten Fotos für sie in Ihrem E-Commerce-Geschäft haben wir in unseren früheren gesehen Hinweis: Wie Sie Bilder optimieren Datenblätter ...
  2. Wie PrestaShop Vorbereitung für die Erstellung Ihres Online-Shops mit Magento und Fühlen Sie sich frei Feed Abonnieren Sie den RSS zu verpassen Sie keine article.Vous wollen E-Commerce betreiben und legte einen Online-Shop, zwei Möglichkeiten Sie: Du hast bereits ein Geschäft und wollen sich entwickeln Sie Ihre ...
  3. Optimierung von Produkten in Ihrem Foto-Shop mit Gimp Fühlen Sie sich frei, um RSS-Feeds abonnieren zu verpassen Sie keine article.Nous früheren Post gesehen haben, in unserer, gab es eine Notwendigkeit, um Ihre Fotos Nacharbeit der Beladung erhalten eine schnelle Seiten Ihrer eCommerce-Site und so ...

Ein Kommentar, warum nicht verkaufen lassen?

super! es funktioniert sehr gut! Vielen Dank für dieses Tutorial!

Astro 22. Januar 2009 bis 17 h 44 min

Hallo, ich habe ein persönliches Thema auf Magento, können Sie mir das Verfahren. Danke

Mediagratis 6. Januar 2009 um 19 h 18 min

So zeigen Sie HD-Bilder im Vollbildmodus, dass alle Bildschirme PhotoSupplements siehe passt.

http://www.photosupplements.com

Es ist ein Vergleich mit lightbox Website.

Jam 4. Dezember 2008 um 9 min bin 14

Tatsächlich Matt, es funktioniert perfekt mit den Bildern von Ihren Produkten!
Vielen Dank für die gemeinsame Nutzung können die Menschen sehen, was passiert zögerlich im wirklichen Leben!

Magavenue 8. Juli 2008 um 9 Uhr 19 Min.

Ich dachte, installieren es funktioniert ziemlich gut.

Sie können die Demo auf meiner Website sehen Magento
http://www.website1service.com

Nachteile durch die Aufmerksamkeit auf "and''not, Fehler zu machen

Matt 8. Juli 2008 2 h 45 min

Kommentar schreiben