jQuery - Custom Gallery - Работает в FF, Chrome, Safari и IE8, но не в IE7 - указатели? - PullRequest
0 голосов
/ 21 мая 2009

Я действительно сбит с толку следующим.

Когда галерея создается в 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 ]

1 голос
/ 27 мая 2009

Исправлена ​​проблема после долгой игры. Как предположил Кит, это была просто ошибка CSS.

IE7 нужно было немного напомнить, какие уровни zindex были у некоторых элементов, поэтому я вставил следующее

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

Внутри функции перемещения галереи (непосредственно перед анимацией).

Joy!

1 голос
/ 23 мая 2009

Я бы порекомендовал разместить тестовую страницу на общедоступном сервере, чтобы другие могли увидеть ее в наших собственных средах с IE7.

Это позволило бы нам намного быстрее увидеть происходящее, помочь понять и диагностировать поведение.

Я мог бы перехватить ваш код, но мне все равно пришлось бы искать картинки и т. Д., Чтобы даже изучить его.

До этого проверьте Firebug Lite для IE: http://getfirebug.com/lite.html и просто включите следующее:

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

Я догадываюсь, что это работает в других браузерах, и вы используете jQuery, который очень хорошо нормализован, что это, вероятно, проблема CSS, но пока я не вижу пример страницы, это просто быстрое предположение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...