Discussion :

[Sayrus]

Bonjour,

J'ai un script très simple qui permet d'afficher des photos en slideshow avec un petit texte descriptif par dessus (script s3Slider). Le code est le suivant:

Code :

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
(function($){  

	
    $.fn.s3Slider = function(vars) {       
        
		
        var element     = this;
        var timeOut     = (vars.timeOut != undefined) ? vars.timeOut : 4000;
        var timeOutFn   = null;
        var faderStat   = true;
        var mOver       = false;
        var items       = $("#" + element[0].id + "Content ." + element[0].id + "Image");
        var itemsSpan   = $("#" + element[0].id + "Content ." + element[0].id + "Image span");
		
        items.each(function(i) {
    
            $(items[i]).mouseover(function() {
               mOver = true;
            });
            
            $(items[i]).mouseout(function() {
                mOver   = false;
                fadeElement(true);
            });
            
        });
		
        
        var current = null;
		
        var fadeElement = function(isMouseOut) {
            var thisTimeOut = (isMouseOut) ? (timeOut/2) : timeOut;
            thisTimeOut = (faderStat) ? 10 : thisTimeOut;
            if(items.length > 0) {
                timeOutFn = setTimeout(makeSlider, thisTimeOut);
            } else {
                console.log("Poof..");
            }
        }
		
        var makeSlider = function() {
			
            current = (current != null) ? current : items[(items.length-1)];
            var currNo      = jQuery.inArray(current, items) + 1
            currNo = (currNo == items.length) ? 0 : (currNo - 1);
            var newMargin   = $(element).width() * currNo;
            if(faderStat == true) {
                if(!mOver) {
                    $(items[currNo]).fadeIn((timeOut/6), function() {
                        if($(itemsSpan[currNo]).css('bottom') == 0) {
                            $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        } else {
                            $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                                faderStat = false;
                                current = items[currNo];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        }
                    });
                }
            } else {
                if(!mOver) {
                    if($(itemsSpan[currNo]).css('bottom') == 0) {
                        $(itemsSpan[currNo]).slideDown((timeOut/6), function() {
                            $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    } else {
                        $(itemsSpan[currNo]).slideUp((timeOut/6), function() {
                        $(items[currNo]).fadeOut((timeOut/6), function() {
                                faderStat = true;
                                current = items[(currNo+1)];
                                if(!mOver) {
                                    fadeElement(false);
                                }
                            });
                        });
                    }
                }
            }
        }
        
        makeSlider();

    };  

})(jQuery);

Comme vous pouvez-le voir, j'ai mis en rouge

Code :

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

var current = null;

Le script est appelé de la manière suivante:

Code :

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
<script type="text/javascript">
    $(document).ready(function() {
        $('#slider').s3Slider({
            timeOut: 3000
        });
		
		
		$('#slide1').click(function(){
                       //Que mettre comme code pour afficher la 1ère image
		});
           
               $('#slide2').click(function(){
                       //Que mettre comme code pour afficher la 2e image
		});

               //etc.
		
    });
</script>

Si je veux commencer par la photo 2 de la liste, il me suffit de remplacer par ceci:

Code :

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

var current = items[1];

L'idée serait de pouvoir charger dynamiquement telle ou telle image lorsqu'on clic sur tel ou tel élément lié à un évènement. (voir code en vert ci-dessus).


Merci de votre aide

[danielhagnoul]

Bonjour.

Si vous aviez présenté s3Slider comme plugin plutôt que de reproduire sans code en enlevant la mention des auteurs, vous m’auriez fait gagner beaucoup de temps et vous auriez respecté le droit des auteurs.

s3Slider Developped By: Boban Karišik -> http://www.serie3.info/

CSS Help: Mészáros Róbert -> http://www.perspectived.com/
Version: 1.0
Copyright: Feel free to redistribute the script/modify it, as long as you leave my infos at the top.

On peut donc modifier le code en n’oubliant pas d’ajouter sous les informations des auteurs un commentaire adéquat.
Concernant votre question, on peut remplacer la ligne :

Code :

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

var current = null;

par (en s’inspirant de la ligne précédente) :

Code :

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

var current = (vars.current != undefined) ? vars.current : null;

On peut alors demander à s3Slider de démarrer avec la photo n° 3 :

Code :

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

1
2
3
4
$('#s3slider').s3Slider({
   timeOut:6000,
   current:$("li:eq(2)",this)[0] 
});

Mais cette modification n’est pas très utile, car elle modifie seulement l’ordre d’apparition pour la première présentation, dès la boucle suivante les photos sont à nouveau présentées de 1 à n.

Pour une modification dynamique, on peut modifier le contenu HTML du tag li :

Code :

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

1
2
3
4
5
6
7
$("#s3slider li:eq(2)").html('<img src="../images/imageTest.png" style="width:400px; height:300px;"/>' +
                             '<span style="font-size:1em; font-weight:bold;">Image 30<br />Content text...</span>');
 
$('#s3slider').s3Slider({
    timeOut:6000,
    current:$("li:eq(2)",this)[0]
});

mais une fois lancé, s3Slider ne tient plus compte des modifications.

[Sayrus]

Bonjour,

J'ai pourtant bien indiqué qu'il s'agissait du script s3Slider:

J'ai un script très simple qui permet d'afficher des photos en slideshow avec un petit texte descriptif par dessus (script s3Slider). Le code est le suivant:

Je ne vois pas ce que j'ai fait de mal? Soit...

Alors pour contourner le problème, vu qu'on ne peut qu'initialiser le script avant qu'il se lance, serait-il possible de stopper le slider lorsqu'on clic sur un bouton? et le relancer de nouveau avec un paramètre différent?

j'ai essayé .stop(); mais sans succès...

Merci.