Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» Tutoriels et articles Alsacréations
» Une galerie d'images simple avec jQuery --> Galerie Vidéo
Auteur
patefilo
# 13 Mar 2010 - 10:25:05
Citer
7 Posts
 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 !
^
fvsch
# 14 Mar 2010 - 21:30:37
Citer
Administrateur
19942 Posts
 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.
C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
http://fvsch.com 
^
patefilo
# 15 Mar 2010 - 09:57:08
Citer
7 Posts
 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 cligne

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 biggol et j'ai un peu honte de le soumettre sur ce forum...
^
fvsch
# 15 Mar 2010 - 20:52:08
Citer
Administrateur
19942 Posts
 Bah faut pas avoir honte. Si le code est très mauvais, ça sera l'occasion d'avoir des critiques et de progresser. cligne

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é.
C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
http://fvsch.com 
^
patefilo
# 16 Mar 2010 - 09:48:13
Citer
7 Posts
 Ok bon je t'aurais prévenu cligne 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.
^
fvsch
# 16 Mar 2010 - 14:54:07
Citer
Administrateur
19942 Posts
 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. cligne ) 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(...).
C’est ça, la puissance intellectuelle. Bac + 2, les enfants.
http://fvsch.com 
^
patefilo
# 18 Mar 2010 - 15:51:40
Citer
7 Posts
 Mais oui carrément ! C'est plus simple comme ça ! Je vais nettoyer un peu tout çà.
Merci beaucoup !
^
Le sujet est clos.
Aller à