Question

我正在为网站创建一个照片库，并且是javascript的新手。这个画廊在chrome，firefox和safari中运行良好，但似乎不想在IE中工作。

当在图库中单击图像时，它会显示在网站右侧的更大窗口中，如果单击以进行更大的预览，则会显示一个fancybox窗口。 Internet Explorer会打开页面，但它不会向右显示图像，单击较大的预览时会转到图像URL。

我正在使用的javascript是：

$(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');
        }
    });
}

非常感谢任何帮助。

由于

Answer 1

使用F12在IE中调试我的javascript文件，发现我需要升级我的jquery版本。

还必须修改第29行的fancybox.1.3.4.js文件：

isIE6 = $ .browser.msie＆amp;＆amp; $ .browser.version＆lt; 7＆amp;＆amp; ！window.XMLHttpRequest，

to

isIE6 = navigator.userAgent.match（/ msie [6] / i）＆amp;＆amp; ！window.XMLHttpRequest，

现在适用于所有浏览器。感谢

Fancybox适用于除Internet Explorer之外的所有浏览器

1 个答案: