When you design your site online commerce , the visual aspect of your site is very important. This is the first impression that will make you want to or not your prospective buyer to continue on your site or go to your competitor.
We must therefore take into account: image quality, speed display, easy navigation through your site ... but the presentation of pictures of product sheets is also important. For example, show a picture of an item on a black background, when you click on it to enlarge it, lets make out and have a more pleasing product.
This function is integrated as standard in Prestashop , but not in Magento . The solution is to use the script lightbox.js (you can see examples on the website: Lightbox 2 ).
A very good article by Sebastian Enders explains how to do on the wiki Magento .
So I will provide below a translation of those explanations with some modifications:
Start by downloading the zipped version of lightbox and decompress.
I have not tested it with a newer version, but after Sebastian newer versions are not compatible with the version of prototype used by Magento.
To begin we assume that Magento is installed in a folder on your server Magento.
Copying files lightbox in Magento
Start by creating a directory in the lightbox js Magento folder and copy the file lightbox.js that you unpacked in this directory.
Then copy the file in the directory lightbox.css / skin / frontend / default / default / css / Magento.
Create a directory / skin / frontend / default / default / images / lightbox / in Magento and copy all files in it that you find in the images folder of unzipped folder lightbox.
Changing css files and js lightbox
Then open the file that is in lightbox.css / magento / skin / frontend / default / default / css and replace:
background: transparent url (.. / images / blank.gif) no-repeat;
by:
background: transparent url (/ magento / skin / frontend / default / default / images / lightbox / blank.gif) no-repeat
and:
PrevLink #: hover, # prevLink: visited: hover (Background: url (.. / images / prevlabel.gif) left 15% no-repeat;)
by:
# PrevLink: hover, # prevLink: visited: hover (background: url (/ magento / skin / frontend / default / default / images / lightbox / prevlabel.gif) left 15% no-repeat;)
and:
# Nextlink: hover, # nextlink: visited: hover (background: url (.. / images / nextlabel.gif) right 15% no-repeat;)
by:
# Nextlink: hover, # nextlink: visited: hover (background: url (/ magento / skin / frontend / default / default / images / lightbox / nextlabel.gif) right 15% no-repeat;)
Now open: / magento / js / lightbox / lightbox.js, search and replace:
fileLoadingImage var = "images / loading.gif";
fileBottomNavCloseImage var = "images / closelabel.gif";
by:
fileLoadingImage var = "/ magento / skin / frontend / default / default / images / lightbox / loading.gif";
fileBottomNavCloseImage var = "/ magento / skin / frontend / default / default / images / lightbox / closelabel.gif";
Insert the call to javascript files and stylesheets in lightbox in Magento
Open the file: / magento / app / Design / frontend / default / default / layout / page.xml and insert between:
= “head” as= “head” > "page/html_head" <block type = name = "head" as= "head">
....
</ Block>
the two following lines:
<action method="addJs"> <script> lightbox / lightbox.js </ script> </ action>
<action method="addCss"> <stylesheet> css / lightbox.css </ stylesheet> </ action>
Inserting a call to lightbox items
Open the file:
/ Magento / app / design / frontend / default / default / template / catalog / product / view / media.phtml
and replace:
<? Php foreach ($ this-> getGalleryImages () as $ _image):?>
<li>
<A href = "#" onclick = "popWin ('<? Php echo $ this-> getGalleryUrl ($ _image)?>', 'Gallery', 'scrollbars = yes, width = 200, height = 200, resizable = yes ') return false ">
<Img src = "<? Php echo $ this-> helper ('catalog / image') -> init ($ this-> getProduct (), 'thumbnail', $ _image-> getFile ())-> resize (68 , 68);?> "alt =" <? php echo $ this-> htmlEscape ($ _image-> getLabel ())?> "title =" <? php echo $ this-> htmlEscape ($ _image-> getLabel ( )) ?>"/>
</ A>
</ Li>
<? Php endforeach;?>
by:
<? Php foreach ($ this-> getGalleryImages () as $ _image):?>
<li>
<A href = "<? Php echo $ this-> helper ('catalog / image') -> init ($ this-> getProduct (), 'image', $ _image-> getFile ());?>" Rel = "lightbox [rotation]" title = "<? php echo $ _PRODUCTS-> getName ();?>">
<Img src = "<? Php echo $ this-> helper ('catalog / image') -> init ($ this-> getProduct (), 'thumbnail', $ _image-> getFile ())-> resize (68 , 68);?> "width =" 68 "height =" 68 "alt =""/>
</ A>
</ Li>
<? Php endforeach;?>
That if you now click on a product in Magento it will appear great on a black background with the lightbox function.
For a correct display of your photos I suggest you limit their size to 600 x 600 pixels.
- Optimizations Xnview for photos with them in your online store Feel free to sign up to RSS feeds for not missing any article.1ère Step: Preparation of photos for them in your ecommerce store, we have seen in our previous Note: How to optimize pictures datasheets ...
- How to prepare for creating your online store with Magento and PrestaShop Feel free to subscribe to the RSS feed to never miss any article.Vous want to engage in ecommerce and put an online store, two possibilities you: You already have a business and want to develop your ...
- Photo enhancement items from your shop with Gimp Please feel free to subscribe to RSS feed to never miss any article.Nous saw in our last post, he was required to rework your photographs for quick loading of pages of your ecommerce site and so ...
super! it works very well! Thank you for this tutorial!
Hello, I have a personal theme on magento, can you give me the procedure. Thank you
To display HD pictures in full screen that fits all screens PhotoSupplements see.
http://www.photosupplements.com
There is a comparison site with lightbox.
Indeed Matt, it works perfectly with the pictures of your items!
Thank you for sharing, people can see hesitant what happens in real life!
I just install it works pretty well.
you can see the demo on my site Magento
http://www.website1service.com
cons by attention to "" and''not to make mistakes