11540 sujets

JavaScript, DOM et API Web HTML5

Galerie Full CSS + Tuto spécifique pr agrandir image via javascript

Bonjour,

Je suis nouveau ici, je voudrais d'abord juste commencer par dire que c'est assez déroutant le fait que tout s'aligne à droite lorsque je poste un commentaire... Enfin soit.

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.

++
Salut , tout dabord , félicitation l'affichage de la galerie est plutot réussit, je voulais savoir si je pouvais me servir de ton code , pour l'intègrer a la prochaine version de mon gestionnaire de galerie, basé sur ajax voici l'url de la version 1 : http://easynews.free.fr/admin/ en libre démo Smiley smile
pour ta fonction d'affichage en grand, tu peux utiliser une div , en position absolute , dans l'aquelle au click sur ton image tu charge en innerHTML le contenu de celle ci avec la source de l'image ...contacte moi si tu as besoins d'un coup de main @++
Attention, ce code n'est pas de moi et je pense ne pas me tromper en disant qu'il est entièrement libre. Enfin c'est à voire sur le site de l'auteur bien sûre.

Pour ce qui est de la solution que tu proposes, je ne suis malheureusement pas une brute du XHTML CSS que pour me lancer là-dedans, par contre je vais peut-être tenter le coup pour le fun.

Très prometteuse ta galerie, je vais suivre ça de près...

++
nickwe a écrit :
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.

C'est cool, mais pour qq qui n'as pas l'ADSL comme moi, toutes les images de la page sont chargée dans le navigateur, dans ce cas 1.3Mo environ, il faut un peu de patience... elle sont toutes jolies, ça va pour cette fois Smiley cligne
a écrit :
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.

++
Sans l'assombrissement, ça peut t'interesser ?
chmel => En effet, ça prend bcp de temps à charger donc non idéal pour les faibles connexion, l'avantage c'est que une fois chargé, tout est instantanné Smiley smile

Merci pour le lien que tu m'as donné, ça ressemble à celui que je recherchais, je suis finallement tombé sur le lien que je recherchais, le voici:

http://www.huddletogether.com/projects/lightbox2/

Il fait même beaucoup plus que ce que je ne pensais Smiley smile

Une fois une image affichée en taille originale, il charge automatiquement l'image suivante en taille originale et propose ensuite un lien vers cette image, permettant de ne pas avoir à revenir aux vignettes.

a écrit :
je te tient informé , de l'avancé de la version 2 smile

Ok merci.

++
Effectivement c'est vraiment très beau, ca fait pro, le seul souci reste les utilisateurs qui désactivent java script, mais pour un tel résultat, je suis pret a franchir le pas Smiley smile
Tiens salut olivier,

à propos de ton tuto, j'ai trouvé une petite optimisation (pas une amélioration puisque ça fonctionne parfaitement déjà).

ça consiste à générer le code html de la liste de définition qui reçoit l'image et le commentaire en javascript. Comme ça si le javascript utilisateur est inactif il reste simplement la liste des liens.
clb56 a écrit :
Tiens salut olivier,

à propos de ton tuto, j'ai trouvé une petite optimisation (pas une amélioration puisque ça fonctionne parfaitement déjà).

ça consiste à générer le code html de la liste de définition qui reçoit l'image et le commentaire en javascript. Comme ça si le javascript utilisateur est inactif il reste simplement la liste des liens.


Wep, j'y avais pensé, mais je trouve que ça complique le code JS (à la base mes tutos sont des choses assez simples facilement réutilisable que l'on peut modifier comme on veut pour améliorer).
Voilà, la raison pour laquelle ça n'est pas fait Smiley cligne tout simplement !

