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 this page: Lightbox 2).
A very good article by Sebastian Enders explains how on the Magento wiki.
So I will give you 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 Magento into a folder on your server.
Copying files in lightbox Magento
Start by creating a directory in the lightbox js Magento folder and copy the file lightbox.js you just unpack 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 inside and copy all the files you find in the images folder of the unzipped folder lightbox.
Changing css and js files to lightbox
Then open the file lightbox.css located in / magento / skin / frontend / default / default / css and replace:
background: 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;)
Then open: / magento / js / lightbox / lightbox.js, find 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 stylesheet lightbox in Magento
Open the file: / magento / app / design / frontend / default / default / layout / page.xml and insert between:
= “head” as= “head” > <block "page/html_head" type = name = "head" as= "head">
....
</ block>
the 2 following lines:
<action method="addJs"> <script> lightbox / lightbox.js </ script> </ action>
<action method="addCss"> <stylesheet> css / lightbox.css </ stylesheet> </ action>
Inserting the call in a lightbox Saver Shipping
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 is displayed large on a black background with the lightbox function.
For a correct display of your pictures I advise you to limit their size to 600 x 600 pixels.
- Optimizations photos with XnView for integrating your online store Feel free to subscribe to the RSS feed to never miss any article.1ère Step: Preparation of photos to include in your ecommerce store, we have seen in our previous Note: How to optimize the picture cards products ...
- How to prepare for creating your online store with Magento or Prestashop Feel free to subscribe to RSS feed to avoid missing any article.Vous want to engage in ecommerce and put an online store, 2 possibilities you: You already have a business and want to develop your ...
- Optimizing photos of items in your shop with Gimp Feel free to subscribe to RSS feed to avoid missing any article.Nous have seen in our previous post, it was necessary to rework your photographs, for fast loading of pages of your ecommerce website and thus ...
great! 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 view photos in full HD screen that fits all screens PhotoSupplements see.
http://www.photosupplements.com
There on the site a comparison with the 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
by cons attention to "" and''not to mislead