Petite Galerie Full CSS valide

[nickwe]

Bonjour,

Je voullais d'abord vous faire part d'une galerie full CSS qui valide:

http://www.cssplay.co.uk/menu/lightbox.html

Ce sont donc des miniatures qui au survol de la souris prennent leur taille originale grâce aux CSS.

Je recherche à présent un tutoriel spécifique dont je n'arrive plus à mettre la main dessus et qui permettait que lorsqu'on cliquait sur une image, elle apparaissait en grand et en surexposition au beau milieu de la page (donc sans ouvrir de pop-up ou de nouvelle fenêtre) et top du top, le reste de la page s'assombrissait, mettant bien en valeur la photo. Je pense que ça utilisait du Javascript.

Un peu comme lorsqu'on clique sur le images d'une des galerie de ce site:

http://www.tiaret.biz/bildo

Donc si quelqu'un à le lien de ce tutoriel spécifique pour agrandir l'image et assombrir le reste de la page, je suis preneur.

++

[Théo B.]

Tu peux le faire sans Javascript.

Tu mets chacune de tes images dans un div qu'on va appeler 'agrandisseur'.

Tu définis agrandisseur comme tu le veux. Ensuite

Ainsi :

.agrandisseur:hover {
width:100%;
height:100%; /* Je pense que les pourcentages, c'est pas top. Si vous trouvez une solution... */
background-color:#ccc;
filter:alpha(opacity=60);  
-moz-opacity:0.60;
opacity: 0.60; /* Filtres de transparences */
}

Puis, ton image en question (tu lui appose une class appelée image)

.image {
border:0;
height:1234px;
width:1234px; /* Taille de la miniature */
}
.image:hover {
height:4321px;
width:4321px;/*taille agrandie */
}

Je pense que ça devrait marcher, normalement.

//EDIT : Fenetres de code.

Modifié 1 Avril 2006 par Théo B.

[Ifmy]

Sinon y a ça qui est magnifique et correspond exactement à ce que tu recherches http://www.huddletogether.com/projects/lightbox2/

[nickwe]

Merci beaucoup à vous deux:

Théo B. => Ta solution semble semble déjà être celle utilisée pour aggrandir les vignettes, ce qui ne m'arrangerait pas trop vu que ça prendrait une éternité pour charger toutes les images en taille originales.

Ifmy => Merci, c'est EXACTEMENT la page sur laquelle j'étais déjà tombée et que je recherchais en vain :-)

++

[xpatval]

Sinon y a ça qui est magnifique et correspond exactement à ce que tu recherches http://www.huddletogether.com/projects/lightbox2/

<{POST_SNAPBACK}>

Mais ça n'est plus du full-css... Et si JS n'est pas actif, il faut lui trouver son équivalent en css...

xpatval

[al nassara]

Bonjour, je reviens un peu sur ce sujet parce que je trouve la galerie vachement jolie, mais je ne comprend pas comment lorsqu'on passe la souris au dessus d'une image, elle s'agrandi (jusque la ca va) et elle passe par dessus les autres.. au lieu de tout décaler..

donc je voudrais savoir si c'est possible de faire quelque chose d'un peu comme ça mais pour des photos dans un texte par exemple.

merci

[karnabal]

Salut,

Il faudrait mettre en place cette méthode décrite sur Alsacréations. Bien sûr, tu mets une image à la place du bloc contenant les informations à afficher.

Mais ça n'est plus du full-css... Et si JS n'est pas actif, il faut lui trouver son équivalent en css...

Désactive javascript et tu verras que pour la Lightbox 2.0 l'image s'affiche très bien sans dans le navigateur.

Modifié 3 Mars 2007 par karnabal

[xpatval]

Salut,

Il faudrait mettre en place cette méthode décrite sur Alsacréations. Bien sûr, tu mets une image à la place du bloc contenant les informations à afficher.

Désactive javascript et tu verras que pour la Lightbox 2.0 l'image s'affiche très bien sans dans le navigateur.

Oui, l'image s'affiche, mais sur une nouvelle page, et seule. Autrement dit, l'effet accordé par JS n'est plus.

Dans cet exemple, c'est du full-css.

xpatval