Flux rss
Rechercher : dans
Par : Pertinence Date Nom d'utilisateur
Statut : Non résolu

Javascript - Galerie photo effet slide/glisse

ruvele, le lundi 10 mars 2008 à 21:12:02
Bonjour,

j'aimerais créer une sorte de galerie photos en faisant une transition "particulière" entre chaque photo : une sorte d'effet ajax : lorsque l'on clique sur la flèche, la photo suivant apparait avec un effet de glisse.
Pour cela, j'ai pensé à mettre toutes les images sur un seul calque et les faire avancer par des pas de 400 px (largeur de mes images). On m'a parlé de l'opérateur modulo pour cela mais j'avoue que je ne comprends pas bien comment agencer mon code.

voici ce que j'avais fait à la base mais il s'agit d'un défilement classique d'image. Est ce que quelqu'un pourrait m'aider à modifier mon code pour arriver à ce que j'explique ci-dessus ?

je vous remercie par avance,

voici le code initial : 

<!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>
	<title>Gallerie</title>

<script language="javascript" type="text/javascript">
	<!--
	
	var img_actuelle = 1;
	var no_images = 8;
	
	function go_avant() {
		
		document.getElementById("img"+img_actuelle).style.visibility = "hidden";
		
		img_actuelle--;
		
		if(img_actuelle < 1) { img_actuelle = no_images; }
		
		document.getElementById("img"+img_actuelle).style.visibility = "visible";
		
	}
	
	function go_apres() {
		
		document.getElementById("img"+img_actuelle).style.visibility = "hidden";
		
		img_actuelle++;
		
		if(img_actuelle > no_images) { img_actuelle = 1; }
		
		document.getElementById("img"+img_actuelle).style.visibility = "visible";
		
	}
	
	function generer() {
		
		var html = "";
		
		for(var i = 1; i < (no_images+1); i++) {
		
			html += '<div id="img'+i+'" class="images"><img src="pics/pic'+i+'.jpg" /></div>';
		
		}
		
		document.getElementById("boite_images").innerHTML = html;
		
	}

	//-->
	</script>
	
	<style type="text/css">
		
	#boite_galerie {
		position:absolute;
		width:400px;
		height:330px;
	}	
	
	#boite_images {
		position:absolute;
		width:400px;
		height:300px;
	}
	
	.boutons {
		position:absolute;
		width:30px;
		height:20px;
		top:310px;
		background-color:#FF0000;
	}
	
	#nav_apres {
		left:370px;
	}
	
	.images {
		position:absolute;
		visibility:hidden;
	}
	
	#img1 {
		visibility:visible;
	}
		
	</style>
	

</head>

<body onload="generer();">

<div id="boite_galerie">

	<div id="boite_images">
		
	</div>
	
	<div id="nav_avant" class="boutons" onclick="go_avant();"> <<< </div>
	
	<div id="nav_apres" class="boutons" onclick="go_apres();"> >>> </div>

	
</div>

</body>
</html>


Configuration: Windows XP
Firefox 2.0.0.12
Répondre à ruvele  Signaler ce message aux modérateurs Aller au dernier message

1


  • Ce message vous semble utile, votez !
  • Signaler ce message aux modérateurs
 coenonympha, le samedi 9 août 2008 à 11:50:17
je ne suis pas sur d'avoir tout à fait compris ce que tu voulais mais je pense avoir saisi que tu veux que les images glissent progressivement quand tu cliques sur un bouton.

Cet effet peut être facilement réalisé grace à la librairie javascript jQuery.

Exemple ici : http://demos.flesler.com/jquery/scrollTo/

Si tu ne sais pas te servir de jQuery, va sur http://www.jquery.info , beaucoup de tutoriaux seront à ta disposition pour prendre en main cet outil.

Au plaisir
   
