Une galerie d'images simple avec jQuery --> Galerie Vidéo

Bonjour à toutes et à tous,

Formidable ce tuto pour la galerie d'images, merci ! J'essaye sans succès de l'adapter pour y insérer des vidéos plutôt que des photos.
Pouvez-vous me donner une piste car cela fait une semaine que je tourne en rond... ?
Merci beaucoup !

Bonjour,

Quelques questions pour commencer:
- Quel est le format de tes vidéos?
- Quelle technologie compte-tu utiliser pour la lecture des vidéos? Un lecteur Flash? Si oui, lequel?
- Est-ce que tu sais créer des pages HTML où apparaissent tes vidéos?
- Est-ce que tu comprends le détail de la mise en place du tutoriel, et notamment le code JavaScript présenté?

Ensuite, je dirais que reprendre cette galerie d'images pour en faire une galerie de vidéos ne me semble pas très pertinent. De mémoire, au mois la moitié du code JavaScript de la galerie sert à gérer des images (chargement, préchargement, texte alternatif, etc.). Les vidéos demandent un traitement différent. Je crois que pour faire une galerie de vidéos je coderais un script sur mesure.

Merci infiniment pour ta réponse. A mon tour, pour répondre à tes questions :

a écrit :
- Quel est le format de tes vidéos?

Mes vidéos sont en QT mais je peux les changer en FLV s'il le faut.

a écrit :
- Quelle technologie compte-tu utiliser pour la lecture des vidéos? Un lecteur Flash? Si oui, lequel?

Peu importe du coup

a écrit :
- Est-ce que tu sais créer des pages HTML où apparaissent tes vidéos?

Absolument

a écrit :
- Est-ce que tu comprends le détail de la mise en place du tutoriel, et notamment le code JavaScript présenté?

Oui tout-à-fait : il est nickel.


C'est pourquoi je comprends parfaitement ton dernier point qui me dit de refaire une galerie de zéro. J'ai passé tout mon dimanche là-dessus et je touche presque au but mais mon code est un peu et j'ai un peu honte de le soumettre sur ce forum...

Bah faut pas avoir honte. Si le code est très mauvais, ça sera l'occasion d'avoir des critiques et de progresser.

Tu peux poster un sujet dans le salon JavaScript pour montrer ce que tu as fait et demander des critiques générales ou une aide sur des points précis sur lesquels tu es bloqué.

Ok bon je t'aurais prévenu C'est du bricolage de dingue mais ça marche ( ?!? )

JS:

		function loadContent(id) {
			$("#contentArea").load("rpccourt.php?o="+id+"");
		}

HTML :

<div id="contenu">
	<div id="contentArea" style="margin: 0px 0px 200px 0px; border: 0px solid #CCC; ">
</div>

<div style="margin:30px 35px 0px 20px; width:180px">
	<a href="javascript:loadContent(1);"><img src="videos/thumbs/micro.jpg" hspace="2" vspace="2"  border="none" class="opacity"/></a>
	<a href="javascript:loadContent(2);"><img src="videos/thumbs/bipbip.jpg" hspace="2" vspace="2"  border="none" class="opacity"/></a>
</div>

Et mon rpccourt.php :

	$cOption = $_GET['o'];
	
	switch($cOption) {
		case 1:
			echo '<div style="text-align:center"><EMBED SRC="videos/procter_micro.mov" WIDTH=500 HEIGHT = 294 AUTOPLAY=true CONTROLLER=true LOOP=false PLUGINSPAGE=http://www.apple.com/quicktime/"></div><div>zerzer</div>';
			break;
		case 2:
			echo '<div style="text-align:center"><EMBED SRC="videos/procter_bipbip.mov" WIDTH=500 HEIGHT = 294 AUTOPLAY=true CONTROLLER=true LOOP=false PLUGINSPAGE=http://www.apple.com/quicktime/"></div>';
			break;
		default:
			echo 'PROUT!';
	}

C'est pas joli joli mais bon, ça fera l'affaire en attendant.

C'est un début.

Le code PHP pourrait être plus factorisé que ça. Par exemple tu pourrais déclarer le chemin du fichier vidéo et les dimensions dans un tableau, et avoir un seul "modèle" de code HTML que tu remplis avec ces différentes informations. (Je sais pas exactement comment faire en ce qui concerne la syntaxe, je suis une bille en PHP. ) Mais ce n'est pas forcément nécessaire car tu pourrais générer ton code HTML directement en JavaScript, sans passer par PHP et une requête Ajax (jQuery.load) comme tu le fais actuellement.

Côté HTML, il serait préférable d'avoir des liens comme ceci:

<a href="ma_video.mov" onclick="showVideo(self, 500, 294);">
  <img alt="Nom de la vidéo [IMPORTANT!]" src="ma_vignette.jpg" />
</a>

En JavaScript, tu peux créer ta chaine de caractères qui représente ton élément HTML EMBED, dans laquelle tu insères les paramètres passés à la fonction, et faire un $("#contentArea").html(mon_code_html) plutôt que $("#contentArea").load(...).

Mais oui carrément ! C'est plus simple comme ça ! Je vais nettoyer un peu tout çà.
Merci beaucoup !