$.fancybox.cancel() not working

Question

I'm using fancybox to show some images in a gallery. I have a main image and a bunch of thumbnails below it. If you click on the main image it should show the fancybox but if you click on a thumbnail it replaces the main image. I've hooked up the main image switching somewhere else but my problem is that I want to stop the fancybox from showing when a thumbnail is clicked. I have this code:

$(this).fancybox({
    onStart: function(selectedArray, selectedIndex, selectedOpts) {
            var element = selectedArray[selectedIndex];
            if ($(element).parent('li').length > 0) {
                $.fancybox.cancel();
                $.fancybox.close();
                $(element).click();
            }
        }
    });
});

but the cancel and close are not working. I wouldn't be surprised if close() is superfluous assuming cancel() works...

thanks

robb

edit: Here is some html for the main image:

<a href="/uploadedImages/About_Something/Carousel/Landing_mainImage.png" id="ctl00_ContentPlaceHolder1_aMainImage" class="fancyBox" rel="gallery">
    <img id="ctl00_ContentPlaceHolder1_imgMainImage" src="/uploadedImages/About_Something/Carousel/Landing_mainImage.png" alt="1" style="border-width:0px;" />
</a>

and here is one of the thumbnail items:

<a href="/uploadedImages/About_Something/Carousel/Landing_mainImage_2.png" class="fancyBox" rel="gallery">
    <img src="/uploadedImages/About_Something/Carousel/Landing_mainImage.png " alt="/uploadedImages/About_Something/Carousel/Landing_mainImage.png  " />
</a>

and then more of the javascript looks like this:

$('a.fancyBox').each(function(i) {
    if ($(this).parent('li').length > 0) {
        $(this).click(function(e) {
            e.preventDefault();
        });
    }

    $(this).fancybox({
        onStart: function(selectedArray, selectedIndex, selectedOpts) {
             var element = selectedArray[selectedIndex];
            if ($(element).parent('li').length > 0) {
                $.fancybox.cancel();
                $.fancybox.close();
                $('#fancy_close').trigger('click');
                $(element).click();
            }
        }
    });
});

Answer 1

I got the same issue.

Simply return false in the onStart and it will cancel the loading.