Répondre à coenonympha
Posez votre question Répondre
Galerie photos - effet slide/glisse (Résolu)Bonjour, j'aimerais créer une sorte de galerie photos en faisant une transition "particulière" entre chaque photo : une sorte d'effet ajax : lorsque l'on clique sur la flèche, la photo suivant apparait avec un effet de glisse. Pour... www.commentcamarche.net/forum/affich-5394890-galerie-photos-effet-slide-glisse
Comment inserer une galerie photo (photoshop) (Résolu)Bonjour, Je souhaiterai avoir notre aide. En effet, je viens de créer une galerie photo sous photoshop. Puis à la fin de la création je me retrouve avec le dossier destination où il y a tous les éléments ( dossier images, dossiers page ...) Mais... www.commentcamarche.net/forum/affich-5423377-comment-inserer-une-galerie-photo-photoshop
Galerie photo (Résolu)Bonjour, Je souhaite intégrer une galerie photo créée avec photoshop sur mon site. Le problème est que j'ai des caractères qui s'affichent en haut de la page : "". Voici le code de ma page : www.commentcamarche.net/forum/affich-7123168-galerie-photo
Effets pour vos imagesAu gré de vos explorations du web, vous avez vu de superbes effets de présentation des images. Et ça vous plairaît bien de pouvoir proposer les mêmes à vos visiteurs. Voici quelques solutions en Javascript couplées à des CSS. Elles sont plus... www.commentcamarche.net/faq/sujet-9314-effets-pour-vos-images
Restaurer une photo avec GREYCStorationGREYCStoration permet de restaurer des photographies. Il permet (entre autres) de supprimer l'effet de "grain" des images, dûs à l'âge de la pellicule, un mauvais transfert ou un scan de mauvaise qualité. Il est également utile pour "récupérer"... www.commentcamarche.net/faq/sujet-3179-restaurer-une-photo-avec-greycstoration
Légende galerie photo html (Résolu)Bonjour, j'ai une galerie photo toute simple dont le code est celui ci : je cherche a rajouter une legende qui changerait en meme temps un swap text ( je sais pas si ca existe) ... www.commentcamarche.net/forum/affich-8058171-legende-galerie-photo-html
Retrouver une photo disparue de galerie photo (Résolu)Bonjour, comment faire pour retrouver une photo récente (de décembre)disparue de la galerie photo ? Je n'y arrive pas ! Merci si vous pouvez m'aider .... www.commentcamarche.net/forum/affich-4711990-retrouver-une-photo-disparue-de-galerie-photo
Galerie photo flash et int. expl. (Résolu)bonjour j'ai crée des galeries photos en flash avec lightroom que j'ai mises dans mon site. avec firefox ca marche sans problèmes alors que avec ie il bloque après avoir ouvert et fermés quelques galeries. merci de votre aide mon site... www.commentcamarche.net/forum/affich-3461003-galerie-photo-flash-et-int-expl
Télécharger Smartision ScreenCopysmartision ScreenCopy est un logiciel gratuit (libre) permettant de réaliser facilement des captures d'écran aux formats JPEG ou BMP. Il possède en plus une fonctionnalité intéressante de création de galeries photos au format HTML. www.commentcamarche.net/telecharger/telecharger-34055341-smartision-screencopy
Télécharger JAlbumJALbum vous permet de créer une galerie photo des plus attrayants. Il suffit pour cela de déplacer/déposer les fichiers ou le dossier contenant les images sur l'interface de JALbum et il fera le reste. JALbum créera des aperçus des vos images et des... www.commentcamarche.net/telecharger/telecharger-34056199-jalbum
Télécharger MobaPhotoMobaPhoto (ex BuibuiPhoto) est un logiciel gratuit qui génère automatiquement vos galeries photos en quelques clics et les publie sur votre site Internet. MobaPhoto vous permet de redimensionner, recadrer, corriger les yeux-rouges de toutes vos... www.commentcamarche.net/telecharger/telecharger-34055451-mobaphoto
[Brève] Cadre photo Sigmatek DN-240Livré avec trois encadrements interchangeables, le dernier cadre photo numérique de Sigmatek peut se déguiser en objet esthétique, ou en cadeau original pour la Saint-Valentin. Un encadrement en forme de coeur et un autre à motifs rouges sont en effet... www.commentcamarche.net/actualites/breve-cadre-photo-sigmatek-dn-240-4815261-actualite.php3
Toutes les réponses pour « Javascript Galerie photo effet slide/glisse »