Adding Lytebox to Magento (product image viewer, tooltips, etc)
The instructions below were written for Magento 1.6.0.0 Community Edition and 1.4.2.0 Enterprise using Lytebox v5.2. I imagine that the steps are similar for later/newer versions, but you may have to tinker around a little bit to get things working if the below instructions don’t work out for your particular version. Please note that these instructions are assuming that you are using the base theme, so if you are not then you will need to update the paths below accordingly.
Also note that the WYSIWYG editor in Magento will not respect the data-title, data-description, data-tip, and data-lyte-options attributes (in fact it will strip them out). As a result this is written to use the HTML4 compliant REV and TITLE attributes.
If you don’t care about validation and wish to use the new HTML5 compatible data-* attributes (which gives you access to data-description), then you will have to disable the WYSIWYG editor (System→Configuration→Content Management), assuming you plan on using the built-in CMS to edit pages that include Lytebox enabled links.
Having said that...
STEP 1: Download Lytebox |
You can obtain the latest version of Lytebox at http://lytebox.com. If you wish to stay informed of new Lytebox releases then it’s recommended that you sign up for the mailing list.
STEP 2: Install Lytebox Source Files |
Extract the contents of the lytebox*.zip file to <root magento directory>/js/lytebox. Your directory structure should look something like this:
js/lytebox/ -- images/ ------- blank.gif ------- close_black.png ------- etc, etc -- lytebox.css -- lytebox.js
By placing Lytebox in the public js directory, all themes will have it available to them, and you can use Lytebox (for tooltips, html content, etc) outside of just the product catalog page if you so choose. Note that you do not have to move around images or modify the .css file as you normally would with other viewers as long as you keep the above directory structure.
STEP 3: Enable Lytebox for Magento |
Now you will need to add references to lytebox.js and lytebox.css to page.xml for the particular theme you are using, which will make it available globally on any page in your store. If you are using the default (base) theme, then that would be:
app/design/frontend/base/default/layout/page.xml
You’ll need to add two entries in the ‘<block type=”page/html_head” name=”head” as=”head”>’ section:
<action method="addItem"><type>js</type><script>lytebox/lytebox.js</script></action> <action method="addItem"><type>js_css</type><name>lytebox/lytebox.css</name><params/></action>
STEP 4: Active Lytebox for Product Viewer |
Now for the good stuff. If you dislike the default viewer style used for your products (zoom + popup window), then fortunately it’s not too difficult to modify Magento to use Lytebox instead. Open the following file in your editor of choice (be sure to create a backup copy just in case you need to revert back!):
app/design/frontend/base/default/template/catalog/product/view/media.phtml
Replace ALL the code in media.phtml with the following:
- <?php
- $_product = $this->getProduct();
- $_helper = $this->helper('catalog/output');
- // Build our image tag, which will be wrapped with a Lytebox enabled link
- $_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(300).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
- // Now we activate the link via class="lytebox". Note that all the product images are grouped
- // via rev="group:product", which means that customers will be able to navigate through the image
- // set regardless of which one they click first.
- // If you don't want product images grouped, then simply remove the rev attribute altogether.
- echo '<a href="'.$this->helper('catalog/image')->init($_product, 'image').'" class="lytebox" title="'.$this->htmlEscape($this->getImageLabel()).'" rev="group:product">';
- echo $_helper->productAttribute($_product, $_img, 'image');
- echo '</a>';
- ?>
- <?php if (count($this->getGalleryImages()) > 0): ?>
- <div class="more-views">
- <br />
- <h2><?php echo $this->__('More Views') ?></h2>
- // Here we do the same thing we did with the main product image, which is to Lytebox enable the links.
- // Note again that each image is grouped via rev="group:product".
- <?php foreach ($this->getGalleryImages() as $_image): ?>
- <a href="<?php echo $_image->getUrl(); ?>" class="lytebox" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" rev="group:product"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" width="56" height="56" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
- <?php endforeach; ?>
- </div>
- <?php endif; ?>
That should be it. Clear your cache (System → Cache Management) and click on a product in your front-end store. The image should appear in the Lytebox viewer and you should be able to navigate back and forth if you have multiple images.
LYTEBOX EXAMPLES AND DOCUMENTATION |
Lytebox can do a whole lot more than just preview images in your product catalog. It comes with build-in support for previewing HTML content and embedded media, tooltips (lytetip feature), and a host of library functions ($lb.ajax, $lb.validate, etc.). Visit the documentation page for a full rundown of features, examples, and implementation details:
