0
Ich bin wirklich verwirrt mit dem folgenden.jQuery - Benutzerdefinierte Galerie - Funktioniert in FF, Chrome, Safari & IE8, aber nicht IE7 - Zeiger?
Wenn die Galerie in FF/Chrome usw. erstellt wird, wird durch Klicken auf "Weiter" das Bild auf "Eins" verschoben und der Hover-Status verbleibt, damit Sie erneut klicken können. In IE7 wird das Bild um eins verschoben, dann schlägt der Hover-Status fehl und wird nicht wieder angezeigt. Andere Effekte, die ich auf meiner Seite habe, funktionieren weiterhin.
Meine jQuery kann nicht die beste sein, also entschuldige ich mich für das Durcheinander. Abgesehen von dem vorliegenden Problem sind alle allgemeinen jQuery-Zeiger willkommen.
<!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>
jede Hilfe sehr geschätzt !!
EDIT # 1: Weiter zu dem oben, würde ich lesen, dass IE7 Probleme mit dem IMG-Selektor hat, aber ich habe versucht, dies zu einem generischen Klassennamen usw. vergeblich zu ändern. Noch mehr Hinweise?
EDIT # 2: Ich kämpfe immer noch mit diesem - ich habe hier ein anschauliches Beispiel hinzugefügt: (auch neue Links hinzuzufügen, wie es scheint, sorry!) Auf
http://gallery.andycopley.co.uk/gallery.htm –
Ooh! Ein bisschen Fortschritt. Ich habe das Beispiel so geändert, dass die Galerie zu hoch ist. Mit diesem Beispiel können Sie in IE7 sehen, dass die Galeriesteuerelemente immer noch angezeigt werden, aber BENEATH den Bildern. Also hatte Keith mit dem CSS-Vorschlag recht. Ich kann immer noch nicht scheinen, dies zu beheben, aber keine Menge von ZIndex-Trickser scheint die Bilder unter den Galerie-Steuerelementen zurück zu zwingen. Bitte sagen Sie mir, es gibt eine einfache/elegante CSS-Lösung !? –