Discussion :

[calagan99]

Bonjour à tous,

dans le cadre du dev d'un petit site vitrine, je souhaites utiliser le plusgin supersized.
Une fois le plugin ajouté à ma page, voilà le code pour "instancier" une gallerie :

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
<script type="text/javascript">  
		$(function(){
			$.fn.supersized.options = {  
				startwidth: 640,  
				startheight: 480,
				vertical_center: 1,
				slideshow: 1,
				navigation: 1,
				thumbnail_navigation: 0,
				transition: 3, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
				pause_hover: 1,
				slide_counter: 1,
				slide_captions: 1,
				slide_interval: 3000,
				slides : [
					{image : 'slides/tower.jpg', title : 'City Clock Tower', url :'http://www.flickr.com/photos/...'},
					{image : 'slides/fence.jpg', title : 'Canal Park Fence', url : 'http://www.flickr.com/photos/...'},  
					{image : 'slides/tracks.jpg', title : 'Old Train Tracks', url : 'http://www.flickr.com/photos/...'}
				]
			};
$('#supersized').supersized(); 
	    });
	</script>

La galerie sera placée dans une page dédiée.
Sur une des pages du site, je liste les albums photos disponibles et redirige vers la page où se situe la galerie.
J'aimerais ne pas avoir à créer une page pour chaque album photo mais plutôt passer le nom de l'album cliqué en querystring, le récupérer côté page de galerie et donc charger dynamiquement un album.

Sachant que la liste des photos à afficher est déclarée de cette manière :

Code :

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

1
2
3
4
5
slides : [
					{image : 'slides/tower.jpg', title : 'City Clock Tower', url :'http://www.flickr.com/photos/...'},
					{image : 'slides/fence.jpg', title : 'Canal Park Fence', url : 'http://www.flickr.com/photos/...'},  
					{image : 'slides/tracks.jpg', title : 'Old Train Tracks', url : 'http://www.flickr.com/photos/...'}
				]

Je pense stocker les différentes images des différents albums dans un array ou autre objet, array dont chaque ligne devrait être identifiée avec le nom de l'album qu'il décrit.
Ainsi, en récupérant le nom de l'album désiré en querystring, je pourrais sélectionner la ligne de l'array qui m'intéresse et la passer à la propriété "slides" du plugin supersized.

Cela vous paraît-il crédible ?
Comment procéderiez-vous pour implémenter cette fonctionnalité ?

[danielhagnoul]

Bonsoir

Je ne pense pas avoir tout compris, notamment j'ignore ce qu'est un "querystring"

Si vous souhaitez simplement savoir comment manipuler l'option slides du plugin Supersized, voici un exemple :

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
<script>
	$(function(){
		$.fn.supersized = {};
 
		$.fn.supersized.options = {  
			startwidth: 640,  
			startheight: 480,
			vertical_center: 1,
			slideshow: 1,
			navigation: 1,
			thumbnail_navigation: 1,
			transition: 1, //0-None, 1-Fade, 2-slide top, 3-slide right, 4-slide bottom, 5-slide left
			pause_hover: 0,
			slide_counter: 1,
			slide_captions: 1,
			slide_interval: 3000,
			slides : [
				{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/slides/tower.jpg', title : 'City Clock Tower', url : 'http://www.flickr.com/photos/wumbus/4582735030/in/set-72157623876357531/'},
				{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/slides/fence.jpg', title : 'Canal Park Fence', url : 'http://www.flickr.com/photos/wumbus/4582735030/sizes/l/in/set-72157623876357531/'},  
				{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/slides/tracks.jpg', title : 'Old Train Tracks', url : 'http://www.flickr.com/photos/wumbus/4582733542/in/set-72157623876357531/'}
			]
		};
 
		// un lien vers l'array d'objets slides
		var slides =  $.fn.supersized.options.slides;
 
 
		// url du premier objet contenu dans slides
		alert(slides[0].url);
 
		// nouvel objet
		var obj = {
			image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/slides/fence.jpg',
			title : 'Canal Park Fence',
			url : 'http://www.flickr.com/photos/wumbus/4582735030/sizes/l/in/set-72157623876357531/'
		};
 
		// insertion du nouvel objet en dernière position
		slides.push(obj);
 
		// Firebug
		console.log(slides);
	});
</script>

[calagan99]

Daniel, merci pour ta réponse.

Désolé pour le titre de mon sujet. Je serai plus précis la prochaine fois

Pour répondre à ta question, j'entends par QueryString un paramètre passé par l'URL (ex:http://monsite.com/photos.htlm?id_album=first)

Dans mon js, j'ai déclaré deux arrays de slides :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
var first[
{image : 'slides/tower.jpg', title : '11', url :'http://www.flickr.com/photos/1'},
{image : 'slides/fence.jpg', title : '12', url : 'http://www.flickr.com/photos/wumbus/2'},  
{image :'slides/tracks.jpg', title : '13', url : 'http://www.flickr.com/photos/wumbus/3}
]
var second[
{image : 'slides/tower.jpg', title : '21', url :'http://www.flickr.com/photos/4'},
{image : 'slides/fence.jpg', title : '22', url : 'http://www.flickr.com/photos/wumbus/5'},  
{image :'slides/tracks.jpg', title : '23', url : 'http://www.flickr.com/photos/wumbus/6}
]

J'ai stocké ces deux slides dans un array comme ceci :

Code :

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

var albums = [first, second];

En paramètre dans mon URL, je récupère "l'identifiant" de l'album que je veux afficher (à l'aide d'un autre plugin JQuery): ici "first". Je stocke cet album dans une variable :

Code :

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

var album = "first";

Seulement, je n'arrive pas à identifier, dans mon array "albums", le slide "first".
J'ai essayer de procéder avec des choses genre :

Code :

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

$inArray(album, albums);

Cela me permettrait de récupérer l'index de l'array de slide qui m'intéresse et de le passer à la propriétés slides de l'objet supersized.

Je pense que dans la logique cela fonctionne. Mais je bloque sur l'identification d'un objet dans un array.
Vois-tu comment je pourrais procéder ?

D'avance merci et bonne soirée.

[calagan99]

Je m'auto-répond, peux-être que cela pourra servir à quelqu'un ici.

Dans une page HTML, je liste les albums photos disponibles.
Sur chacun d'entre eux, un lien pointe vers une page générique avec en paramètre dans l'url l'id de l'album (ex : http://monsite.com/album.html?id=demo)

Dans cette page, tous les albums disponibles ont été ajouté à un array sous cette forme :

Code :

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

var albums ={'param':param, 'param2': param2, 'demo':demo};

Je récupère le paramètre d'URL et le stocke dans une variable "qsParam".
Je n'ai alors plus qu'à trouver l'array qui m'intéresse dans l'array "albums" à l'aide de :

Code :

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

albums[qsParam]

Le tour est alors joué, je vais directement chercher l'array de slides qui m'intéresse et le passe à supersized.

Merci à SpaceFrog et danielhagnoul pour leur aide.