Wie zur Verbesserung der Darstellung seiner Bilder in der Lightbox mit Magento

Wenn Sie Ihre Website-Design Online-Handel, der visuelle Aspekt Ihrer Website ist sehr wichtig. Dies ist der erste Eindruck, den Sie machen wollen oder nicht Ihre potentiellen Käufer auf Ihrer Website weiter oder gehen Sie zu Ihrem Konkurrenten werden.

Deshalb müssen wir berücksichtigen: Bildqualität, Schnelligkeit Display, einfache Navigation durch Ihre Website ... aber die Präsentation von Bildern von Produktblättern ist ebenfalls wichtig. Zum Beispiel, zeigen ein Bild von einem Punkt auf einem schwarzen Hintergrund, wenn Sie darauf klicken, um es zu vergrößern, können ausmachen und haben ein angenehmeres Produkt.

Diese Funktion ist standardmäßig in Prestashop integriert, aber nicht in Magento. Die Lösung wird an das Skript lightbox.js verwenden (Sie können Beispiele auf dieser Seite finden Sie unter: Lightbox 2).

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

So will ich dir geben unten eine Übersetzung dieser Ausführungen mit einigen Änderungen:

Beginnen Sie mit dem Download der ZIP-Version von Lightbox und entpacken.

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

So beginnen wir davon ausgehen, dass Magento installiert ist Magento in einen Ordner auf Ihrem Server.

Das Kopieren von Dateien in der Lightbox Magento

Erstellen Sie zunächst ein Verzeichnis in der Lightbox JS Magento-Ordner und kopieren Sie die Datei entpacken lightbox.js Sie in diesem Verzeichnis.

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 / innen in Magento und kopieren Sie alle Dateien finden Sie in der Bilder-Ordner des entpackten Ordner lightbox.

Ändern css und js-Dateien zu Lightbox

Dann öffnen Sie die Datei in lightbox.css / magento / skin / frontend / default / default / css und ersetzen zu finden:

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

von:

background: url (/ magento / skin / frontend / default / default / images / lightbox / blank.gif) no-repeat

und:

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

von:

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

und:

# NextLink: hover, # nextLink: visited: (Hintergrund: hover url (.. / images / nextlabel.gif) rechte 15% no-repeat;)

von:

# NextLink: hover, # nextLink: visited: (Hintergrund: hover url (/ magento / skin / frontend / default / default / images / lightbox / nextlabel.gif) rechte 15% no-repeat;)

Dann öffnen: / magento / js / lightbox / lightbox.js, finden und ersetzen:

fileLoadingImage var = "images / loading.gif";

fileBottomNavCloseImage var = "images / closelabel.gif";

von:

fileLoadingImage var = "/ magento / skin / 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 Leuchtkasten in Magento

Öffnen Sie die Datei: / magento / app / design / frontend / default / default / Layout / page.xml und fügen Sie zwischen:

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

die 2 folgenden Zeilen:

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

Einsetzen der Anruf in einem Leuchtkasten Lieferung

Öffnen Sie die Datei:

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

und zu ersetzen:

von:

Das heißt, wenn du jetzt auf ein Produkt in Magento angezeigt wird groß auf einem schwarzen Hintergrund mit den Leuchtkasten-Funktion.

Für eine korrekte Anzeige Ihrer Bilder, die ich Ihnen raten, die der Größe 600 x 600 Pixel zu begrenzen.

Artikel zum selben Thema:

1. Optimierungen Fotos mit XnView für die Integration von Ihren Online-Shop einfach auf den RSS-Feed abonnieren verpasse nie article.1ère Schritt: Vorbereitung der Fotos in Ihrem E-Commerce-Shop sind, haben wir gesehen, unsere bisherigen Hinweis: Wie optimieren Sie die Bildkarten Produkte ...
2. Wie für die Erstellung Ihrer Online-Shop mit Magento oder Prestashop Feel free to subscribe to RSS vorbereitet Futtermitteln zu vermeiden, fehlt jede article.Vous wollen in E-Commerce betreiben und einen Online-Shop, 2 Möglichkeiten setzen Sie: Sie haben bereits ein Unternehmen und entwickeln möchten Ihre ...
3. Optimieren von Fotos von Produkten in Ihrem Geschäft mit Gimp Feel free to RSS-Feed abonnieren zu vermeiden, fehlt jede article.Nous haben in unserer früheren Post gesehen, es sei notwendig, um Ihre Fotos Nacharbeit, schnell geladen werden Seiten des E-Commerce-Website und damit ...