How to merge easy lightbox plug-in and colorswatch+zoom plug-in

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