Discussion :

[Shuret]

:hello:

J'ai fait un petit script qui fonctionne. Voici en gros la tête qu'il a :

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
 
var Diaporama = {
	version: "1.0",
	param1: "valeurParDefaut1",
	param2: "valeurParDefaut2",
 
	fonction1: function(img) {
		// fait quelque chose
	},
 
	fonction2: function(img) {
		// fait quelque chose
	},
 
	init: function (el, options) {
		this.element = $(el);
		this.param1 = options.param1;
		this.param2 = options.param2;
 
		$("img." + this.thumbClass).click(function() {
			Diaporama.fonction1(this);
		});
	}
}

Et voici comment je l'appelle :

Code :

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

1
2
 
Diaporama.init("#monElement", {param1: "valeur1", param2: "valeur2"});

Sauf que j'aimerais pouvoir l'appeler plusieurs fois dans la même page en changeant les paramètres. Il faudrait que je puisse l'instancier. Ca devrait donner un truc comme ça :

Code :

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

1
2
3
 
diapo1 = new Diaporama("#monElement", {param1: "valeur1", param2: "valeur2"});
diapo2 = new Diaporama("#monAutreElement", {param1: "valeur3", param2: "valeur4"});

Seulement je ne sais pas vraiment comment faire. Ca doit être un truc que les pros de l'Ajax font tout le temps, mais je ne sais pas comment m'y prendre. Pour info j'utilise jQuery. Avez-vous une idée ?

Merci !

[Bovino]

Qu'est-ce qui ne fonctionne pas ?

[Shuret]

Le script fonctionne, mais j'aimerais pouvoir l'instancier pour l'utiliser plusieurs fois dans la même page.

[dukej]

Le script fonctionne, mais j'aimerais pouvoir l'instancier pour l'utiliser plusieurs fois dans la même page.

De la manière où tu as écrit ton script, tu as fait directement un objet instancié et non une classe

Un manière toute conne et rapide de transformer ton truc en objet instanciable est celle-ci :

ATTENTION : regarde bien les commentaires et comment je procède aux endroits ou tu appelles Diaporama.
Puisque maintenant on parle d'instance.

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
//déclaration de la Classe Diaporama et de son constructeur
var Diaporama = function() {
    this.init.apply(this,arguments); //on appelle init puisqu'apparament c'est la méthode d'initialisation.
}
//déclaration du prototype de cette classe :
Diaporama.prototype = {
    constructor:Diaporama, //ne pas oublier cette ligne, sinon le constructeur sera "Object"
 
    version: "1.0",
    param1: "valeurParDefaut1",
    param2: "valeurParDefaut2",
 
    fonction1: function(img) {
        // fait quelque chose
    },
 
    fonction2: function(img) {
        // fait quelque chose
    },
 
    init: function (el, options) {
        //creation d'une variable faisant référence à this pour qu'elle puis être utilisée dans les fonctions qui sont déclarées dans le init.
        var _this = this;
        this.element = $(el);
        this.param1 = options.param1;
        this.param2 = options.param2;
 
        //ici ce n'est pas bon, tu tapes sur tout ce qui est .imgQuelqueChose. Il faudrait partir de ton élément parent, puisque c'est lui qui contient les images
        this.element.find("img." + this.thumbClass).click(function() {
            _this.fonction1(this); //on remplace Diaporama par _this
        });
    }
}

[marcha]

@Shuret Si tu utilise JQuery je te recommande vivement de faire
un plugin

Actuellement tu appelles ton code ainsi:

Code :

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

Diaporama.init("#monElement", {param1: "valeur1", param2: "valeur2"});

A la sauce JQuery tu pourra l'appeler ainsi

Code :

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

1
2
 
$('#monElement').diaporama({param1: "valeur1", param2: "valeur2"});

Et mieux encore, tu pourra appliquer plusieurs diaporama en une ligne

Code :

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

1
2
 
$('img.diapo').diaporama({ param1: "valeur1", param2: "valeur2"});

Lit ce tuto

Si besoin, je t'aide volontier

[dukej]

@Shuret Si tu utilise JQuery je te recommande vivement de faire
un plugin

Actuellement tu appelles ton code ainsi:

Code :

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

Diaporama.init("#monElement", {param1: "valeur1", param2: "valeur2"});

A la sauce JQuery tu pourra l'appeler ainsi

Code :

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

1
2
 
$('#monElement').diaporama({param1: "valeur1", param2: "valeur2"});

Et mieux encore, tu pourra appliquer plusieurs diaporama en une ligne

Code :

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

1
2
 
$('img.diapo').diaporama({ param1: "valeur1", param2: "valeur2"});

Lit ce tuto

Si besoin, je t'aide volontier

J'étais aussi en train de me demander s'il valait mieux pas qu'il transforme son truc en plugin jquery, mais du coup j'ai préféré répondre à la question