2010-01-19 18 views
3

好的,我有足夠的代碼,我可能不應該直接發佈代碼,但我不確定問題出在哪裏。jQuery不能在IE 7和Chrome中工作

有問題的頁面在letterlyyours.com/design.php。它應該如何工作的是,你輸入一個單詞,按「提交」,然後每個字母的小照片出現在下面 - 你可以上下滾動。另外,如果您點擊縮略圖,fancybox會打開以顯示完整圖像。

問題是,在Chrome中,所有滾動箭頭都被禁用。同樣在IE 6/7中(它在IE 8中工作),fancybox僅適用於列表中的第一個縮略圖。這不奇怪嗎?

無論如何,我懷疑這個問題可能是由我不得不做的一件事情來解決另一個問題。對於照片列表,我最初使用二維數組,如照片[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(); 
}); 
}); 
+0

您發佈的鏈接有點難以閱讀。你能把相關的代碼發佈到你的問題中嗎? – czarchaic 2010-01-19 17:18:04

+0

出於某種原因,http://letterlyyours.com/jcarousel/design.js.php上的文件被Microsoft Security Essentials檢測爲病毒。我認爲這是一個誤報,但如果你的用戶也看到它,那就不好。 – 2010-01-19 18:05:44

+0

@Sam它可能是由於.js.php擴展名? – 2010-01-20 17:07:39

回答

2

我看着你的代碼。您可能在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的插件旋轉木馬,在關閉的機會,它不是你的錯誤?

+0

謝謝!我做了你的建議。事實證明,我爲每個縮略圖使用相同的ID,所以它只選擇了第一個。 – 2010-02-01 19:29:18

0

我認爲這可能是一個孩子的問題。它不適合我在IE7上工作

相關問題