(par contre, il y a des tutos pour lesquels il manque des trucs et là c'est pas pure flemme !)
Modifié par Olivier (12 Apr 2006 - 11:40)
Olivier a écrit :

à la base mes tutos sont des choses assez simples facilement réutilisable que l'on peut modifier comme on veut pour améliorer


oui c'est vrai que c'est une excellente raison, et on en profite d'ailleurs tous pleinement Smiley cligne
en ce qui concerne la lightbox (2), et apèrs l'avoir testé, je ne trouve pas que cela soit une très bonne solution car elle perturbe la navigation de l'utilisateur (moi le premier).

En effet, lorsque je clique sur une image pour la voir en grand, je reviens toujours en arrière en cliquant sur le bouton adéquat de mon navigateur, ou plutot avec le mouvement de la souris.
En visualisant la galerie, je dois cliquer sur l'image pour la fermer ce qui est contraire aux habitudes Smiley decu
Modifié par Noisequik (13 Apr 2006 - 09:16)
Salut,
bah moi je la trouve assez terrible cete lightbox, il y'a un bug étrange avec sous Opera, l'image s'aggrandis au clic, mais reprends sa taille initiale au relachement (comme en javascript avec onclick... mais en css)
En réalité pour être honnête je suis un peu dégouté de tomber la dessus alors que je viens juste de boucler ma galerie full CSS grâce à laquelle j'ai perdu mes cheveux par poignées

En attendant si ca peut interresser quelqu'un, j'en ai fait une version minimaliste bien moche que vous pouvez voir ici

En résumé l'objectif était:

-Bouton avec roll-over, et affichage de miniatures et titre/legende au survol, puis ouverture de l'image haute resolution au clic
-Pas de javascript
-Fonctionelle même sans la CSS
-entièrement stylable, css oblige
-Compatibilité maximale (pour l'instant cette version fonctionne au poil sous opera 8, FF 1.5 et IE6, je n'ai pas pris le temps de tester autre chose, j'avais un problème sous mac avec la version precedente visible en application sur ce site, je suppose que maintenant c'est reglé mais si quelqu'un pouvais m'ôter de ce doute je lui en serais reconaissant
-Valide W3C... (sauf que j'ai du utiliser un cursor:hand pour que les liens apparaissent bien comme tels partout, et que j'ai eu la flemme d'ajouter les balises alt sur mon exemple)

Voilà je crois que c'est tout, si quelqu'un a des remarques, suggestions, conseils etc... je suis evidemment preneur.
Modifié par Resh (13 May 2006 - 01:41)
salut a tous Smiley smile
bon hé bien j'apporte ma contribution... je voulais reproduire ce script mais en plus simple et utilisable par n'importe qui ...


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
var coeff=4;//Coefficient de reduction
//var larg_div = parseInt(document.getElementById("madiv").style.width);
var im=new Image();
function chargementImg(){

im.src="URL DE L'IMAGE A METTRE ICI";
actif=setTimeout('controleChargement()',300);
}
function controleChargement(){ 
clearTimeout(actif); 
if(im.complete){ // image complètement chargée
//alors on fait l'action désiré ( on l'affiche ... )
var larg=im.width;//largeur maxi de l'image
var haut=im.height;//hauteur maxi de l'image
changer();
}
//sinon on appel la fonction elle même
else {
	actif=setTimeout('controleChargement()',1000)
	}
} 
function test(){
var larg_div = parseInt(document.getElementById("madiv").style.width);
chargementImg();
}
function changer(){

if ( parseInt(document.getElementById("madiv").style.width) < im.width  ) {
coeff = coeff-0.2;
document.getElementById("madiv").style.width = Math.round(im.width/coeff)+"px";
document.getElementById("madiv").style.height = Math.round(im.height/coeff)+"px";
document.getElementById("madiv").style.marginLeft = -(parseInt(document.getElementById("madiv").style.width) /2)+"px";
document.getElementById("madiv").style.marginTop = -(parseInt(document.getElementById("madiv").style.height) /2)+"px";
chang=window.setTimeout('changer();',60);//vitesse de l'effet
}
else {
	window.clearTimeout(chang);
	document.getElementById("monimg").src = im.src;
}
}
function initial() {
if (document.image.width > larg/4) {
window.clearTimeout(chang);
coeff = coeff+0.2;
document.getElementById("madiv").style.width = Math.round(larg/coeff);
document.getElementById("madiv").style.height = Math.round(haut/coeff);

initi=window.setTimeout('initial();',60);//vitesse de l'effet
}
else {window.clearTimeout(initi);}
}
</script>
</head>

<body>
<input type="button" value="test" onclick="test()" />
<div id="madiv" style="width:200px; border:5px solid #CCCCCC;position:absolute;left: 50%;top: 50%;">
<img src="" id="monimg" />
</div>
</body>
</html>


en espérant que cela serve a quelqu'un
Vu que je suis quand même l'initiateur de ce post, permettez moi de vous présenter le résultat de ma galerie

http://www.leablog.be (site de ma petite fille Smiley smile )

avec 4 niveaux d'accessibilité Smiley biggrin

Le script que j'utilise pour générer la galerie est zenphoto: http://www.zenphoto.org

Le template utilise du XHTML et du CSS valide au maximum et surtout: aucun tableau!

Ensuite j'utilise l'hoverbox pour aggrandir les vignettes via CSS: http://sonspring.com/journal/hoverbox-image-gallery

Ensuite lightbox pour afficher les images en surimpression de la page grâce a du javascript. Si vous avez désactivé le javascript, les photos s'afficheront quand même vu que les liens pointent directement vers les images (c'est d'ailleurs ce qui se passe si vous ouvrez les images dans des onglets plutôt que de simplement cliquer dessus et voire lightbox en action).

Et finallement la possibilité d'avoir les mêmes galeries en flash grâce à simpleviewer:
http://www.airtightinteractive.com/simpleviewer/
Faut cliquer sur le logo "F". Exemple: http://leablog.be/albums/060519/sv

Pour les quatre niveaux d'accessibilité dont je parlais:

1: Sans CSS, sans javascript, sans flash: La galerie s'affiche
2: Avec CSS: profite de l'hoverbox
3: Avec Javascript: profite de lightbox
4: Avec Flash: profite de simpleviewer

Et force est de reconnaître que même si les galeries en flash sont les moins accessibles, elles restent les plus facile à naviguer grâce notamment au préchargement de toutes la galerie au fur et à mesure.

Voilà, c'est tout, on s'amuse comme on peut entre deux biberons et la plage à 30° Smiley lol

++
lol pas mal Smiley cligne
de mon coté je continus a bosser sur ma galerie en ajax Smiley smile
la version 2 devrait plaire a pas mal de gens Smiley smile
pour ta galerie , je ne vois pas l'effet lightbox , pourtant javascript est activé ....
pour une raison que j'ignore, il faut que toute les vignettes de la galerie soit chargée avant que le script soit pris en compte! Donc fait un refresh, attend que tout soit chargé, et ensuite clique sur une photo d'un album.

Pour le fun et pour le sport, d'ici quelques jours (une fois que j'aurai un peu de temps en fait), je vais virer lightbox et mettre à la place ceci:

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

Voilà,

++
Sujet clos
Aller à