When designing your website online business , the visual aspect of your site is very important. This is the first impression that will make you want or not your prospective buyer to continue on your site or to go to your competitor.
We must therefore consider: image quality, speed display, easy navigation through your site ... but the presentation of pictures of your product sheets is also important. For example, to display a picture of an item on a black background, when you click on it to enlarge, can 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 at: Lightbox 2 ).
A very good article by Sebastian Enders explains how on the Magento wiki .
So I'll give you below a translation of these explanations with some modifications:
Start by downloading the zipped version of lightbox and unwind.
I have not tested with a newer version, but according to Sebastian newer versions are not compatible with the version of the prototype used by Magento.
To begin with we assume that Magento is Magento installed in a folder on your server.
Copying files in Magento lightbox
First create a directory in the lightbox js file Magento lightbox.js and copy the file you just unzip in this directory.
Then copy the file lightbox.css in the / skin / frontend / default / default / css / Magento.
Create a directory / skin / frontend / default / default / images / lightbox / Magento and copy all files in that folder you will find images in the folder unzipped 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;}
Then 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 a call to javascript files and style sheet in Magento lightbox
Open the file: / magento / app / design / frontend / default / default / layout / page.xml and insert between:
= “head” as= “head” > <block "page/html_head" name = type = "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>
Insertion of the call for a lightbox in product
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 $ _product-> 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 large on a black background with the civil Lightbox.
For a correct display of photos I advise you to limit their size to 600 x 600 pixels.
- Optimizations photos with Xnview to integrate them into your online store Please sign up for RSS feeds do not miss article.1ère Step: Preparation of photos to incorporate into your ecommerce store we saw in our previous Ticket: How to optimize photos product sheets ...
- How to prepare for creating your online store with Magento or Prestashop Feel free to sign up for RSS to not miss any article.Vous want to engage in and develop an ecommerce online store, two possibilities you: You already have a business and want to develop your ...
- How to optimize the pictures of your ecommerce product info One of the tedious work when designing an ecommerce site is that for the same photo of a product you need to resize it and decline in different sizes. The software will then use this size of picture to display thumbnail ...
in version 1.5.1.0 that no longer exists: / magento / app / design / frontend / default / default / layout / page.xml
and it could not: / magento / app / design / frontend / default / default / template / catalog / product / view / media.phtml
How so? thank you
On the latest version of Magento files path has changed, someone would have an updated version of this tutorial?
great! it works very well! Thank you for this tutorial!
Hello, I have a personal theme of magento, can you tell me what to do. Thank you
For displaying HD pictures in full screen that fits all screens PhotoSupplements see.
http://www.photosupplements.com
There is a comparison site with the lightbox.