jQuery не работает в IE 7 и Chrome

Question

Хорошо, у меня достаточно кода, поэтому я, вероятно, не должен публиковать код напрямую, но я не уверен, в чем заключается проблема.

Страница, о которой идет речь, находится по адресу letterlyyours.com/design.php.Это должно сработать, когда вы набираете слово, нажимаете «Отправить», а затем появляются маленькие фотографии каждой буквы - их можно прокручивать вверх и вниз.Кроме того, если вы щелкнете по миниатюре, откроется fancybox, чтобы показать полное изображение.

Проблема в том, что в Chrome все стрелки прокрутки отключены.Также в IE 6/7 (он работает в IE 8), fancybox работает только для первого эскиза в списке.Разве это не странно?

В любом случае, я подозреваю, что проблема может быть вызвана чем-то хакерским, которое я должен был сделать, чтобы исправить другую проблему.Для списка фотографий я первоначально использовал 2D-массивы, например photos [4] [6], но это работало только в Firefox, поэтому я изменил его на что-то вроде eval ('photos' + number + '[index]), которыйказалось, заставляет его работать в IE за исключением вышеупомянутых проблем.

Ссылка на файл со всем кодом javascript: http://letterlyyours.com/jcarousel/design.js.php

Вот код:

photos0 = [
{url: "photos/thumb_A 1.jpg", title: "A 1"},
{url: "photos/thumb_A 2.jpg", title: "A 2"},
...
];
...
...
photos25 = [
{url: "photos/thumb_Z 1.jpg", title: "Z 1"},
...
];

jQuery(document).ready(function() {

jQuery('#create').submit(function(event) {
    var word = jQuery('#word').val();
    event.preventDefault();
    jQuery('ul').unbind();
    jQuery("#creation").html('');
    jQuery('#creation').css('width', Math.max(122, 75*word.length));
    for (var a = 0; a < word.length; a++)
        {
        jQuery('#creation').append('<ul class="jcarousel jcarousel-skin-tango" id="carousel' + a + '"></ul>');
        var total = eval('photos' + parseInt(word.toUpperCase().charCodeAt(a)-65) + '.length');
        for (var b = 0; b < total; b++)
            {
            var url = eval('photos' + parseInt(word.toUpperCase().charCodeAt(a)-65) + '[b].url');
            var url_full = url.replace('thumb_', '');
            jQuery('#carousel' + a).append('<li><a id="thumb' + b + '" href="' + url_full + '"><div style="width: 75px; height: 113px; background-image: url(\'' + url + '\');"></div></a></li>');
            jQuery('a#thumb' + b).fancybox({
                'transitionIn': 'elastic',
                'transitionOut': 'elastic',
                'hideOnContentClick': true
            });
            }       
        jQuery('#carousel' + a).jcarousel({
            vertical: true,
            scroll: 1,
            itemVisibleInCallback: function(carousel, li, index, state) {
                jQuery(li).parent().data('image', jQuery(li).children('a').children('div').css('background-image').replace(/"/g, ''));
            }
        });
        }
    jQuery('#creation').append('<a id="order" href="#orderform"><img width="122" height="24" src="images/button_order.png" tabindex="3" alt="Order Yours" /></a>');
    jQuery('a#order').fancybox({
    'hideOnContentClick': false,
    'transitionIn': 'fade',
    'frameWidth': 'auto',
    'title': 'Order \'' + word + '\'',
    'overlayShow': true,
    'overlayOpacity': 0.8,
    'overlayColor': 'black',
    'onStart': function() {
        jQuery('#list').html('');
        jQuery('#cost').html(word.length + ' photos at $6.00 per photo <br />Total: $' + word.length*6);
        jQuery('form#contact-form').unbind();
        jQuery('form#contact-form').submit(function(event) {
            jQuery.fancybox.showActivity();
            jQuery.post('contact.php', jQuery('form#contact-form').serialize(), function()
                {
                jQuery.fancybox(jQuery('div#thanks'));
                });
            event.preventDefault();
        });
        var photolist = '';
        for (a = 0; a < word.length; a++)
            {
            jQuery('#list').append('<div style="float: left; width: 75px; height: 113px; background-image: ' + jQuery('#carousel' + a).data('image') + '"/>');
            photolist += jQuery('#carousel' + a).data('image');
            }
        jQuery('#photonames').val(photolist);
        }
    });
});

jQuery('#word').keypress(function(event) {
    var letter = event.which;
    if ((letter != 8) && (letter != 0))
        {
        if (letter < 97)
            letter += 32;
        if (!((letter >= 97) && (letter <= 122)))
            {
            event.preventDefault();
            }
        }
});

jQuery('#word').select(function(event) {
    event.preventDefault();
});
});

Answer 1

Я посмотрел на твой код.Возможно, вы находитесь на правильном пути для проблемы IE, когда fancybox применяется только к одному элементу.

Тот факт, что fancybox применяется к первому изображению, но не к нему после, говорит мне на основании вашего сценария, чтопеременная total равна 1 для IE7 по какой-то причине

var total = eval('photos' + parseInt(word.toUpperCase().charCodeAt(a)-65) + '.length');

Это мое предположение, потому что тогда у вас есть цикл for, который присоединяет fancybox к jQuery('a#thumb' + b).Это должно выполняться только один раз, что означает, что b < total было верно только для одной итерации (первая итерация, когда b = 0).

Чтобы протестировать в IE, вы можете попробовать сделать необработанное предупреждениепросто чтобы увидеть, что это такое.Итак:

var total = eval('photos' + parseInt(word.toUpperCase().charCodeAt(a)-65) + '.length');
alert('total = ' + total);

Это как минимум исключило бы эту возможность.

Также - я не знаком с fancybox, но мне интересно, не могли бы вы просто применить класс CSS к изображениям, чтобы вместо необходимости итерировать и генерировать 'a#thumb' + b и выбирать каждый из них по отдельности, вы могли быпросто примените селектор, такой как:

jQuery('a.thumbnail').fancybox({ .... });

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

Для проблемы Chrome и карусели, вы тестировали плагин карусели в Chrome,на всякий случай это не твоя ошибка?

Answer 2

Я думаю, что это может быть проблема с детьми. это не работает для меня либо на IE7