Transitions entre des images
Bien le bonjour à tous ! :D
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:
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:
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:
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:
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 ! :)
