私の JQuery 画像スライダーが Firefox で動作しない理由について困惑しています。Safari と Chrome では問題なく動作しますが、IE ではまだテストしていません。これは、ボタンをクリックして次の画像をスライドさせる基本的なものです。実際の動作は次のとおりです。
http://www.alihaberfield.com/test/carouseltest/carouseltest.html
JQuery は次のとおりです。
$(window).load(function() {
var theImage = $('.gallery_wrap ul li img');
var theWidth = 790;
//wrap into mother div
$('.gallery_wrap ul').wrap('<div id="mother" />');
//assign height width and overflow hidden to mother
$('#mother').css({
width: 790,
height: 780,
position: 'relative',
overflow: 'hidden'
});
//get total of image sizes and set as width for ul
var totalWidth = theImage.length * theWidth;
$('.gallery_wrap ul').css({
width: function(){
return totalWidth;
}
});
$(theImage).each(
function(intIndex){
$(this).nextAll('a')
.bind("click", function(){
if($(this).is(".next")) {
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex + 1) * theWidth)
}, 1000)
} else if($(this).is(".previous")){
$(this).parent('li').parent('ul').animate({
"margin-left": (-(intIndex - 1) * theWidth)
}, 1000)
} else if($(this).is(".startover")){
$(this).parent('li').parent('ul').animate({
"margin-left": (0)
}, 1000)
}
});//close .bind()
});//close .each()
});//doc ready
これは、この単純なjqueryスライダーに基づいています。これは、Firefoxで機能することに注意してください。
http://brenelz.com/blog/build-a-content-slider-with-jquery/
そのスライダーと私の主な違いは次のとおりです。
- 私は古いJQueryライブラリを使用しています.レガシーな問題などのためにクライアントが必要としています.1.3.2を使用しています.
- JQuery の ul ルールに .gallery_wrap セレクターを追加して、JQuery がページ上のすべてのリストをマザー div でラップしないようにしました。
- 画像のサイズがわかっているので、var theWidth のサイズを 790px で静的にしました。これにより、このギャラリーがライトボックス内に表示されない問題が修正されました (静的な幅がないと、サイズの計算はコンテンツに対して機能しませんでした) display:none に設定します)。
仮説 1: 古い JQuery バージョンが原因で、負のマージン動作が Firefox でトリガーされない。仮説 2: 静的な幅を追加すると、Firefox の負のマージンの計算が台無しになる。
より良い仮説、動作しない他のブラウザーに関する情報/失敗する他の方法、または修正方法の提案をいただければ幸いです。