Pour faire une galerie photo

soupaloignon · 28/02/2008 19:52:50

Bonjour,

Un petit tuto pour créer un ou plusieurs galeries photos dans votre Zite préféré.
La galerie affiche des vignettes. Un clic sur une vignette affiche un popup avec la photo taille réelle.
Les vignette sdoivent faire toute la même taille, de même que les photos originales.
Testé avec Firefox 2.0.0.12 sous Ubuntu (Linux). Pas testé sous win, donc merci de vos retour avec cette config.

Je ne prétend pas qu ele code soit conforme w3c, mais il fonctionne. D'ailleurs si quelqu'un sait l'optimiser dans ce sens, là aussi retour bienvenus.

Un exemple de la galerie ici : http://www.soupaloignon.net/zite/

Tout d'abord rajouter ces lignes dans le fichier template.php, à l'intérieur de la balise <head>
Avant il faut modifier les valeurs de :
var hauteur_popup=ICI-METTRE-LES-DIMENSION-DE-VOTRE-IMAGE-ORIGINALE-EN-HAUTEUR;
var largeur_popup=ICI-METTRE-LES-DIMENSION-DE-VOTRE-IMAGE-ORIGINALE-EN-LARGEUR;

Code à insérer dans la balise <head>

<script type="text/javascript">
function open_window1(votre_page)
{
	var hauteur_popup=581;
	var H = (screen.height - hauteur_popup) / 2;
	var largeur_popup=484;
	var L = (screen.width - largeur_popup) / 2;
	pop_up = window.open(votre_page,"Popup","status=no,scrollbars=no,resizable=yes,height="+hauteur_popup+",width="+largeur_popup+",top="+H+",left="+L);
}
</script>

Dans la page qui doit accueillir votre galerie, passez en édition html et coller le code suivant. Cela vous donnera une série de 3 vignette horizontales, avec un commentaire sous chaque vignette. A vous d'adapter en fonction de vos besoins.

<div align="center">
<table border="0" width="80%" align="center">
<tbody> <tr> <td> 
<div align="center"> <a href="javascript:open_window1('zfiles/2.jpg');">
<img style="border-width: 0px; width: 160px; height: 192px" src="zfiles/3.jpg" border="0" alt="[JPG] 0016-s.jpg" title="[JPG] 0016-s.jpg" width="160" height="192" /></a> 
</div> </td> <td>
<div align="center"><a href="javascript:open_window1('zfiles/4.jpg');">
<img src="zfiles/5.jpg" border="0" alt="" width="160" height="192" /></a> 
</div></td> <td> 
<div align="center"> <a href="javascript:open_window1('zfiles/6.jpg');">
<img src="zfiles/7.jpg" border="0" alt="" width="160" height="192" /></a> </div> 
</td> </tr> <tr> <td> 
<div align="center">VOTRE COMMENTAIRE</div> </td> <td>
<div align="center">VOTRE COMMENTAIRE</div> </td> <td>
<div align="center">VOTRE COMMENTAIRE</div> </td> </tr> 
</tbody> </table> </div>

Dernière modification par soupaloignon (07/03/2008 05:20:59)

Vektrox · 28/02/2008 22:22:55

Salut soupaloignon

Content que l'on propose une galerie, ZITE s'améliore et c'est tant mieux, merci pour tous

rebel · 28/02/2008 22:24:41

désolé sous firefox win

tes var hauteur_popup=DIMENSION-DE-VOTRE-IMAGE-ORIGINALE;
var largeur_popup=DIMENSION-DE-VOTRE-IMAGE-ORIGINALE;

dans les balise head
apparait en haut de page avant le template

bas très bon - désolé

soupaloignon · 28/02/2008 22:47:57

Vektrox a écrit :

Salut soupaloignon
Content que l'on propose une galerie, ZITE s'améliore et c'est tant mieux, merci pour tous

Bon, c'est pas vraiment un module non plus, juste des portions de code, mais si cela peut être utile

rebel a écrit :

désolé sous firefox win
tes var hauteur_popup=DIMENSION-DE-VOTRE-IMAGE-ORIGINALE;
var largeur_popup=DIMENSION-DE-VOTRE-IMAGE-ORIGINALE;
dans les balise head
apparait en haut de page avant le template

bas très bon - désolé

J'ai rebooté sur win, cela faisait au moins 6 mois qu'il n'avait pas pris l'air
Je ne vois rien de ce que tu décris Rebel. Sous Firefox 2.0.0.7 ça passe nickel, sous ie 6.0.28 aussi (xp sp1). Par contre cela m'a permis de voir que le template utilisé avait un bugg. Ou plutôt que ie interprète le css comme une casserole une fois de plus.

Tu peux envoyer une copie d'écran de ce que tu as vu ?

Dernière modification par soupaloignon (28/02/2008 22:54:08)

rebel · 29/02/2008 01:15:56

rebel a écrit :

Tu peux envoyer une copie d'écran de ce que tu as vu ?

voila

soupaloignon · 29/02/2008 01:22:08

Je pensais voir où étais l'erreur, et la capture l'a confirmé, ou plutot ton site.

Dans le head il faut mettre :

