Fancybox and Zoom Effect with Zoom1 Pugin
<p>Working with Fancybox version 1.3.4. Fancybox is working perfectly, I am trying to add the zooom Effect to Fancybox. </p>

<ol>
<li><p>Till now i have been able to apply the effect to the image when clicked open in fancybox window. But that is half done, as when i close fancybox, the zoom effect still remains.</p></li>
<li><p>I load 5 images  and on hover on each image, the top image gets changed. I want to apply the zooom effect on the image which shows when the mouse is moved on the small thumbnail and it shows in big screen. [Here i am unable to apply zooom, i am missing something, but what not sure]</p></li>
</ol>

<p>This is my Try Till now: </p>

<pre><code>&lt;div class="CWproductThumbs"&gt;
&lt;a href="cw4/images/product_expanded/012.jpg" class="CWimageZoomLink CWlink" title="Digital HD Video Camera" rel="CWproduct"&gt;&lt;img class="CWthumb" src="cw4/images/product_thumb_details/012.jpg" alt="Digital HD Video Camera"&gt;&lt;/a&gt;
    &lt;a href="cw4/images/product_expanded/006.jpg" class="CWimageZoomLink CWlink" title="Digital HD Video Camera" rel="CWproduct"&gt;&lt;img class="CWthumb" src="cw4/images/product_thumb_details/006.jpg" alt="Digital HD Video Camera"&gt;&lt;/a&gt;     
&lt;/div&gt;
</code></pre>

<p>Jquery code; </p>

<pre><code>jQuery(document).ready(function(){
    // set filename on any image element
    var $setSrc = function(triggerEl,targetEl){
            var triggerSrc = jQuery(triggerEl).attr('src');
            var triggerIndex = triggerSrc.lastIndexOf("/") + 1;
            var newFn = triggerSrc.substr(triggerIndex);
            var targetSrc = jQuery(targetEl).attr('src');
            var targetIndex = targetSrc.lastIndexOf("/") + 1;
            var oldFn = targetSrc.substr(targetIndex);
            var targetDir = targetSrc.replace(oldFn,'');
            var newSrc = targetDir + newFn;
            targetEl.attr('src',newSrc);
        }; 
    // set href on any link 
    var $setHref = function(triggerEl,targetEl){
            var triggerHref = jQuery(triggerEl).attr('href');
            var triggerIndex = triggerHref.lastIndexOf("/") + 1;
            var newFn = triggerHref.substr(triggerIndex);
            var targetHref = jQuery(targetEl).attr('href');
            var targetIndex = targetHref.lastIndexOf("/") + 1;
            var oldFn = targetHref.substr(targetIndex);
            var targetDir = targetHref.replace(oldFn,'');
            var newHref = targetDir + newFn;
            targetEl.attr('href',newHref);
        }; 


        jQuery('img.CWthumb').hover(function(){
            $setSrc(jQuery(this),jQuery('#CWproductImgMain'));

            $setHref(jQuery(this).parent('a'),jQuery('#CWproduct105imgLink'));
            $setHref(jQuery(this).parent('a'),jQuery('#CWproduct105zoomLink'));

            });


        jQuery('a.CWimageZoomLink').each(function(){
            jQuery(this).fancybox({
            'titlePosition': 'over',    
            'padding': 0,
            'margin' : 0,
            'overlayShow': true,
            'showCloseButton': true,
            'hideOnOverlayClick':true,
            'hideOnContentClick': true,
            'autoDimensions': true,
            'centerOnScroll': true,
            'showNavArrows':true,
            'cyclic':true,
            'onComplete' : function() {
                jQuery('#fancybox-img').imagezoomsl({innerzoommagnifier: true,
                classmagnifier: window.external ? window.navigator.vendor === "Yandex" ? "" : "round-loupe" : "",
                magnifierborder: "5px solid #F0F0F0",
                zoomrange: [2, 8],
                zoomstart: 4,
                magnifiersize: [150, 150]})
            }
        });
        jQuery('a.CWtriggerZoomLink').click(function(){
            var zoomHref = jQuery(this).attr('href');
            jQuery('a.CWimageZoomLink[href="' + zoomHref + '"]').trigger('click'); 
            return false;
            });
        // fancybox - see http://fancybox.net/api for available options

    });
  });
</code></pre>

<p>Jquery Zooom Plugin used is; </p>

<p><a href="http://www.zoomsl.tw1.ru" rel="nofollow">www.zoomsl.tw1.ru</a></p>
