Galerie+ une galerie de photo automatisée

Commenter

Contenu du snippet

Attention : incompatible Firefox et autre navigateur alternatif.

Ce script vous permet d'afficher une galerie de photos sur un site web. Il vous suffit d'ajouter les photos sur le serveur pour qu'elles soient automatiquement visibles sur votre site. Bien entendu, il y a une syntaxe à respecter strictement.

Vous trouverez ici uniquement le source, si vous voulez un exemple complet, rendez vous sur louis.alessandra.free.fr

Source / Exemple : 


<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>

/************************************************************************************************************************/
/*
/* 	Auteur 	: Alessandra Louis             				
/* 	Date 	: 19.03.04					
/*	Version : 1.1
/*	Info	: Ce script est gratuit, vous pouvez l'installer sur votre site a condition de laisser apparaitre l'auteur et
/*		  de me prevenir par mel.
/*
/*	web	: louis.alessandra.free.fr
/*
/************************************************************************************************************************/

/************************************************************************************************************************/
/*
/* Vous pouvez visionner ce script sur louis.alessandra.free.fr
/* Vous pouvez trouvez ce script sur louis.alessandra.free.fr et sur www.javascriptfr.com
/*
/************************************************************************************************************************/

/************************************************************************************************************************/
/*
/*              				VARIABLES GLOBALES
/* 						(A configurer)
/*
/************************************************************************************************************************/

var photoNbHorizontal = 22; 					/* le nombre de photo horizontale 		(cfg)	*/
var photoNbVertical = 19; 					/* le nombre de photo verticale 		(cfg)	*/
var photoNb = photoNbHorizontal + photoNbVertical;		/* le nombre total de photo			(cfg)	*/
var photoEncours = 0;						/* le numero de la photo affichée			*/

var photoChemin = "photos"; 					/* le repertoire ou se trouve les photos	(cfg)	*/
var photoPrefixe = "ph"; 					/* le prefixe de toutes les photos 		(cfg)	*/ 
var photoExtention = "jpg";					/* l'extention de toutes les photos 		(cfg)	*/
var photoCadre = "img/cadre5.jpg" 				/* la localisation complete du cadre 		(cfg)	*/

/* configuration de la taille des apperçus des photos horizontales */
var photoLargeurHorizontal = "286px";				/* la largeur					(cfg)	*/
var photoHauteurHorizontal = "200px";				/* la hauteur					(cfg)	*/

/* configuration de la taille des apperçus des photos verticale */
var photoLargeurVertical = "136px";				/* la largeur					(cfg)	*/
var photoHauteurVertical = "200px";				/* la hauteur					(cfg)	*/

/* Configuration du layer de toutes les photos */
var photoLeft = "235px";					/* le left					(cfg)	*/
var photoTop = "32px";						/* le top					(cfg)	*/
var photoWidth = "286px";					/* le width					(cfg)	*/
var photoHeight = "200px";					/* le height					(cfg)	*/
var photoDuration = 2;						/* le temps d'affichage d'une photo en seconde	(cfg)	*/

/************************************************************************************************************************/
/*
/* 							FONCTIONS
/* 					(Vous n'etes pas censé modifier les fonctions)
/*
/************************************************************************************************************************/

function LayerIO(nomLay) {
/* Allume ou eteint nomLay en tps seconde 										*/
/* nomLay est un string 												*/
/* le layer nomLay doit comporter le param "filter:blendTrans(duration = tps)" 						*/

	document.all[nomLay].filters(0).Apply()
	if(document.all[nomLay].style.visibility=="hidden")
		document.all[nomLay].style.visibility="visible"
	else
		document.all[nomLay].style.visibility="hidden"	
	document.all[nomLay].filters(0).Play()
}

function photoChange(num) {
/* eteint la photo photoEncours et allume la photo num 									*/
/* num et photoEncours sont des int 											*/

	if(photoEncours != 0)
		LayerIO("layerPhoto" + photoEncours)		
	LayerIO("layerPhoto" + num)
	photoEncours = num;
}

function photoSuiv() {
/* passe a la photo suivant : photoEncours + 1 										*/ 	

	if((photoEncours != 0) && (photoEncours != photoNb))
		photoChange(photoEncours + 1);
	else 
		photoChange(1);
}

