Question

我对以下内容感到困惑。

在FF / Chrome等界面中创建图库时，单击“下一步”将图像移动到其中一个，悬停状态仍然可供您再次单击。在IE7中，图像移动到一个，然后悬停状态失败，并且不再出现。我在页面上的其他效果继续有效。

我的jQuery可能不是最好的，所以我为这个烂摊子道歉。除了手头的问题，任何一般的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>

任何帮助非常感谢!!

编辑＃1：除此之外，我还读到IE7与img选择器有问题，但我尝试将其更改为通用类名等无济于事。还有更多线索吗？

编辑＃2：编辑＃2：我还在努力解决这个问题 - 我在这里添加了一个实例:(太新了，无法添加链接，对不起！）

Answer 1

我建议将测试页放在可公开访问的服务器上，供其他人使用IE7在我们自己的环境中查看。

这将使我们能够更快地看到正在发生的事情并帮助理解和诊断行为。

我可以提供你的代码，但我仍然需要找到照片，等等甚至可以检查它。

在此之前，请查看适用于IE的Firebug Lite：http://getfirebug.com/lite.html并添加以下内容：

<script src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>

我猜不知道它在其他浏览器中运行的b / c你是否正在使用jQuery，这很正常化，它可能是一个CSS问题，但在我看到一个示例页面之前，它是只是一个快速猜测。

Answer 2

经过多次播放后修复了问题。正如Keith所说，这只是一个CSS错误。

IE7需要稍微提醒一些元素的zindex级别，所以我插入了以下内容

$('.gallery-nav, .gallery-title').css({ position: 'absolute', left: '0px', zIndex: '1100' }); // random reassignement of gallery zIndex, because IE7 doesn't behave

在移动图库功能内（就在动画之前）。

快乐！

jQuery - 自定义图库 - 适用于FF，Chrome，Safari和IE8，但不是IE7 - 指针？

2 个答案: