Fancybox works in all browsers except 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

A short test case with code that reproduces your problem would make it much easier for us to answer your question. Otherwise people will try it themselves, not run into your error, and declare that everything is fine. — Millie Smith, Nov 09 '13 at 21:45
My guess is that something in your code is triggering a js error that other browsers may overlook but IE. — JFK, Nov 10 '13 at 23:23

score 0 · Answer 1 · answered Nov 11 '13 at 20:41

0

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

answered Nov 11 '13 at 20:41

user2974884

21
1
5

1

it might be not the only line you have to edit check http://stackoverflow.com/q/14344289/1055987 – JFK Nov 13 '13 at 02:43

Fancybox works in all browsers except Internet Explorer

1 Answers1