Плагин jQuery Cycle для IE6 / 7 - PullRequest
Новая
       25

Плагин jQuery Cycle для IE6 / 7

0 голосов
/ 29 марта 2010

Я реализовал слайд-шоу с помощью плагина Cycle, который работает во всех браузерах, кроме IE6 и 7, где изображения просто отображаются в списке, а div #page_copy не скрывается. Я весь день просматривал код без какой-либо удачи, и не совсем уверен, как или что мне следует искать.

Как лучше всего отладить эту проблему? Я знаю, что div #page_copy скрывается, когда я удаляю остальную часть кода, и я попробовал обратное (что не дало результата) 

<script type="text/javascript" charset="utf-8">
        jQuery.fn.fadeToggle = function(speed, easing, callback) { 
            return this.animate({opacity: 'toggle'}, speed, easing, callback); 
        };


        $(document).ready(function() {
            $('#page_copy').hide();
            $('a#info_close_button').click(function() {
                $('#page_copy').fadeOut(200);
                return false;
            });
            $('a#info_button').click(function() {
                $('#page_copy').fadeToggle(200);
                return false;
            });
        });


        $(window).load(function() {
            // vertically center single image
            var $image_cnt = $("#images > img").size();
            if($image_cnt < 2) {
                var $single_img = $("#images").children(':first-child');
                var h = $single_img.height();
                $single_img.css({
                    marginTop: (620 - h) / 2,
                });
                $(".next").css("display","none");
                $(".prev").css("display","none");
            }
        });


        // wait until images have loaded before starting cycle
        $(window).load(function() {
            // front image rotator
            $('#images').cycle({ 
                fx: 'fade',
                speed:  300, 
                next:   '.next', 
                prev:   '.prev',
                containerResize: 0,
                timeout:  0, 
                delay:   -2000,
                before: onBefore
            });

        }); 

        // hide all but the first image when page loads
        $(document).ready(function() {
            $('#images img:gt(0)').hide();
        });

        // callback fired when each slide transition begins
        function onBefore(curr,next,opts) {
            var $slide = $(next);
            var w = $slide.width();
            var h = $slide.height();
            $slide.css({
                marginTop: (620 - h) / 2,
                marginLeft: (650 - w) / 2
            });
        };
    </script>

1 Ответ

1 голос
/ 29 марта 2010

Я не совсем понимаю, почему у вас есть несколько $(document).ready и $(window).load ..

Может быть, вы должны просто попытаться поместить все в один $(document).ready блок.

Дополнительно переместите определение function onBefore(...) в самом начале тега <script>. Прямо перед кодом jQuery.fn.fadeToggle.

Попробуйте также удалить ненужную запятую в конце этого фрагмента кода 

$single_img.css({
    marginTop: (620 - h) / 2, //<---- remove comma
});

А также удалите эту ненужную точку с запятой 

function onBefore(curr,next,opts) {...}; //<--- unneeded
...