jQuery-Custom Gallery-可在FF，Chrome，Safari和IE8中使用，但不能在IE7中使用-指针？
[英]jQuery - Custom Gallery - Works in FF, Chrome, Safari & IE8, but not IE7 - pointers?
问题描述
I'm really baffled with the following. 
我对以下内容感到困惑。
When the gallery is created in FF/Chrome etc, clicking next moves the image on one and the hover state remains for you to click again. 使用FF / Chrome等创建图库时，单击“下一步”将图像移动到一个，并且鼠标悬停状态保留，供您再次单击。 In IE7, the image moves on one, then the hover state fails, and doesn't reappear. 在IE7中，图片移动到一个，然后悬停状态失败，并且不再出现。 Other effects I have on my page continue to function. 我在页面上产生的其他效果继续起作用。
My jQuery may not be the best, so I apologise for the mess. 我的jQuery可能不是最好的，所以我为此感到抱歉。 Other than the problem at hand, any general jQuery pointers welcome. 除了手头的问题外，任何通用的jQuery指针都欢迎使用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<title>GA - 2009 yee haw</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.dimensions.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<style type="text/css" media="all">
@import "/css/screen.css";
</style>
</head>
<body>
<script type="text/javascript">
<!--//
function DrawGalleryOptions(div) {
$('gallery').css({width: '503px'});
$(div).append('<div class="gallery-title"><p style="font-size:14px;">no title</p><div class="gallery-bg gallery-bg-small"></div></div>');
$(div).append('<div class="gallery-nav"></div>');
$('.gallery-nav').append('<div class="gallery-bg"></div><div class="gallery-controls"><p class="gall-title"><a class="gallleft" href="#galleryleft" title="">Previous Image</a><a class="gallright" href="#galleryright" title="">Next Image</a></p></div>');
$('.gallery-title, .gallery-nav, .gallery-bg').css({ position: 'absolute', left: '0px', height: '30px', width: '503px' });
$('.gallery-nav').css({ height: '60px', bottom: '-60px' });
$('.gallery-bg').css({ backgroundColor: '#5974c5', opacity: 0.7, height: '60px', zIndex: 1000 });
$('.gallery-title').css({ top: '-30px'});
$('.gallery-controls').css({ position: 'absolute', zIndex: 1002 });
$('.gallery-bg-small').css({height: '30px'});
$('.gallery-title p').css({zIndex: 1002, color: '#ffffff', position: 'absolute', padding: '5px'});
$('.gallery-controls p').css({ posistion: 'absolute', zIndex: 1005, left: '0px', top: '0px' });
$('a.gallleft').css({ width: '82px', height: '45px', display: 'block', textIndent: '0', backgroundImage: 'url(/image/galleryleft.gif)', backgroundPosition: 'left top', backgroundRepeat: 'no-repeat', fontSize: '11px', color: '#ffffff', top: '15px', left: '15px', position: 'absolute', paddingTop: '25px' });
$('a.gallright').css({ width: '53px', height: '45px', display: 'block', textIndent: '0', backgroundImage: 'url(/image/galleryright.gif)', backgroundPosition: 'right top', backgroundRepeat: 'no-repeat', fontSize: '11px', color: '#ffffff', top: '15px', left: '430px', position: 'absolute', paddingTop: '25px' });
}
function ShowGalleryOptions() {
jQuery.easing.def = "easeOutQuint";
$('.gallery-title').animate({ top: '0px' }, 800);
$('.gallery-nav').animate({ bottom: '0px' }, 800);
}
function HideGalleryOptions() {
$('.gallery-title').animate({ top: '-30px' }, 800);
$('.gallery-nav').animate({ bottom: '-60px' }, 800);
}
function StopAll() {
$('.gallery-title').stop();
$('.gallery-nav').stop();
}
function MoveGallery(pic) {
$('#test2').html('>> <br />' + pic[_GalleryCurrent].src + " " + pic[_GalleryCurrent].height + " " + pic[_GalleryCurrent].width + "<br />Current: " + _GalleryCurrent);
$('.gallery').append('<img id="gallery-current" style="display:none;" src="' + pic[_GalleryCurrent].src + '" width="' + pic[_GalleryCurrent].width + '" height="' + pic[_GalleryCurrent].height + '" alt="' + pic[_GalleryCurrent].alt + '" />');
$('#gallery-current').css({ opacity: 0, display: 'block' });
$('.gallery img').css({ position: 'absolute', top: '0px', left: '0px' });
//jQuery.easing.def = "easeOutElastic";
$('.gallery-title p').html(pic[_GalleryCurrent].alt);
$('#gallery-current').animate({ opacity: 1 }, 1200, function() {
$('#gallery-last').remove();
$('#gallery-current').attr('id', 'gallery-last');
});
}
$(function() {
var pic;
pic = $(".gallery").children("img");
_GalleryMax = pic.length - 1;
_GalleryCurrent = 0;
//$('#test2').html('>><br />' + pic[_].src + " " + pic[0].height + " " + pic[0].width + "<br />Current: " + _GalleryCurrent);
$('.gallery').css({ height: 283, overflow: 'hidden', position: 'relative' });
$('.gallery').html('');
DrawGalleryOptions('.gallery');
$('.gallery').append('<img id="gallery-last" src="' + pic[_GalleryCurrent].src + '" width="' + pic[_GalleryCurrent].width + '" height="' + pic[_GalleryCurrent].height + '" alt="' + pic[_GalleryCurrent].alt + '" />');
$('.gallery-title p').html(pic[_GalleryCurrent].alt);
$('.gallery').hover(function() {
//alert('on');
StopAll();
ShowGalleryOptions();
},
function() {
//alert('off');
StopAll();
HideGalleryOptions();
});
$('a.gallright').click(function() {
$('#gallery-current').stop(false, true);
//alert('boota');
_GalleryCurrent = _GalleryCurrent + 1;
if (_GalleryCurrent > _GalleryMax) {
_GalleryCurrent = 0;
}
MoveGallery(pic);
});
$('a.gallleft').click(function() {
$('#gallery-current').stop(false, true);
//alert('boota');
_GalleryCurrent = _GalleryCurrent - 1;
if (_GalleryCurrent < 0) {
_GalleryCurrent = _GalleryMax;
}
MoveGallery(pic);
});
});
//-->
</script>
<div class="gallery">
<img class="gall-img" src="/image/gallery1.jpg" width="503" height="283" alt="Person on a lake" />
<img class="gall-img" src="/image/gallery2.jpg" width="503" height="283" alt="Building university" />
<img class="gall-img" src="/image/gallery3.jpg" width="503" height="283" alt="Random colours" />
<img class="gall-img" src="/image/gallery4.jpg" width="503" height="283" alt="Abstract - dark blue?" />
<img class="gall-img" src="/image/gallery5.jpg" width="503" height="283" alt="Random abstract" />
</div>
<div id="test2" style="font-size:18px;"></div>
</body>
</html>
any help greatly appreciated!! 任何帮助，不胜感激！
EDIT #1: Further to the above, I'd read that IE7 has issues with the img selector, but I've tried changing this to a generic classname etc to no avail. 编辑＃1：除了上述内容，我还读到IE7的img选择器有问题，但是我尝试将其更改为通用类名等都无济于事。 Any more clues? 还有其他线索吗？
EDIT #2: I'm still struggling with this - I've added a live example here: (too new to add links it seems, sorry!) 编辑＃2：我仍然为此而努力-我在这里添加了一个实时示例：（太新了，似乎无法添加链接，对不起！）
2 个解决方案
解决方案1
1 2009-05-23 16:49:44
I would recommend putting a test page on a publicly accessible server for others to see live in our own environments with IE7. 我建议将测试页放在可公开访问的服务器上，以供他人使用IE7在我们自己的环境中实时查看。
It would allow us to see much more quickly what's going on and help understand and diagnose the behavior. 这将使我们能够更快地看到正在发生的事情，并有助于理解和诊断行为。
I could c&p your code, but I'd still have to find pics, etc. to even examine it. 我可以C＆P您的代码，但是我仍然必须找到图片等才能进行检查。
Until then, check out Firebug Lite for IE: http://getfirebug.com/lite.html and just include the following: 在此之前，请查看适用于IE的Firebug Lite： http ： //getfirebug.com/lite.html ，仅添加以下内容：
<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
I'm guessing off the top of my head that b/c it works in the other browsers and you're using jQuery which is very well normalized that it's probably a CSS issue, but until I see a sample page, it's just a quick guess. 我突然想起b / c可以在其他浏览器中使用，而您使用的是jQuery，它已经很好地标准化了，可能是CSS问题，但是在我看到示例页面之前，这只是一个快速的过程猜测。
解决方案2
1 已采纳 2009-05-26 21:58:37
Fixed the issue after much playing. 解决了很多游戏后的问题。 As Keith suggested it was simply a CSS bug. 正如Keith所建议的，这只是一个CSS错误。
IE7 needed a little reminding what zindex levels some of the elements were on, so I inserted the following IE7需要稍微提醒一下一些元素处于什么zindex级别，因此我插入了以下内容
$('.gallery-nav, .gallery-title').css({ position: 'absolute', left: '0px', zIndex: '1100' }); // random reassignement of gallery zIndex, because IE7 doesn't behave
Inside the move gallery function (just before the animation). 在移动画廊功能内（在动画之前）。
Joy! 喜悦！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.