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:
Put shadowbox under Magento js 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:
<catalog_product_view>
<!-- 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:
<catalog_product_view>
<!-- 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:
<?php if ($_product->getImage() != 'no_selection' && $_product->getImage()): ?>
<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:
<p class="product-image-zoom">
<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:
<a href="#" onclick="popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;"><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize(56); ?>" alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>" /></a>
Now, we need to add some attribute to make shadowbox working with product gallery images, here will be the new lines after adding:
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile()) ?>"
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,prototype/validation.js,scriptaculous/builder.js,scriptaculous/effects.js,scriptaculous/dragdrop.js,scriptaculous/controls.js,scriptaculous/slider.js,varien/js.js,varien/form.js,varien/menu.js,mage/translate.js,mage/cookies.js,jquery/jquery-1.2.6.min.js,varien/product.js,shadowbox-build-3.0b/players/shadowbox-img.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:
each(document.getElementsByTagName('script'), function(s){
if((path = path_re.exec(s.src)) != null){
S.path = path[1];
return false;
}
});
with:
each(document.getElementsByTagName('script'), function(s){
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..
Source: http://www.swiftcore.com/
No comments:
Post a Comment