jQuery Cycle Plugin - Ошибка - PullRequest
Новая
       28

jQuery Cycle Plugin - Ошибка

2 голосов
/ 21 февраля 2012

Это мой первый вопрос, поэтому я постараюсь описать его как можно более подробно ... Я использую jQuery Cycle Plugin с Joomla. Это полностью взрывается в IE7. Хотя в Chrome он работает идеально, я заметил следующую ошибку при проверке консоли. 

Uncaught TypeError: Cannot read property 'cycleW' of undefined

Слайд-шоу работает в Chrome 17.0.963.56, Firefox 9.0.1 и Safari 5.1.3. Я не тестировал его в IE8 +, так как у меня нет компьютера с Windows, доступного для меня. Я вызываю слайд-шоу с внешним JS-файлом в заголовке, например ... 

<head>
        <script type="text/javascript" src="js/jquery.min.js" /></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript" src="js/init.js"></script>
</head>

Вот init.js: 

$(document).ready(function() { 

    $('#slideshow').cycle({ 
        fx:        'fade', 
        speed:     '900', 
        timeout:   4000,
        pause:     1, 
        pager:     '#nav',
        slideExpr: 'div.slide',
        next:      '#forward', 
        prev:      '#backward',
    });

    $('#slideshow').hover(function() {
        $("#backward").fadeIn(400);
        $("#forward").fadeIn(400);
    },
        function() {
        $("#backward").fadeOut(300);
        $("#forward").fadeOut(300);
    });

    $('#imax').before('<ul id="nav_imax">').cycle({ 
        fx:        'scrollHorz', 
        speed:     '1000', 
        timeout:   5000,
        pause:     1, 
        pager:     '#nav_imax',
        slideExpr: 'div.slide',

        // callback fn that creates a thumbnail to use as pager anchor
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>';
        },

    });

});

И, наконец, вот разметка. Div-модули "moduletable" и "custom" генерируются CMS. Тем не менее, мой slideExpr должен обходить их, поскольку он должен быть нацелен на div с классом «slide». 

<div id="slideshow">
    <div id="nav"></div>
    <a id="backward">Backward</a>
    <a id="forward">Forward</a>
    <div class="moduletable">
        <div class="custom">
            <div class="slide"><a href="#"><img src="01.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="02.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="03.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="04.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="05.jpg" width="860" height="400" border="0" /></a></div>
            <div class="slide"><a href="#"><img src="06.jpg" width="860" height="400" border="0" /></a></div>
        </div>
    </div>
</div>

Надеюсь, я все рассмотрел. Если есть какая-либо дополнительная полезная информация, которую я могу предоставить, пожалуйста, дайте мне знать. Спасибо!

ОБНОВЛЕНИЕ: Первоначально я не включал тот факт, что я использую другое слайд-шоу с идентификатором «imax» и альтернативными параметрами на другой странице. Так как они не были на той же странице, я не включил это. Однако, когда я закомментирую функцию $ ('# imax'), ошибки исчезают в Chrome, FF и т. Д. Слайд-шоу по-прежнему НЕ работает в IE7, однако ...

Так что я думаю, что это на самом деле две проблемы ...

Вот тестовая ссылка: http://jsfiddle.net/V6EeS/3/

1 Ответ

0 голосов
/ 22 февраля 2012

Я разобрался с проблемой IE7. Последний параметр параметра не должен иметь запятую (,). Я не знаю, почему Chrome все еще выдает ошибку, но, по крайней мере, слайд-шоу работает независимо в каждом браузере. 

$(document).ready(function() { 

    $('#slideshow').cycle({ 
        fx:        'fade', 
        speed:     '900', 
        timeout:   4000,
        pause:     1, 
        pager:     '#nav',
        slideExpr: 'div.slide',
        next:      '#forward', 
        prev:      '#backward' // Comma has been removed
    });

    $('#slideshow').hover(function() {
        $("#backward").fadeIn(400);
        $("#forward").fadeIn(400);
    },
        function() {
        $("#backward").fadeOut(300);
        $("#forward").fadeOut(300);
    });

    $('#imax').before('<ul id="nav_imax">').cycle({ 
        fx:        'scrollHorz', 
        speed:     '1000', 
        timeout:   5000,
        pause:     1, 
        pager:     '#nav_imax',
        slideExpr: 'div.slide',

        // callback fn that creates a thumbnail to use as pager anchor
        pagerAnchorBuilder: function(idx, slide) { 
            return '<li><a href="#"><img src="' + jQuery(slide).find('img').attr('src') + '" width="50" height="50" /></a></li>';
        }  // Comma has been removed

    });

});

Вот рабочая ссылка: http://jsfiddle.net/V6EeS/4/

...