关于我们
公司博客
- 2011湖北互联网精英联谊会图片播报
- 我公司出席2011武汉市服务外包行业协会、武汉市软件行业协会联合年会
- 我公司成功为国外客户交付Drupal项目
- 伊锐数码参加“HTML5技术分享沙龙”活动
- 伊锐数码CMMI3认证工作正式启动
- 伊锐数码成为信步东方IT服务提供商
- 公司参加“云计算时代的过程改进及武汉市服务外包政策宣讲会”
- 伊锐数码助力客户走向移动互联网!
- 伊锐数码交付 Facebook 应用程序
- 伊锐数码作为软件外包提供商出席上海世博会活动
- 如何将大型 Magento 站点到 1.4以上版本 (公司英文博客)
- 关于 Zend Server 的一些思考 (公司英文博客)
- 如何整合 Zend Studio 及 SVN (公司英文博客)
- Magento 能支持 Amazon S3 吗?
- 最近解决的一个奇怪的 Joomla! 下图片显示问题
Shadowbox 3.0b 与 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.
