jQuery가 IE 7 및 Chrome에서 작동하지 않습니다.

Question

좋아요, 코드를 직접 게시하면 안되지만 문제가 어디에 있는지 잘 모르겠습니다.

해당 페이지는 letterlyyours.com/design.php에 있습니다. 그것이 작동해야하는 방법은 단어를 입력하고 "제출"을 누르면 아래에 각 글자의 작은 사진이 나타나며 위아래로 스크롤 할 수 있습니다. 또한 미리보기 이미지를 클릭하면 fancybox가 열리고 전체 이미지가 표시됩니다.

크롬에서는 모든 스크롤 화살표가 비활성화되어 있습니다. 또한 IE 6/7 (IE 8에서 작동)에서 fancybox는 목록의 첫 번째 축소판에 대해서만 작동합니다. 이상하지 않니?

어쨌든 다른 문제를 해결하기 위해 해킹해야 할 문제가있을 수 있습니다. 사진 목록을보기 위해 필자는 원래 사진과 같은 2D 배열을 사용했지만 파이어 폭스에서만 작동하므로 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

나는 당신의 코드를 보았다. fancybox가 하나의 항목에만 적용되는 IE 문제에 대해서는 올바른 방향 일 수 있습니다.

fancybox가 첫 번째 이미지에 적용하지만, 그 이후 어떤이 total 변수 이것은

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

어떤 이유로 IE7 1로 동일하다고 스크립트를 기반으로 알려줍니다되지 않는다는 사실 내 가정은 팬시 박스를 jQuery('a#thumb' + b)에 연결하는 for 루프를 가지고 있기 때문입니다. 이것은 한 번만 발동해야합니다. 즉, 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({ .... }); 

어쨌든 그냥 몇 가지 아이디어 ... 크롬 문제와 회전 목마를 들어

, 당신은 오프 기회에, 크롬의 회전 목마 플러그인을 테스트 한 : 같은 곤충?

Answer 2

나는 어린이들에게 문제가 될 것이라고 생각합니다. IE7에서 나를 위해 일하지 않습니다