Galerie type jquery sans jquery problème CSS

Bonjour,

Depuis peu je me suis penché sur le développement d'une galerie photo avec agrandissement d'image façon JQuery en codant mes propre fonctions, opération réussi coté JavaScript, mais comme à mon habitude j'ai encore beaucoup de mal à mettre en place le CSS , je ne sais pas comment je pourrais faire zoomer l'image au centre de ma galerie voir le TOP sur chacun des images cliquées.

Pour vous donner une idée du problème j'ai mis en ligne un exemple qui parlera bien mieux qu'un texte peu explicite.

merci d'avance

PS: à quand l'identification sur le site et le forum en même temps
Modifié par evdog69 (19 Apr 2010 - 21:50)

Hello,

Pas très compliqué, vu que tu utilises une <div> séparée (#ImgZoomCadre) pour afficher l'image zoomée.

Dans l'idée, il faut donner à cette <div> la même dimension et le même positionnement que l'élément de référence (à déterminer : fenêtre du navigateur ? galerie ? vignette ? etc.). Ensuite il ne reste plus qu'à réaliser un centrage horizontal / vertical sur ton <img>.

Si tu veux centrer par rapport à ta galerie :

#album {
overflow:hidden; /* contexte de formatage pour que les flottants soient pris en compte dans le calcul de la hauteur de #album */
position:relative; /* pour servir de référence à #ImgZoomCadre */}

#ImgZoomCadre {
display:none; /* à faire passer en "block" avec JS quand il y a une image à afficher */
position:absolute; 
top:0;
left:0;
z-index:1; /* au dessus de la galerie */
width:100%; /* toute la largeur du parent */
height:100%; /* toute la hauteur du parent */
text-align:center; /* centrage horizontal de l'image */}

#imagevoir {
margin-top:...px; /* décalage pour faire le centrage vertical */}

Essaie déjà ça, on verra par la suite pour faire un centrage vertical un peu plus propre.

S'il y a un problème mets ces modifications en ligne et tiens au courant.

je ne vois pas beaucoup de changement, voici la nouvelle version avec tes modifs
Modifié par evdog69 (19 Apr 2010 - 21:51)

En plus de te proposer un début de solution, je t'ai expliqué son fonctionnement.

Mais as-tu compris ce que je voulais faire ? Il ne s'agit pas de simplement copier / coller les bribes de code que je t'ai fourni...

BeliG a écrit :
Dans l'idée, il faut donner à cette <div> (#ImgZoomCadre) la même dimension et le même positionnement que l'élément de référence.

Or, les styles width:100% et height:100% que tu dois ajouter sur #ImgZoomCadre vont être écrasés par les styles que tu injectes en dur via JS et l'attribut style. Pour que ma solution fonctionne, tu dois fixer une taille sur l'image, et non sur le conteneur.

Et où sont tous les styles que je t'ai suggéré de mettre sur #ImgZoomCadre (width, height, top, bottom, ...) ?

Je vois autre chose qui va poser problème avec le centrage horizontal : mets une bordure sur #album et tu verras que ta galerie n'est pas parfaitement centrée à l'intérieur...

après avoir passé la journée dessus je pense que je ne vais pas réussir à obtenir ce que je cherche, merci quand même d'avoir bien voulu te pencher sur mon souci.

C'est dommage, la solution est vraiment toute bête...

J'ai peut-être été un peu vite dans mes explications, tu veux qu'on re-essaie pas à pas ?