Instagram の画像スライダー フィードを作成しています。Chrome、Safari、Firefox、Opera では問題なく動作しますが、IE のすべてのバージョンで失敗します。エラーメッセージすら表示されず、何もしません。
背景の正しい高さを取得するには、画像の高さを親 div に戻す必要がありました。
IE では、最初の画像が読み込まれ、その後何も起こらず、最初の画像の高ささえ返されません。私は周りを検索して、.children() と .each() が IE で正しく動作していないことに関係があるのではないかと考えていますが、よくわかりません。
これが IE/jQuery の互換性の問題の原因ですか? それとも何か他のものですか？これを行う別の方法はありますか？(セキュリティ上の理由から、ほとんどの Auth トークンを削除しました)
彼女は結果の jfiddle です: http://jsfiddle.net/5ACr9/embedded/result/
(function($){
$.fn.MySlider = function(interval) {
var slides;
var cnt;
var amount;
var j;
function run() {
// hiding previous image and showing next
$(slides[j]).fadeOut(1000).removeClass("selected");
j++;
if (j >= amount) j = 0;
$(slides[j]).fadeIn(1000).addClass("selected");
// loop
setTimeout(run, interval);
}
slides = $('#insta-slider').children();
amount = slides.length;
j=0;
setTimeout(run, interval);
};
})(jQuery);
// custom initialization
jQuery(window).load(function() {
$('.smart_gallery').MySlider(5000);
//gets the height of the first image and returns it to parent
$( "#insta-slider" ).each(function() {
var newHeight = 0, $this = $( this );
$.each( $this.children(), function() {
newHeight = $( this ).height();
});
$this.height( newHeight );
});
var tid = setTimeout(resize, 5000);
function resize(){
//returns the height of each image after the first one
$( "#insta-slider" ).each(function() {
var newHeight2 = 0, $this = $( this );
$.each( $this.children(".selected"), function() {
newHeight2 = $( this ).height();
});
$this.height( newHeight2 );
});
tid = setTimeout(resize, 5000);
}
});