【发布时间】：2013-11-21 21:22:37
【问题描述】：
我正在为网站创建照片库，并且是 javascript 新手。该库在 chrome、firefox 和 safari 中运行良好，但似乎不想在 IE 中运行。
当在图库中单击图像时，它会在站点右侧的较大窗口中显示，如果您单击以查看较大的预览，则会显示一个花式框窗口。 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');
}
});
}
非常感谢任何帮助。
谢谢
【问题讨论】：
-
一个包含重现您问题的代码的简短测试用例将使我们更容易回答您的问题。否则人们会自己尝试，不会遇到你的错误，并声明一切都很好。
-
...if you need to see any code你打赌 -
我的猜测是你的代码中的某些东西触发了一个 js 错误，其他浏览器可能会忽略但 IE。
标签： jquery html internet-explorer fancybox gallery