function photoPrec() {
/* passe a la photo precedente : photoEncours - 1 									*/

	if(photoEncours > 1)
		photoChange(photoEncours - 1);
	else 
		photoChange(photoNb);
}	

function photoInsertLayer(format) {
/* insert toutes les layers necessaire a l'affichage des photos 							*/
/* format peut etre "horizontal" ou "vertical"										*/
/* format defini le type de photo a inserer 										*/

var photoJ = 0;
var photoNbTmp;
if (format == "horizontal")
	photoNbTmp = photoNbHorizontal;
else if (format == "vertical")
	photoNbTmp = photoNbVertical;
else alert("Erreur (photoInsertLayer): le parametre format n'est ni 'horizontal' ni 'vertical'");

while(photoJ++ < photoNbTmp) {

/* configuration du layer photoJ */
document.write("<div id='layerPhoto");
if(format == "vertical")
	document.write(photoJ + photoNbHorizontal);
else
	document.write(photoJ);
document.write("' style='position:absolute; left:");
document.write(photoLeft);
document.write("; top:");
document.write(photoTop)
document.write("; width:");
document.write(photoWidth);
document.write("; height:");
document.write(photoHeight);
document.write("; z-index:10; filter:blendTrans(duration=");
document.write(photoDuration);
document.write("); visibility: hidden'>");

/* configuration du lien vers la photo de taille entiere */
document.write("<div align='center'><a href='");
document.write(photoChemin)
document.write("/");
document.write(photoPrefixe);
if(format == "vertical")
	document.write("10");
document.write(photoJ)
document.write(".");
document.write(photoExtention);
document.write("' target='_blank'>");

/* configuration de la photo en apperçu */
document.write("<img src='");
document.write(photoChemin)
document.write("/");
document.write(photoPrefixe);
if(format == "vertical") {
	document.write("10");
	if (photoJ<10)
		document.write("0");
}
document.write(photoJ)
document.write("_.");
document.write(photoExtention);
document.write("' width='");
if(format == "horizontal"){
	document.write(photoLargeurHorizontal);
	document.write("' height='");
	document.write(photoHauteurHorizontal);
	document.write("' border='0' alt='");
	document.write(photoJ);
	document.write("' lowsrc='photo");
	document.write(photoJ);
	}
else {
	document.write(photoLargeurVertical);
	document.write("' height='");
	document.write(photoHauteurVertical);
	document.write("' border='0' alt='");
	document.write(photoJ + photoNbHorizontal);
	document.write("' lowsrc='photo");
	document.write(photoJ + photoNbHorizontal);
	}

/* fermeture des balises */
document.write("'></a></div></div>");
}
}

/**********************************************************************************************************************/
/*
/* 						INSERTIONS DES AUTRES LAYERS
/*					(Configurez le left, top, width, height des 3 layer)
/* 
/**********************************************************************************************************************/

/* affichage du cadre */
document.write("<div id='layerCadre' style='position:absolute; left:215px; top:10px; width:325px; height:242px; z-index:5'><img src='");
document.write(photoCadre);
document.write("' width='325' height='242'></div>");

/* affichage du menu */
document.write("<div id='layerMenu' style='position:absolute; left:50px; top:20px; width:155px; height:240px; z-index:11'>");
document.write("<h2>Galerie Photo</h2><p>");
var photoI = 0;
while (photoI++ < photoNb){
	document.write(" <a href='#' onclick='photoChange(");
	document.write(photoI);
	document.write(")'>");
	document.write(photoI);
	document.write(" </a> ");
	if (photoI%10 == 0)
		document.write("<br>");
}
document.write("</p></div>");

/* affichage des boutons precedent et suivant */
document.write("<div id='layerPrecSuiv' style='position:absolute; left:224px; top:250px; width:306px; height:14px; z-index:13'>");
document.write("<p align='center'><a onClick='photoPrec()' href='#'> Precedent</a> - <a onclick='photoSuiv()' href='#'>Suivant</a></p>");
document.write("</div>");

photoInsertLayer("horizontal");
photoInsertLayer("vertical");

</script>
</head>

<body>
</body>
</html>

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (louis_alessandra)