Galerie photos - effet slide/glisse
Résolu
ruvele
Messages postés
18
Statut
Membre
-
omar-senegal Messages postés 271 Date d'inscription Statut Membre Dernière intervention -
omar-senegal Messages postés 271 Date d'inscription Statut Membre Dernière intervention -
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 :
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>
A voir également:
- Galerie photos - effet slide/glisse
- Partager des photos - Guide
- Toutes mes photos - Guide
- Google photos - Télécharger - Albums photo
- Effet miroir word - Guide
- Galerie photos windows - Télécharger - Albums photo
3 réponses
Voici la solution :
<!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>Galerie slide</title>
<script language="javascript" type="text/javascript">
<!--
var img_actuelle = 1;
var no_images = 8;
var width = 400;
var proc = "vide";
var pos = 0;
function init() { // créer le html pour toutes les images
document.getElementById("boite_images").innerHTML = "";
var html = "";
for(var i = 1; i <= no_images; i++) {
html += '<div id="img'+i+'" style="left:' + (i - 1) * width + 'px" class="images"><img src="pics/pic'+i+'.jpg" /></div>';
}
document.getElementById("boite_images").innerHTML = html;
compter();
}
function go_avant() { // pas en avant
console.log("go_avant()");
if(proc == "vide") {
document.getElementById("nav_apres").style.visibility = "visible";
document.getElementById("nav_avant").style.visibility = "visible";
img_actuelle--;
if(img_actuelle == 1) {
document.getElementById("nav_avant").style.visibility = "hidden";
}
compter();
proc = window.setInterval("animer(0)", 20);
}
}
function go_apres() { // pas en arrière
console.log("go_apres()");
if(proc == "vide") {
document.getElementById("nav_apres").style.visibility = "visible";
document.getElementById("nav_avant").style.visibility = "visible";
img_actuelle++;
if(img_actuelle == no_images) {
document.getElementById("nav_apres").style.visibility = "hidden";
}
compter();
proc = window.setInterval("animer(1)", 20);
}
}
function animer(dir) { // l'animation
if(dir == 0) {
pos = pos + 25;
} else {
pos = pos - 25;
}
if(pos % width == 0) { // arreter tous les width (400) pixel
window.clearInterval(proc);
proc = "vide";
}
for(var i = 1; i <= no_images; i++) { // placer l'ensemble des images
var newpos = (i-1) * width + pos;
document.getElementById("img"+i).style.left = newpos + "px";
}
}
function compter() {
document.getElementById("nav_indique").innerHTML = "( " + img_actuelle + " / " + no_images + " )";
}
//-->
</script>
<style type="text/css">
#boite_galerie {
position:absolute;
width:400px;
height:330px;
}
#boite_images {
position:absolute;
width:400px;
height:300px;
overflow:hidden;
}
.boutons {
position:absolute;
width:30px;
height:20px;
top:310px;
background-color:#FF0000;
}
#nav_apres {
left:370px;
}
#nav_avant {
visibility:hidden;
}
#nav_indique {
left:180px;
width:50px;
}
.images {
position:absolute;
visibility:visible;
top:0px;
}
</style>
</head>
<body onload="init();">
<div id="boite_galerie">
<div id="boite_images"></div>
<div id="nav_avant" class="boutons" onclick="go_avant();"> <<< </div>
<div id="nav_indique" class="boutons"></div>
<div id="nav_apres" class="boutons" onclick="go_apres();"> >>> </div>
</div>
</body>
</html>
