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

Question

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

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

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

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

Ссылка на файл со всеми яваскрипта код: 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