About Us Company Blog Integrate shadowbox (alternative of lightbox) 3.0b with Magento
About Us
Company Blog
- 2011 Mobile Internet workshop of Hubei Province
- Our company attended the 2011 Annual Party of WSOA & WHSIA
- Two Drupal websites are delivered by EveBit Digital
- EveBit employees participate "HTML5 Workshop" in Wuhan
- EveBit Digital moves toward CMMI Level 3 Certification
- EveBit becomes IT service provider of China Wanderer
- EveBit participated "Cloud Computing Era of Process Improvement and Outsourcing Policy Announcement of Wuhan"
- EveBit helps clients to mobile!
- EveBit delivered Facebook Application for client
- EveBit attended Shanghai World Expo as outsourcing service provider
- How to upgrade big Magento site to v1.4 or higher version
- Some considerations about Zend Server
- Integration between Zend Studio and SVN
- Can Magento use Amazon S3?
- How to fix a strange image displaying error on Joomla!
Integrate shadowbox (alternative of lightbox) 3.0b with Magento
A new version of shadowbox 3.0b relasesed recently, when I was trying to integrate it with Magento, there were some troubles, so I'd like to write down my steps here to help others may have the same situation like me.
There is a wiki article discribed how to "Adding Shadowbox to Magento", but that's for shadowbox 2, which is outdated I think.
Here comes new steps to add latest shadowbox 3.0b to Magento, if you have any questions, please leave a comment so that I may help you:
Step 1:
Download Shadowbox, or you may download the modifed shadowbox package(because we will need to make some modifications in later steps).
Unpack you downloaded files into js/shadowbox-3.0b/ folder:
Step 2:
Open /app/design/frontend/default/flower/layout/catalog.xml (in my exxample the bold Italic text would different from yours, the same as below) in your favourate text editor, find:
<!-- Mage_Catalog -->
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</template></action>
</reference>
<reference name="head">
<action method="addJs"><script>varien/product.js</script></action>
<action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
Replace is with:
<!-- Mage_Catalog -->
<reference name="root">
<action method="setTemplate"><template>page/2columns-right.phtml</template></action>
</reference>
<reference name="head">
<action method="addJs"><script>varien/product.js</script></action>
<!-- shadowbox javascript -->
<action method="addJs"><script>shadowbox-build-3.0b/shadowbox.js</script></action>
<action method="addItem"><type>js_css</type><name>calendar/calendar-win2k-1.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
<!-- shadowbox css -->
<action method="addItem"><type>js_css</type><name>shadowbox-build-3.0b/shadowbox.css</name><params/><!--<if/><condition>can_load_calendar_js</condition>--></action>
Step 3:
Insert shadowbox initialization code around line 32 (after ?> tag) in /app/design/frontend/default/flower/template/catalog/product/view/media.phtml, after inserting, the code would be like:
* Product media data template
*
* @see Mage_Catalog_Block_Product_View_Media
*/
?>
<script type="text/javascript">
Shadowbox.init();
</script>
There are more parameters can be used in initialization of shadowbox, please refer to its own usage documentation.
Remove all the lines bellow within this file start from 39 to 65:
<p class="product-image-zoom">
<?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')
?>
</p>
<p class="a-center" id="track_hint"><?php echo $this->__('Double click on above image to view full picture') ?></p>
<div class="image-zoom" id="track_outer">
<img id="zoom_out" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_out.gif') ?>" alt="<?php echo $this->__('Zoom Out') ?>" class="btn-zoom-out" />
<div id="track">
<div id="handle"></div>
</div>
<img id="zoom_in" src="<?php echo $this->getSkinUrl('images/slider_btn_zoom_in.gif') ?>" alt="<?php echo $this->__('Zoom In') ?>" class="btn-zoom-in" />
</div>
<script type="text/javascript">
Event.observe(window, 'load', function() {
product_zoom = new Product.Zoom('image', 'track', 'handle', 'zoom_in', 'zoom_out', 'track_hint');
});
</script>
<?php else: ?>
<?php
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($_product->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image')
?>
<?php endif; ?>
After that, add following lines below:
<a href="<?php echo $this->helper('catalog/image')->init($_product, 'image'); ?>"
title="<?php echo $this->htmlEscape($this->getImageLabel()); ?>"
rel="shadowbox[product]">
<img src="<?php echo $this->helper('catalog/image')->init($_product, 'image')->resize(300); ?>"
alt="<?php echo $this->htmlEscape($this->getImageLabel()); ?>"
title="<?php echo $this->htmlEscape($this->getImageLabel()); ?>" /></a>
</p>
<p class="a-center" id="track_hint"><?php echo $this->__('Click on above image to enlarge') ?></p>
And then, scroll down to line 72, you will see something like this:
Now, we need to add some attribute to make shadowbox working with product gallery images, here will be the new lines after adding:
title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"
rel="shadowbox[product]">
<img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(143); ?>"
alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"
title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" />
</a>
Well, all done, if you downloaded my package of shadowbox, all should be working fine now. if not, please take more steps as below:
Step 4:
Right now, if you are using shadowbox library which was downloaded from its own website, you would found that a dark overlay shows up and image does not comes out when you trying to click the product image from the product page at front-end. And if you have firebug, you will see some error message as bellow:
({initialize:(function (config) { ... formatPrice:(function (price) {return formatCurrency(price, this.priceFormat);})}) is not a function
http://your.domain/flower/js/index.php?c=auto&f=,prototype/prototype.js,...
Line 1500
and/or
uncaught exception: Unknown player: img
Line 0
This is because re-declaration of the variable(s) of javascript which is located in /js/varien/product.js, and I can tell you is: this is caused by shadowbox.
The solution is easy, open the file /js/shadowbox-build-3.0b/shadowbox.js, at line around 616, replace:
if((path = path_re.exec(s.src)) != null){
S.path = path[1];
return false;
}
});
with:
if((path = path_re.exec(s.src)) != null){
S.path = path[1].split(",");
S.path = S.path[0]+","+S.path[S.path.length-1];
return false;
}
});
All DONE!
Wish these are useful to you and once again, if you don't know how and where to modify shadowbox file, please download my modifed package.