<script type="text/javascript">
function open_window1(votre_page)
{
    var hauteur_popup=581;
    var H = (screen.height - hauteur_popup) / 2;
    var largeur_popup=484;
    var L = (screen.width - largeur_popup) / 2;
    pop_up = window.open(votre_page,"Popup","status=no,scrollbars=no,resizable=yes,height="+hauteur_popup+",width="+largeur_popup+",top="+H+",left="+L);
}
</script>

et non pas :

var hauteur_popup=DIMENSION-DE-VOTRE-IMAGE-ORIGINALE;
var largeur_popup=DIMENSION-DE-VOTRE-IMAGE-ORIGINALE;

Dernière modification par soupaloignon (07/03/2008 05:23:00)

soupaloignon · 29/02/2008 14:33:24

J'ai rajouté dans le 1er post un lien vers un exemple de cette galerie

alexandre · 03/03/2008 20:16:26

Bonjour à tous !!

je suis un petit nouveau et je suis entrain d'explorer zite et de onstituer un site pour un ami !!

Bon je vous donne le lien http://enrique.touchepasamongoldorak.com

J'ai une erreur de script pour faire fonctionne cette galerie !!

Si quelqu'un avait une idée je suis preneur !

Voici mon templates:
<!DOCT YPE 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><?php echo $zite->content['menu_title'].', '.$zite->get_data('site_title') ?></title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function open_window1(votre_page)
{
var hauteur_popup=581;
var H = (screen.height - hauteur_popup) / 2;
var largeur_popup=484;
var L = (screen.width - largeur_popup) / 2;
pop_up = window.open(votre_page,"Popup","status=no,scrollbars=no,resizable=yes,height="+hauteur_popup+",width="+largeur_popup+",top="+H+",left="+L);
}
//-->
</script>
</head>

<body>
<div id="page">
<div id="top">
<h1><?php echo $zite->get_data('site_title') ?></h1>
<h2><?php echo $zite->get_data('site_subtitle') ?></h2>
</div>
<div id="mid">
<div id="side">
<?php echo $zite->content['menu'] ?>
<?php echo $zite->get_content(1156957918, true) ?>
</div>
<div id="main">
<?php echo $zite->content['main'] ?>
</div>
<div id="break"></div>
</div>
<div id="bot">Site motorisé par <a href="http://zite.prositif.com">ZITE CMS <?php echo ZITEVER ?></a></div>
</div>
</body>
</html>

Dernière modification par alexandre (04/03/2008 17:09:05)

soupaloignon · 05/03/2008 01:17:13

Dans la partie que tu mets dans la page il faut remplacer ce qui est ecrit en majuscule par les bonnes informations. Le script ne peut deviner ni la taille de tes images, ni leurs noms, ni où elles sont stockées.

Dans la partie du template il te faudra mettre les dimensions de l'image finale à la place de celles qui y sont déjà.

Edit : Avec Firefox sous Linux ton bandeau haut est plus large que le bloc de contenu

Dernière modification par soupaloignon (05/03/2008 01:22:49)

alexandre · 05/03/2008 09:54:21

ok merci pour ton aide, et les infos sur la mise en page, je vais faire en sorte que tout cela soit cohérent !!

Merci encore et à bientôt,
Alexandre

bmael · 06/03/2008 11:40:28

alexandre, j'ai eu le même problème que toi sur un zite je ne sais pas d'où ça vient, mais ton DOCTYPE n'est pas valide. Tu as !DOCT YPE. Ensuite, ça pose des problème d'interprétation par les navigateurs.

soupaloignon · 07/03/2008 01:13:05

J'ai modifié le code à mettre en place dans la page de la galerie (dans le 1ere message de ce fil de discussion). la 1ere version était un code avec des images stockées à l'extérieur de Zite, sur un autre serveur.
Je voulais juste vérifier que cela marchait.

J'ai modifié le code avec des images stockées maintenant dans le dossier zfiles de zite. C'est plus cohérent et plus facile à comprendre

Dernière modification par soupaloignon (07/03/2008 01:13:45)

ANNIE · 23/05/2008 17:52:47

Comment intégrer un tableau excel interactif?

Merci de votre réponse
Annie

Dernière modification par ANNIE (23/05/2008 17:53:44)

soupaloignon · 04/06/2008 13:45:05

ANNIE a écrit :

Comment intégrer un tableau excel interactif?

Qu'est ce que tu appelles un tableau excel interactif ?

Forum ZitePLUS

#1 28/02/2008 19:52:50

Pour faire une galerie photo

#2 28/02/2008 22:22:55

Re : Pour faire une galerie photo

#3 28/02/2008 22:24:41

Re : Pour faire une galerie photo

#4 28/02/2008 22:47:57

Re : Pour faire une galerie photo

#5 29/02/2008 01:15:56

Re : Pour faire une galerie photo

#6 29/02/2008 01:22:08

Re : Pour faire une galerie photo

#7 29/02/2008 14:33:24

Re : Pour faire une galerie photo

#8 03/03/2008 20:16:26

Re : Pour faire une galerie photo

#9 05/03/2008 01:17:13

Re : Pour faire une galerie photo

#10 05/03/2008 09:54:21

Re : Pour faire une galerie photo

#11 06/03/2008 11:40:28

Re : Pour faire une galerie photo

#12 07/03/2008 01:13:05

Re : Pour faire une galerie photo

#13 23/05/2008 17:52:47

Re : Pour faire une galerie photo

#14 04/06/2008 13:45:05

Re : Pour faire une galerie photo

Pied de page des forums