0
私は本当に次のことに困惑しています。jQuery - カスタムギャラリー - FF、Chrome、Safari、IE8で動作しますが、IE7では動作しません - ポインタ？
ギャラリーがFF/Chromeなどで作成されている場合、次へをクリックすると画像が1つ表示され、もう一度クリックするとホバー状態が残ります。 IE7では、イメージが1つ移動し、ホバー状態が失敗し、再び表示されません。私のページにある他の効果は引き続き機能します。
私のjQueryがベストではないかもしれないので、私は混乱のために謝罪します。手元にある問題以外に、一般的なjQueryポインターを歓迎します。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm11-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="robots" content="all" />
<title>GA - 2009 yee haw</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.dimensions.min.js"></script>
<script type="text/javascript" src="/js/jquery.easing.1.3.js"></script>
<style type="text/css" media="all">
@import "/css/screen.css";
</style>
</head>
<body>
<script type="text/javascript">
<!--//
function DrawGalleryOptions(div) {
$('gallery').css({width: '503px'});
$(div).append('<div class="gallery-title"><p style="font-size:14px;">no title</p><div class="gallery-bg gallery-bg-small"></div></div>');
$(div).append('<div class="gallery-nav"></div>');
$('.gallery-nav').append('<div class="gallery-bg"></div><div class="gallery-controls"><p class="gall-title"><a class="gallleft" href="#galleryleft" title="">Previous Image</a><a class="gallright" href="#galleryright" title="">Next Image</a></p></div>');
$('.gallery-title, .gallery-nav, .gallery-bg').css({ position: 'absolute', left: '0px', height: '30px', width: '503px' });
$('.gallery-nav').css({ height: '60px', bottom: '-60px' });
$('.gallery-bg').css({ backgroundColor: '#5974c5', opacity: 0.7, height: '60px', zIndex: 1000 });
$('.gallery-title').css({ top: '-30px'});
$('.gallery-controls').css({ position: 'absolute', zIndex: 1002 });
$('.gallery-bg-small').css({height: '30px'});
$('.gallery-title p').css({zIndex: 1002, color: '#ffffff', position: 'absolute', padding: '5px'});
$('.gallery-controls p').css({ posistion: 'absolute', zIndex: 1005, left: '0px', top: '0px' });
$('a.gallleft').css({ width: '82px', height: '45px', display: 'block', textIndent: '0', backgroundImage: 'url(/image/galleryleft.gif)', backgroundPosition: 'left top', backgroundRepeat: 'no-repeat', fontSize: '11px', color: '#ffffff', top: '15px', left: '15px', position: 'absolute', paddingTop: '25px' });
$('a.gallright').css({ width: '53px', height: '45px', display: 'block', textIndent: '0', backgroundImage: 'url(/image/galleryright.gif)', backgroundPosition: 'right top', backgroundRepeat: 'no-repeat', fontSize: '11px', color: '#ffffff', top: '15px', left: '430px', position: 'absolute', paddingTop: '25px' });
}
function ShowGalleryOptions() {
jQuery.easing.def = "easeOutQuint";
$('.gallery-title').animate({ top: '0px' }, 800);
$('.gallery-nav').animate({ bottom: '0px' }, 800);
}
function HideGalleryOptions() {
$('.gallery-title').animate({ top: '-30px' }, 800);
$('.gallery-nav').animate({ bottom: '-60px' }, 800);
}
function StopAll() {
$('.gallery-title').stop();
$('.gallery-nav').stop();
}
function MoveGallery(pic) {
$('#test2').html('>> <br />' + pic[_GalleryCurrent].src + " " + pic[_GalleryCurrent].height + " " + pic[_GalleryCurrent].width + "<br />Current: " + _GalleryCurrent);
$('.gallery').append('<img id="gallery-current" style="display:none;" src="' + pic[_GalleryCurrent].src + '" width="' + pic[_GalleryCurrent].width + '" height="' + pic[_GalleryCurrent].height + '" alt="' + pic[_GalleryCurrent].alt + '" />');
$('#gallery-current').css({ opacity: 0, display: 'block' });
$('.gallery img').css({ position: 'absolute', top: '0px', left: '0px' });
//jQuery.easing.def = "easeOutElastic";
$('.gallery-title p').html(pic[_GalleryCurrent].alt);
$('#gallery-current').animate({ opacity: 1 }, 1200, function() {
$('#gallery-last').remove();
$('#gallery-current').attr('id', 'gallery-last');
});
}
$(function() {
var pic;
pic = $(".gallery").children("img");
_GalleryMax = pic.length - 1;
_GalleryCurrent = 0;
//$('#test2').html('>><br />' + pic[_].src + " " + pic[0].height + " " + pic[0].width + "<br />Current: " + _GalleryCurrent);
$('.gallery').css({ height: 283, overflow: 'hidden', position: 'relative' });
$('.gallery').html('');
DrawGalleryOptions('.gallery');
$('.gallery').append('<img id="gallery-last" src="' + pic[_GalleryCurrent].src + '" width="' + pic[_GalleryCurrent].width + '" height="' + pic[_GalleryCurrent].height + '" alt="' + pic[_GalleryCurrent].alt + '" />');
$('.gallery-title p').html(pic[_GalleryCurrent].alt);
$('.gallery').hover(function() {
//alert('on');
StopAll();
ShowGalleryOptions();
},
function() {
//alert('off');
StopAll();
HideGalleryOptions();
});
$('a.gallright').click(function() {
$('#gallery-current').stop(false, true);
//alert('boota');
_GalleryCurrent = _GalleryCurrent + 1;
if (_GalleryCurrent > _GalleryMax) {
_GalleryCurrent = 0;
}
MoveGallery(pic);
});
$('a.gallleft').click(function() {
$('#gallery-current').stop(false, true);
//alert('boota');
_GalleryCurrent = _GalleryCurrent - 1;
if (_GalleryCurrent < 0) {
_GalleryCurrent = _GalleryMax;
}
MoveGallery(pic);
});
});
//-->
</script>
<div class="gallery">
<img class="gall-img" src="/image/gallery1.jpg" width="503" height="283" alt="Person on a lake" />
<img class="gall-img" src="/image/gallery2.jpg" width="503" height="283" alt="Building university" />
<img class="gall-img" src="/image/gallery3.jpg" width="503" height="283" alt="Random colours" />
<img class="gall-img" src="/image/gallery4.jpg" width="503" height="283" alt="Abstract - dark blue?" />
<img class="gall-img" src="/image/gallery5.jpg" width="503" height="283" alt="Random abstract" />
</div>
<div id="test2" style="font-size:18px;"></div>
</body>
</html>
任意のヘルプは大歓迎!!
EDIT＃1： 上記に加えて、私はIE7にimgセレクタの問題があることを読んでいましたが、これを汎用クラス名などに変更してみました。それ以上の手がかりは？
EDIT＃2： 私はまだこれに苦しんだ - 私はここで実際の例を追加しました：（！それはそうリンクを追加するにはあまりにも新しい、申し訳ありません）
http://gallery.andycopley.co.uk/gallery.htm –
Ooh！少しの進歩。私はギャラリーが高すぎるので、例を修正しました。この例を使用すると、ギャラリーコントロールがまだ表示されますが、イメージのBENEATHはIE7で確認できます。だからKeithはCSSの提案に正しかった。 これでも問題は解決しないようですが、zIndexトリッキーは画像をギャラリーコントロールの下に戻さないようです。 シンプルでエレガントなCSSソリューションがあると教えてください。 –