Galerie photo (type MobileMe d'Apple) et compatibilité IE7-8

Bonjour à tous,

Je suis en train de réalisé une galerie photo à l'aide de la librairie jQuery. Celle-ci s'inspire (le mot est faible) de la galerie photo que propose Apple (galerie mobileMe).
Une version jQuery avec un petit tutorial avait déjà été réalisé sur la toile, mais malheureusement l'affichage était totalement différent suivant le navigateur utilisé, beaucoup de fonctionnalités n'était pas implémentées et de nombreux problèmes apparaissaient avec les IE.

Voici le lien vers la galerie:
http://constantinorodriguez.free.fr/gallery.html

Vous remarquerez que l'affichage sous Firefox et Google Chrome semble ne pas poser de problème (mis à part un problème de chargement d'image avec imageflow, le carrousel).

En revanche sur les versions d'IE c'est horrible. Pour le moment je laisse de côté IE6 et j'essaie de rendre compatible la galerie avec IE7 et IE8.

Bugs sur IE7:

_ Les boutons de retour vers l'album et vers la galerie n'apparaissent pas.
_ Les images dans la vue grille ne s'alignent pas vers le bas.
_ Problème de proportion sur les images type portrait sur vue mosaïque et élargie.

Sur IE8, je n'ai pas trop confiance aux versions standalones, donc dites moi si vous voyez des bugs.

Voila si des personnes charitables pouvaient m'aider à trouver des solutions se serait avec grand plaisir.
Si ca intéresse du monde je proposerais par la suite les sources de la galerie.

Salut,

J'en suis toujours au même point avec mes bugs
Personne ne peut m'aider?

Pour les boutons je vous donne plus de détails:

Code html:

<div class="button">
<span class="label">Galerie Photo</span>
</div>

Code css:

.button {
background:transparent url(img/button_left.png) no-repeat scroll left -106px;
cursor:pointer;
display:block;
float:left;
left:26px;
line-height:31px;
position:absolute;
top:14px;
z-index:10;
}
.button span {
background:transparent url(img/button_right.png) no-repeat scroll right -106px;
color:#E0E0E0;
display:block;
font-size:14px;
font-weight:bold;
height:14px;
line-height:14px;
margin-left:14px;
padding:7px 13px 10px 0;
text-shadow:0 0 2px #1E1E1E;
}

Code javaScript:

$('<div class="button">').click(function() {albumView();}).appendTo("body");

Sous Firefox ou Google chrome aucun problème le bouton apparaît en haut à gauche de l'album.

Mais sous IE7 et 6 impossible de le retrouver, les images de l'album sont portant bien affichées ce qui prouve que le js ne bloque pas (dans le js les images sont insérées après le bouton). Ce qui est d'autant plus étrange car l'insertion du bouton en dur (placé directement dans le code html) ne pose pas de problème.

J'ai placé un alert avant la création de l'album pour que vous puissiez vous en rendre compte.

Un peu d'aide ne serrait pas un luxe, la galerie doit être opérationnelle dans une semaine .

Je viens de tester sous IE8, les mêmes bugs apparaissent et en plus le carrousel ne s'affiche pas!
A l'aide!

Sur Firefox 3.5 et Opera 9.6 le bouton de retour apparait. Sur IE8 on ne voit que le titre (fleurs 2, etc.)

Je ne suis pas à même de résoudre le problème, mais les position absolues je me méfie et utilise seulmement ponctuellement, quelque soit leur z-index, ils resteront toujours masquées par un flash (et un javascript si je me trompe pas) s'il y en a un dessus.
Modifié par darkstar2023 (05 Oct 2009 - 22:52)

Merci darkstar pour ton aide.
Je vais tenter de l'insérer dans le h1 sans passer par un position absolue.

Sinon j'ai corrigé quelques erreurs mineures et la galerie fonctionne chez moi sous Firefox 3.5, Google Chrome 3, Safari 4 et Opera 10.
Si vous observez des bugs avec ces navigateurs, indiquez le moi s'il vous plait.

J'ai aussi rectifié le problème de carrousel sur les IE.

Finalement pour le bouton sous IE, le span n'était pas inséré ce qui expliquait l'invisibilité de celui-ci.
J'ai donc modifié le code js, plus de problème maintenant (oups ce n'était pas un bug css).

Par contre j'ai toujours les mêmes difficultés avec les vertical-align et les max-height sous IE, si vous avez des solutions ce serait sympa.