Hello, guys. My website used magento as a framework.
At the beginning, when i installed
easy lightbox plug-in and
colorswatch+zoom plug-in to my website, my website got kinds of problems. I like the effect of both so i decided to merge these two plug-ins.
Before i edited my files, backuped it.
Step 1, stop the effect of lightbox. Because both of them are achieved by modifying the media.phtml, so i have to stop one of them which is easier to carry out.
Edit app/design/frontend/default/default/layout/easylightbox.xml
Delete below in review_product_list and catalog_product_view
<reference name="product.info.media">
<action method="setTemplate"
ifconfig="easy_lightbox/general/enabled">
<template>easylightbox/media.phtml</template>
</action>
</reference>
Now the website will show the effect of the colorswatch+zoom but not show the effect of the lightbox.
Step 2, Add some codes to colorswatch+zoom's media.phtml. Add the frontend core code of easy lightbox to colorswatch+zoom's media.phtml. The html control of Easy lightbox uses "rel=[lightbox]" attribute to calling the relevant js function.
Edited app/design/frontend/default/default/template/smdzoom/media.phtml
To declare the lightbox var.
Insert
$_lightboxConfig = Mage::getStoreConfig('easy_lightbox/general');
After
$imageResizeHeight = Mage::getStoreConfig('smdesign_colorswatch/zoom/container_height')
*Mage::getStoreConfig('smdesign_colorswatch/zoom/zoom_ratio');
Add Js obj so the lightbox can call relevant js function.
Insert
function initLightbox(){
new Lightbox({
fileLoadingImage: 'getSkinUrl('images/lightbox/loading.gif') ?>',
fileBottomNavCloseImage: 'getSkinUrl('images/lightbox/closelabel.gif') ?>',
overlayOpacity: ,
animate: 0)? "1":"0"); ?>,
resizeSpeed: ,
borderSize: ,
labelImage: '',
labelOf: ''
});
}
After
new SMDZoom('image', {......});
Set up related lighbox image size.
Insert
<?php
/************lighbox*************/
/* Popup Image Size */
if (strstr($_lightboxConfig['popupImageSize'], '_')) {
$popupImageSize = explode('_', $_lightboxConfig['popupImageSize'], 2);
} else {
$popupImageSize = array(0, 0);
}
/* Additional Images Size */
if (strstr($_lightboxConfig['additionalImageSize'], '_')) {
$additionalImageSize = explode('_', $_lightboxConfig['additionalImageSize'], 2);
} else {
$additionalImageSize = array(60, 60);
}
$image = $this->helper('catalog/image')->init($_product, 'image');
if ($popupImageSize[0] > 0) {
$image = $this->helper('catalog/image')->init($_product, 'image')->resize($popupImageSize[0], $popupImageSize[1]);
}
/****************************/
?>
<a href="<?php echo $image; ?>" rel="lightbox[rotation]" title="Orginal Views" onclick="return false;" id="orginal">Orginal Views</a>
After
<?php else: ?>
<p>
<?php
$_img = '<img src="'.$this->helper('catalog/image')->init($_product, 'image')->resize(265).'" alt="'.$this->htmlEscape($this->getImageLabel()).'" title="'.$this->htmlEscape($this->getImageLabel()).'" />';
echo $_helper->productAttribute($_product, $_img, 'image');
?>
</p>
<?php endif; ?>
To add the small images link and set them to hidden.
Insert
<li style="display:none;">
<a href="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($popupImageSize[0], $popupImageSize[1]); ?>"
rel="lightbox[rotation]"
title=""
onclick="return false;"
><img src="<?php echo $this->helper('catalog/image')->init($this->getProduct(), 'thumbnail', $_image->getFile())->resize($additionalImageSize[0], $additionalImageSize[1]); ?>" alt="<?php echo $subtitle; ?>"
/></a>
</li>
After
<li>
<a href="#" onclick="<?php if (Mage::getStoreConfig('smdesign_colorswatch/zoom/more_view_change_main_image')) : ?> SMDesignColorswatchPreloader.showPerload($('image')); $('image').src = '<?php
if (Mage::getStoreConfig('smdesign_colorswatch/zoom/image_size_type') == 2) :
echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile())->resize($imageResizeWidth, $imageResizeHeight) ;
else :
echo $this->helper('catalog/image')->init($this->getProduct(), 'image', $_image->getFile());
endif;
?>?rand=' + Math.random();<?php else : ?> popWin('<?php echo $this->getGalleryUrl($_image) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); <?php endif; ?>return false;" title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"><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>
</li>
Now when i refresh my website and click "orginal view", it will show the lightbox effect. But when i click the color swatch button, the lightbox image will not change. Then the next step is to edit the action function.
Step 3, Edit the colorswatch+zoom core code. When i click the color swatch button, the images of lightbox are also changing.
Edit app/code/community/SMDesign/ColorswatchProductView/controllers/GetController.php
Insert
$_lightboxConfig = Mage::getStoreConfig('easy_lightbox/general');
/* Popup Image Size */
if (strstr($_lightboxConfig['popupImageSize'], '_')) {
$popupImageSize = explode('_', $_lightboxConfig['popupImageSize'], 2);
} else {
$popupImageSize = array(0, 0);
}
After
if (!($_product->getImage() != 'no_selection' && $_product->getImage())) {
/* use detected dimension from js */
$imgElementWidth = $this->getRequest()->getParam('img_width', null);
$imgElementHeight = $this->getRequest()->getParam('img_height', null);
echo "SMDesignColorswatchPreloader.removePerload($$('.product-image img')[0]);\n";
}
To declare another array to store product information about lightbox showing.
Insert
$images_lb = array();
After
$images = array();
Insert
array_unshift($images_lb, array(
'label'=> $_image->getLabel(),
'thumb'=> sprintf(Mage::helper('catalog/image')->init($simpleProduct, 'image', $_image->getFile())->resize(56)),
'lightbox'=> sprintf(Mage::helper('catalog/image')->init($simpleProduct, 'image', $_image->getFile())->resize($popupImageSize[0], $popupImageSize[1]))
));
After
array_unshift($images, array(
'id'=> $_image->getId(),
'product_id'=> $simpleProduct->getId(),
'product'=> $simpleProduct,
'label'=> $_image->getLabel(),
'image'=> sprintf(Mage::helper('catalog/image')->init($simpleProduct, 'image', $_image->getFile())->resize($imgElementWidth, $imgElementHeight)),
'thumb'=> sprintf(Mage::helper('catalog/image')->init($simpleProduct, 'image', $_image->getFile())->resize(56))
));
Insert
array_push($images_lb, array(
'label'=> $_image->getLabel(),
'thumb'=> sprintf(Mage::helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(56)),
'lightbox'=> sprintf(Mage::helper('catalog/image')->init($simpleProduct, 'image', $_image->getFile())->resize($popupImageSize[0], $popupImageSize[1]))
));
After
array_push($images, array(
'id'=> $_image->getId(),
'product_id'=> $simpleProduct->getId(),
'product'=> $simpleProduct,
'label'=> $_image->getLabel(),
'image'=> sprintf(Mage::helper('catalog/image')->init($simpleProduct, 'image', $_image->getFile())->resize($imgElementWidth, $imgElementHeight)),
'thumb'=> sprintf(Mage::helper('catalog/image')->init($simpleProduct, 'image', $_image->getFile())->resize(56))
));
Insert
$images_lb[] = array(
'thumb'=> sprintf(Mage::helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(56)),
'label'=> $_image->getLabel(),
'lightbox'=> sprintf(Mage::helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize($popupImageSize[0], $popupImageSize[1]))
);
After
$images[] = array(
'image'=> sprintf(Mage::helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize($imgElementWidth, $imgElementHeight)),
'thumb'=> sprintf(Mage::helper('catalog/image')->init($_product, 'thumbnail', $_image->getFile())->resize(56)),
'label'=> $_image->getLabel(),
'id'=> $_image->getId(),
'product_id'=> $productId,
'product'=> $_product
);
Insert
$('orginal').href='<?php echo $images_lb[0]['lightbox']?>?rand=' + Math.random();
After
$$('.product-img-box .product-image img')[0].src = '<?php echo $images[0]['image']?>?rand=' + Math.random();
To set up another small image link and set them to hidden.
Insert
<?php foreach ($images_lb as $key=>$image) : ?>
li2 = document.createElement('LI');
li2.style.display = "none";
<?php if (Mage::getStoreConfig('smdesign_colorswatch/zoom/enabled') && Mage::getStoreConfig('smdesign_colorswatch/zoom/more_view_change_main_image') && $_product->getData('enable_zoom_plugin') == 1 && ( $_product->getImage() != 'no_selection' && $_product->getImage() ) ) : ?>
$(li2).update("<a href=\"<?php echo $image['lightbox']; ?>?rand=' + Math.random()\" rel=\"lightbox[rotation]\" onclick=\"return false;\" ><img src=\"<?php echo $image['thumb'] ?>\" width=\"56\" height=\"56\" alt=\"<?php echo $image['label'] ?>\" /></a>");
<?php endif; ?>
galleryView.appendChild(li2);
<?php endforeach; ?>
After
<?php foreach ($images as $key=>$image) : ?>
li = document.createElement('LI');
<?php if (Mage::getStoreConfig('smdesign_colorswatch/zoom/enabled') && Mage::getStoreConfig('smdesign_colorswatch/zoom/more_view_change_main_image') && $_product->getData('enable_zoom_plugin') == 1 && ( $_product->getImage() != 'no_selection' && $_product->getImage() ) ) : ?>
$(li).update("<a href=\"#\" onclick=\"SMDesignColorswatchPreloader.showPerload($('image')); $('image').src = '<?php echo $image['image']; ?>?rand=' + Math.random(); return false;\"><img src=\"<?php echo $image['thumb'] ?>\" width=\"56\" height=\"56\" alt=\"<?php echo $image['label'] ?>\" /></a>");
<?php else : ?>
$(li).update("<a href=\"#\" onclick=\"popWin('<?php echo Mage::getUrl('catalog/product/gallery', array('id'=>$image['product_id'], 'image'=>$image['id'], 'pid'=>$productId)) ?>', 'gallery', 'width=300,height=300,left=0,top=0,location=no,status=yes,scrollbars=yes,resizable=yes'); return false;\" title=\"<?php echo $image['label'] ?>\"><img src=\"<?php echo $image['thumb'] ?>\" width=\"56\" height=\"56\" alt=\"<?php echo $image['label'] ?>\" /></a>");
<?php endif; ?>
galleryView.appendChild(li);
<?php endforeach; ?>
Now when i click the color swatch button. The images of lightbox are showed right.
Step 4, to fix ie9 bug of easy lightbox. When i use ie9 to test my merge job, it causes a problem, here is my solution.
Edit skin/frontend/default/default/js/lightbox.js
Insert
if(imageLink.id != "orginal") {
return false;
}
After
start: function(imageLink) {
if (this.animating) {
return false;
}
Here my merge job is done. Cheer up.
If you have another better solutions or questions, please email me lazychen86@163.com
My website is
http://www.bagsion.com, and when you click any products in my website, you will see my merge effect of it.
Best Regard
Louis Chan
