How to add Lightbox2 in magento?

Answer

"Lightbox is a simple, unobtrusive script used to overlay images on the current page. It's a
snap to setup and works on all modern browsers."

Go and grab a copy of Lightbox2 from http://www.lokeshdhakar.com/projects/
lightbox2/.

 

1. We have the Lightbox2 archive that we downloaded from
http://www.lokeshdhakar.com/projects/lightbox2/. Let's extract it.
2. Open /skin/frontend/YOUR_PACKAGE/YOUR_THEME/js/ and create a
new directory named lightbox (in my case, it's /skin/frontend/default/
default/js/) and put lightbox.js in this directory.
3. Open lightbox.js file in your editor and replace the last line with the
following code:
var myLightbox;
document.observe('dom:loaded', function () { myLightbox = new
Lightbox(); });
4. Find these two lines in lightbox.js and replace them with the following
highlighted code:
fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',
fileLoadingImage: SKIN_URL + 'images/lightbox/loading.gif',
fileBottomNavCloseImage: SKIN_URL + 'images/lightbox/closelabel.
gif',
5. Now copy lightbox.css to the/skin/frontend/YOUR_PACKAGE/YOUR_THEME/
css/ directory (in my case, it's /skin/frontend/default/default/css/).
6. Let's add the required images. Find and open the/skin/frontend/YOUR_
PACKAGE/YOUR_THEME/images directory (in most cases, it would be /skin/
frontend/default/default/images/).
7. Create a new directory named lightbox and paste all the images from the lightbox
into it.
8. We shall modify the lightbox.css file now to load UI images correctly.
9. Open: /skin/frontend/default/default/css/lightbox.css and then
apply these find and replace as specified:
Replace:
background: transparent url(../images/blank.gif) no-repeat;

With:
background: transparent url(../images/lightbox/blank.gif) norepeat;
Replace:
#prevLink:hover, #prevLink:visited:hover { background: url(../
images/prevlabel.gif) left 15% no-repeat; }
With:
#prevLink:hover, #prevLink:visited:hover { background: url(../
images/lightbox/prevlabel.gif) left 15% no-repeat; }
Replace:
#nextLink:hover, #nextLink:visited:hover { background: url(../
images/nextlabel.gif) right 15% no-repeat; }
With:
#nextLink:hover, #nextLink:visited:hover { background: url(../
images/lightbox/nextlabel.gif) right 15% no-repeat; }
10. Okay, let's modify the template files now. Open /app/design/frontend/YOUR_
PACKAGE/YOUR_THEME/template/page/html/head.phtml.
11. Find this code snippet and replace it with the following highlighted code:
<!--[if lt IE 7]>
<script type="text/javascript"//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')-
>getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')-
>getJsUrl('spacer.gif') ?>';
//]]>
</script>
<![endif]-->

Replace it with:
<script type="text/javascript">
var SKIN_URL = '<?php echo $this->helper('core/js')-
>getJsSkinUrl('') ?>';
</script>
<!--[if lt IE 7]>
<script type="text/javascript">
//<![CDATA[
var BLANK_URL = '<?php echo $this->helper('core/js')-
>getJsUrl('blank.html') ?>';
var BLANK_IMG = '<?php echo $this->helper('core/js')-
>getJsUrl('spacer.gif') ?>';
//]]>
</script>
<![endif]-->

12. Notice that we added another script block to declare our new SKIN_URL variable.
13. We have to add the lightbox2.js and CSS files in Magento template's head
section. We can do this by modifying the page.xml file from /app/design/
frontend/YOUR_PACKAGE/YOUR_THEME/layout/ directory. Find and open
page.xml file and look for the following line:
<action method="addJs"><script>mage/cookies.js</script></action>
14. Then add the following lines before it. In my case, it's at line number 50.
<!--lightbox specific-->
<action method="addItem">
<type>skin_js</type><name>js/lightbox.js</name>
</action>
<action method="addCss">
<stylesheet>css/lightbox.css</stylesheet>
</action>
<!--end lightbox specific-->
15. It's okay now to edit the /app/design/frontend/bases/default/template/
catalog/product/view/media.phtml file. Open it and look for the
following code:
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_
image) ?>', 'gallery', 'scrollbars=yes,width=200,height=200,resiza
ble=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; ?>

Replace it with:
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="<?php echo $this->helper('catalog/image')-
>init($this->getProduct(), 'image', $_image->getFile())-
>resize(640, 480); ?>" 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; ?>

16. In media.phtml you should replace:
<?php
$_img = '<img id="image" src="'.$this->helper('catalog/image')-
>init($_product, 'image').'" alt="'.$this->htmlEscape($this-
>getImageLabel()).'" title="'.$this->htmlEscape($this-
>getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image')
?>
With:
<?php
$_img = '<img id="image" src="'.$this->helper('catalog/
image')->init($_product, 'image').'" alt="'.$this-
>htmlEscape($this->getImageLabel()).'" title="'.$this-
>htmlEscape($this->getImageLabel()).'" ondblclick="myLightbox.
start($('imageLink'));"/>';
echo $_helper->productAttribute($_product, $_img, 'image')
?>
<a href="<?php echo $this->helper('catalog/image')->init($_
product, 'image'); ?>" id="imageLink" rel="lightbox"></a>
Next find:
<script type="text/javascript">
Event.observe(window, 'load', function() {
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_
in', 'zoom_out', 'track_hint');
});
</script>

Replace with:
<script type="text/javascript">
Event.observe(window, 'load', function() {
product_zoom = new Product.Zoom('image', 'track', 'handle',
'zoom_in', 'zoom_out', 'track_hint');
Event.stopObserving($('image'), 'dblclick', null);
});
</script>
17. It's time to refresh the cache (if it's enabled). Log in to Admin Dashboard then
point your browser to System | Cache Management and be sure to change
All cache settings from No change to REFRESH and then click the Images
Cache—Clear button.
18. Navigate to any product details page now and try to click on any of the more images
or double-click on the product main image to see the lightbox2 in action!

All magento Questions

Ask your interview questions on magento

Write Your comment or Questions if you want the answers on magento from magento Experts
Name* :
Email Id* :
Mob no* :
Question
Or
Comment* :
 





Disclimer: PCDS.CO.IN not responsible for any content, information, data or any feature of website. If you are using this website then its your own responsibility to understand the content of the website

--------- Tutorials ---