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 to or not your prospective buyer to continue on your site or 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 pages is also important. For example, to display a picture of an item on a black background, when clicked to enlarge it, lets bring it 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 will provide below a translation of these explanations with some modifications:
Start by downloading the zipped version of lightbox and decompress.
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 start we assume that Magento is installed in a folder Magento on your server.
Copy files in Magento lightbox
First create a directory in the lightbox js file Magento lightbox.js and copy the file that you unpacked 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 in it and copy all the files you find in the lightbox images in the folder unzipped.
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 the 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 in large letters on a black background with the lightbox function.
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 Feel free to sign up for RSS feeds do not miss any article.1ère Step: Preparing images for integration into your ecommerce shop we saw in our previous Ticket: How to optimize photos for product info ...
- How to prepare to create your online store with Magento or Prestashop Feel free to sign up for RSS feeds do you want to miss any article.Vous launch in ecommerce and implement an online store, two options are available you: You already have a business and want to develop your ...
- How to optimize photos for your ecommerce product info One of tedious work when designing an ecommerce site is that for the same photo of a product you must resize latter and decline in different sizes. The software will then use that size of photo to display thumbnail ...
Items on the same subject:
Keywords:
e-commerce , indeed , black background , lightbox , Magento , pictures
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 great! Thank you for this tutorial!
Hello, I have a personal theme of magento, can you give me the procedure. 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.