Transitions entre des images

**krizentherm** · 06/08/2013, 17h35

Bien le bonjour à tous !

Je travail actuellement sur une "mosaique-diaporama" web, et tout fonctionne impeccablement !

Mais j'aimerai désormais rajouter une transition entre les images. Sur mon site les images se changent instantanément ce qui n'est pas très sympa et je cherche donc à faire une transition agréable.

J'ai apriori trouvé mon bonheur ici : http://www.malsup.com/jquery/cycle/

Mais je n'arrive pas à intégrer cycle dans mon site : mon problème c'est que j'ai sur ma page, un div par position sur l'écran, et je fais des ".innerHTML = " dans ces div pour y changer l'image par une nouvelle, autrement dit dans chaque div il n'y a tout le temps qu'une seule image, contrairement aux exemples donnés sur la page des fonctions cycle où toutes les images sont directement dans le div et qu'il suffit de mettre la fonction Jquery cycle de notre choix pour faire les transitions automatiquement.

Je précise que je débute en web et surtout en Jquery, et le truc c'est que je ne peux pas faire comme dans les exemples qu'ils donnent puisque mon site va tout le temps scanner dans un dossier s'il 'y a pas de nouvelles images à afficher, et si c'est le cas, il va les afficher et quand il a tout affiché, il affiche une images précédente aléatoirement. bref, ma liste d'image à afficher est totalement dynamique.

Voici mon index.php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="fr" Content-Type: text/html; charset=UTF-8>
	<head>
		<meta charset="UTF-8">
		<title>Diaporama Windreport'</title>
 
		<script src="js/jquery-1.10.2.min.js"></script>
		<script src="js/script.js" type="text/javascript"></script>
		<script src="js/convert_json_to_tab_pictures.js" type="text/javascript"></script>
		<script src="js/modes/stack.js" type="text/javascript"></script>
		<script src="js/modes/diapo_fixe.js" type="text/javascript"></script>
		<script src="js/modes/align_add.js" type="text/javascript"></script>
 
		<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
		<script src="js/jquery.easing.compatibility.js" type="text/javascript"></script>
		<script src="js/jquery.cycle.all.js" type="text/javascript"></script>
 
		<style type="text/css">
                        .slideshow { margin: auto }
                        .slideshow img { padding: 4px; border: 1px solid #ccc; background-color: #eee; }
                </style>
	</head>
 
	<body>
		<p id="page"></p>
		<script>diaporama();</script>
	</body>
</html>

Il contient l'appel aux fichiers .js nécessaire. Ensuite je déclare les div (un div par position sur l'écran) de cette facon :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
//slot0 :
document.getElementById("page").innerHTML +=
'<div id = "slot0"; class = "slideshow"; style="position:absolute; top:'+MARGIN+
'px; left:'+MARGIN+'px"></div>';
 
//slot1 :
document.getElementById("page").innerHTML +=
'<div id = "slot1"; class = "slideshow"; style="position:absolute; top:'+MARGIN+
'px; right:'+(width / 4)+'px"></div>';
 
//slot4 :
document.getElementById("page").innerHTML +=
'<div id = "slot4"; class = "slideshow"; style="position:absolute; top:'+MARGIN+
'px; right:'+MARGIN+'px"></div>';
 
//slot5 :
document.getElementById("page").innerHTML +=
'<div id = "slot5"; class = "slideshow"; style="position:absolute; bottom:'+MARGIN+
'px; left:'+(MARGIN * 7)+'px"></div>';
 
//slot2 :
document.getElementById("page").innerHTML +=
'<div id = "slot2"; class = "slideshow"; style="position:absolute; bottom:'+
MARGIN+'px; left:'+((width / 3) + (MARGIN * 2))+'px"></div>';
 
// slot3 :
document.getElementById("page").innerHTML +=
'<div id = "slot3"; class = "slideshow"; style="position:absolute; bottom:'+MARGIN+
'px; right:'+MARGIN+'px"></div>';

(cet ordre là est normal

)
et pour finir j'ai le reste du script qui va savoir exactement quelle image il faut afficher à quel div déclaré ce dessus. Voici la fonction :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById(slot).innerHTML = 
'<img src="'+DIR_PICTURES+name+
'" width = '+((screen_size['height'] / 2) + MARGIN)+'>';

"slot" correspond à l'un des div déclaré ci dessus ("slot1" ou "slot2" etc). Cette fonction va donc remplacer l'image actuel dans le div slot par une nouvelle.

J'ai donc 6 div différents qui contienne chacune une seule image, et souhaiterai ajouter un effet de transition.

J'avais intégré ceci dans mon head dans le index.php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
                fx: 'fade'
        });
});
</script>

Mais la transition ne fonctionnait pas

En cherchant j'ai trouvé cycle, mais je n'arrive pas à l’intégrer, je n'ai, cependant, aucune préférence particulière pour cette fonction Jquery, peut être connaissez vous un meilleur outils plus adapté pour mon cas ?

Merci beaucoup pour aide !

**userparis** · 23/09/2013, 15h39

Hello, essaie de créer un DIV conteneur avec pour classe=slideshow dans lequel tu met tous les div qui contiennent tes images.

D'après ce que j'ai compris le plugin cycle fonctionne comme cela.

ex :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="slideshow">
	<div id ="Div_1">img1</div>
	<div id="Div_2">img2</div>
	<div id="Div_3">img3</div>
</div>

Ce sont les DIV 1, 2 et 3 et leur contenus qui vont changé. J'espère avoir été clair sur le principe.

Transitions entre des images

jQuery

Discussions similaires

Partager

Partager