0
Je suis vraiment déconcerté avec ce qui suit. Lorsque la galerie est créée dans FF/Chrome, etc., cliquez sur suivant pour déplacer l'image sur un et l'état du survol reste à cliquer à nouveau. Dans IE7, l'image se déplace sur un, puis l'état stationnaire échoue et ne réapparaît pas. Les autres effets que j'ai sur ma page continuent de fonctionner.jQuery - Galerie personnalisée - Fonctionne dans FF, Chrome, Safari et IE8, mais pas IE7 - pointeurs?
Mon jQuery n'est peut-être pas le meilleur, alors je m'excuse pour le bordel. Autre que le problème à portée de main, tous les pointeurs jQuery généraux sont les bienvenus.
<!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>
toute aide grandement appréciée !! En plus de ce qui précède, je lisais que IE7 a des problèmes avec le sélecteur img, mais j'ai essayé de changer cela en un nom de classe générique etc en vain. D'autres indices?
EDIT # 2: Je suis toujours aux prises avec - j'ai ajouté un exemple vivant ici: (trop nouveau pour ajouter des liens, il semble, désolé!)
http://gallery.andycopley.co.uk/gallery.htm –
Ooh! Un peu de progrès. J'ai modifié l'exemple pour que la galerie soit trop haute. En utilisant cet exemple, vous pouvez voir dans IE7 que les contrôles de la galerie apparaissent toujours mais SOUSCRIT les images. Keith avait raison avec la suggestion CSS. Je n'arrive toujours pas à résoudre ce problème, mais aucune manipulation de zIndex ne semble forcer les images sous les contrôles de la galerie. S'il vous plaît dites-moi, il y a une solution css simple/élégante !? –