Fancybox適用於除Internet Explorer之外的所有瀏覽器

我正在爲網站創建照片庫，並且是JavaScript新手。該畫廊在Chrome，Firefox和Safari瀏覽器中工作正常，但似乎並不想在IE中工作。Fancybox適用於除Internet Explorer之外的所有瀏覽器

當圖片在圖庫中被點擊時，它會在網站右側的一個更大的窗口中顯示，如果你點擊一個更大的預覽，它會彈出一個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'); 
     } 
    }); 
}

任何幫助深表感謝。

感謝

來源

2013-11-09 user2974884

用代碼重現您的問題的簡短測試用例會使我們更容易回答您的問題。否則，人們會自己嘗試，而不是遇到你的錯誤，並聲明一切都很好。 –

'...如果你需要看到任何代碼'你下注 – JFK

我的猜測是你的代碼中的某些東西觸發了其他瀏覽器可能會忽略的js錯誤，但是IE。 – JFK

使用F12調試的我的JavaScript文件中IE瀏覽器，發現我需要升級我的版本的jQuery。

也不得不從修正上線29 fancybox.1.3.4.js文件：

isIE6 = $ .browser.msie & & $ .browser.version & window.XMLHttpRequest，

to

isIE6 = navigator.userAgent.match（/ MSIE [6]/I）& &！window.XMLHttpRequest，

現在適用於所有瀏覽器。謝謝

來源

2013-11-11 20:41:55 user2974884

它可能不是您必須編輯檢查的唯一行http://stackoverflow.com/q/14344289/1055987 – JFK

Fancybox適用於除Internet Explorer之外的所有瀏覽器

回答

相關問題