Before/After image swap using Fancybox and Cloudzoom

Question

I'm trying to get Fancybox working with an image swap script that shows the "before" image of a retouched photo in the main large image area when fancybox is active.

Before fancybox is active I currently also have cloudzoom running on the retouched image, then when the retouched image is clicked it opens fancybox. Now when the user clicks or hovers over the middle of the active fancybox image, I want the image to swap to the before image the has not been retouched.

You can see an example of the site here: http://www.pixlsnap.com/j/testb.php

and an example of the running image swap script here: http://brecksargent.com/swaptest.php

The images are being loaded using the slideshowpro director API. Here is the script I am trying to implement with fancybox:

$(document).ready(function() { 
$(".fancybox-image").hover(
      function(){this.src = this.src.replace("_off","_on");},
      function(){this.src = this.src.replace("_on","_off");
 });
 var imgSwap = [];
 $(".fancybox-image").each(function(){
    imgUrl = this.src.replace("_off","_on");
    imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});

$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}

This is the code that binds a click event to the cloudzoom image area:

    $(function(){
    // Bind a click event to a Cloud Zoom instance.
    $('#1').bind('click',function(){
        // On click, get the Cloud Zoom object,
        var cloudZoom = $(this).data('CloudZoom');
        // Close the zoom window (from 2.1 rev 1211291557)
        cloudZoom.closeZoom();                       
        // and pass Cloud Zoom's image list to Fancy Box.
        $.fancybox.open(cloudZoom.getGalleryList()); 
        return false;
    });
});

Answer 1

Figured it out!

Used this

<script type="text/JavaScript">
// prepare the form when the DOM is ready 
$(document).ready(function() { 
$(".img-swap").hover(
      function(){this.src = this.src.replace("_on","_off");},
      function(){this.src = this.src.replace("_off","_on");
 });
 var imgSwap = [];
 $(".img-swap").each(function(){
    imgUrl = this.src.replace("_off","_on");
    imgSwap.push(imgUrl);
});
$(imgSwap).preload();
});
$.fn.preload = function() {
this.each(function(){
    $('<img/>')[0].src = this;
});
}
</script>

changed this

$.fancybox.open(cloudZoom.getGalleryList()); 
    return false;
});

to this

$.fancybox({
afterShow: function () {
    $(this.content).attr("tabindex",1)
}

    });

and put each image in it's own div with img-swap class:

<div class="hover" id="hover6" style="display: none"><img src="image_on.jpg" class="img-swap" /></div>