Fancybox可在除Internet Explorer之外的所有浏览器中使用

Question

I am creating a photo gallery for a website and am new to javascript. the gallery works fine in chrome, firefox and safari but doesnt seem to want to work in IE.

When an image is clicked in the gallery it shows in a bigger window to the right of the site, if you click for a larger preview then it brings up a fancybox window. Internet Explorer opens the page but it doesnt show the images to the right and when larger preview is clicked it goes to image URL.

The javascript i am using is:

$(document).ready(function () {
    $('.gallery_data').css('display', 'block');
    $('.gallery_thumbnails').css('width', '500px');
    $('.gallery_preview').css('display', 'block');
    $('.gallery_caption').css('display', 'block');
    $('.gallery_thumbnails a').click(function (e) {
        e.preventDefault();
        var photo_caption = $(this).attr('title');
        var photo_fullsize = $(this).attr('href');
        var photo_preview = photo_fullsize.replace("_fullsize", "_preview");
        $('.gallery_caption').slideUp(500);
        $('.gallery_preview').fadeOut(500, function () {
            $('.gallery_preload_area').html('<img src="' + photo_preview + '" />');
            $('.gallery_preload_area img').imgpreload(function () {
                $('.gallery_preview').html('<a class="overlayLink" title="' + photo_caption + '" href="' + photo_fullsize + '" style="background-image:url(' + photo_preview + ');"></a>');
                $('.gallery_preview').fadeIn(500);
                $('.gallery_caption').html('<p><a class="overlayLink zoom" title="' + photo_caption + '" href="' + photo_fullsize + '">View larger</a></p><p>' + photo_caption + '</p>');
                $('.gallery_caption').slideDown(500);
                setFancyBoxLinks();
                updateThumbnails();
            });
        });
    });

    var first_photo_caption = $('.gallery_thumbnails a').first().attr('title');
    var first_photo_fullsize = $('.gallery_thumbnails a').first().attr('href');
    var first_photo_preview = first_photo_fullsize.replace("_fullsize", "_preview");
    $('.gallery_preview').html('<a class="overlayLink" title="' + first_photo_caption + '" href="' + first_photo_fullsize + '" style="background-image:url(' + first_photo_preview + ');"></a>');
    $('.gallery_caption').html('<p><a class="overlayLink zoom" title="' + first_photo_caption + '" href="' + first_photo_fullsize + '">View larger</a></p><p>' + first_photo_caption + '<a href="' + first_photo_fullsize + '" style="background-image:url(' + first_photo_preview + ');"></a></p>');
    updateThumbnails();
    setFancyBoxLinks();
});

function setFancyBoxLinks() {
    $("a.overlayLink").fancybox({
        'titlePosition': 'over',
        'overlayColor': '#000',
        'overlayOpacity': 0.8,
        'transitionIn': 'elastic',
        'transitionOut': 'elastic',
        'autoScale': true
    });
}

function updateThumbnails() {
    $('.gallery_thumbnails a').each(function (index) {
        if ($('.gallery_preview a').attr('href') == $(this).attr('href')) {
            $(this).addClass('selected');
            $(this).children().fadeTo(250, .4);
        } else {
            $(this).removeClass('selected');
            $(this).children().css('opacity', '1');
        }
    });
}

Any help is much appreciated.

Thanks

Answer 1

Debugged my javascript file in IE using F12, found i needed to upgrade my version of jquery.

Also had to amend the fancybox.1.3.4.js file on line 29 from:

isIE6 = $.browser.msie && $.browser.version < 7 && !window.XMLHttpRequest,

                             to

isIE6 = navigator.userAgent.match(/msie [6]/i) && !window.XMLHttpRequest,

Works perfect in all browsers now. Thanks