Diaporama en Javascript : [Besoin d'expert en javascript!!]

Marsh Posté le 24-07-2005 à 12:23:56

Salut a tous,
Voilà j'ai chopper un javascript (et modifier a ma sauce) pour integré un diaporama au sein d'un site php et jusque là tout va bien!! le seul souci est que le commentaire de l'image ne defile pas en meme temps que l'image ==> surment un souci d'ID d'objet. N'ayant pas fait de javascript pendant ma premiere année de BTS ,jsuis un peu perdu et j'aurai besoin de vos petites idées!

le souci en pratique : http://ftpfree56.free.fr/diapo/diaporama.php

le code source : http://ftpfree56.free.fr/sys/txt.p [...] porama.php

infos pratique : - le repertoire contenant les aperçu s'appelle "photo"
- le repertoire contenant les image taille reelle s'appelle "grTaillephoto"

<script language=JavaScript>
var Titres=new Diaporama(150);
Titres.Add("photo/image1.jpg","com1" ); // SRC de l'image , Commentaire de l'image 1
Titres.Add("photo/image2.jpg","com2" );
Titres.Build();
</script>

Donc voilà si vous avez une ptite idée pour que le commentaire defile en meme tps que l'image je suis preneur!

merci a tous. tchaow

Message édité par poly56 le 25-07-2005 à 15:28:19

Reply

Marsh Posté le 24-07-2005 à 12:23:56

Reply

Marsh Posté le 24-07-2005 à 22:29:02

Apparement personne ne se penche trop sur mon pb... :??: peuetre un peu relou de lire le code pas indenté? Allé jvai faire un ptit éffort! (en esperant que ce soit plus clair pour les motivés) : :heink:

Code :

// Implementation de la fonction Diaporama
<script language=JavaScript>
var Diaporamas=new Array();
function Diaporama(height) // la fonction globale diaporama qui est apeller plus bas pour la creation d'objet diaporama
{
this.Index=Diaporamas.length;
this.Images=new Array();
this.ImgIndex=0;
this.ID=null;
this.Add=function(src, com) //fonctiopn d'ajout d'objet ...mon erreur vient surment d'ici vu que j'ai rajouté l'argument 'com' come j'ai pu!
{
var Index=this.Images.length;
this.Images[Index]=new Array();
this.Images[Index]["image"]=new Image();
this.Images[Index]["image"].src=src;
this.Images[Index]["rel"]=src;
this.Images[Index]["com"]=com;
}
this.Show=function(Index) // fonction d'affichage de l'image
{
if(Index < 0)Index=this.Images.length - 1;
if(Index > this.Images.length - 1)Index=0;
document.images["disc" + this.Index].src=this.Images[Index]["image"].src;
this.ImgIndex=Index;
}
this.Previous=function() // bouton precedent
{
if(this.ImgIndex > 0)this.Show(this.ImgIndex - 1);
}
this.Next=function() // bouton suivant
{
if(this.ImgIndex < this.Images.length - 1)this.Show(this.ImgIndex + 1);
}
this.TailleReelle=function() // fonction permetant l'ouverture d'une fenetre avec l'image en taille reelle
{
var haut = 480; // hauteur de la fenêtre (en pixels)
var larg = 640; // largeur de la fenêtre (en pixels)
var options = "toolbar=no,location=no,directories=no,status=no," + "menubar=no,scrollbars=yes,resizable=yes,copyhistory=yes,"
+ "width=" + larg + ",height=" + haut;
maFenetre=window.open("","",options);
maFenetre.document.open();
maFenetre.document.write("<img src=" + 'grTaille' + this.Images[this.ImgIndex]["rel"] + " name=disc" + this.Index + ">" );
maFenetre.document.close();
}
this.Build=function() // Fonction qui renpli la page web avec le diaporama
{
document.write("<table border=0 cellspacing=0 width=280 class=texteMillieu><tr><td width=240><img src=" + this.Images[0]["image"].src + " name=disc" + this.Index + (height==undefined ? " " : " height=" + height) + "></td>" );
document.write('<td width=30><a href="javascript:Diaporamas[' + this.Index + '].Previous();"><div class=fleche><img src=image/flecheH.gif border=0 alt="Image précedente"></div></a><a href="javascript:Diaporamas[' + this.Index + '].TailleReelle();"><img src=image/grTaille.jpg border=0 alt="Taille Reelle"></a><a href="javascript:Diaporamas[' + this.Index + '].Next();"><div class=fleche><img src=image/flecheB.gif border=0 alt="Image suivante"></div></a></td></tr><tr height="20"><td>');
document.write(this.Images[this.ImgIndex]["com"]); // Surment ICI qu'il ya une erreur...il prend tjs le meme index et donc toujour le commentaire de la premiere image
document.write('</td></tr></table>');
}
Diaporamas[this.Index]=this;
}
</script>
//EXECUTION de la fonction diaporama avec n Images(src et commentaire)
<script language=JavaScript>
var Titres=new Diaporama(150);
Titres.Add("photo/image1.jpg","com1" );
Titres.Add("photo/image2.jpg","com2" );
Titres.Build();
</script>

:hello:

Message édité par poly56 le 25-07-2005 à 10:58:33

Reply

Marsh Posté le 24-07-2005 à 22:46:42

jette ton javascript, il ne me parait pas top

surtout avec le document.write, alors qu'il y a plus simple en passant pas le dom. Mais là j'ai po envie de chercher

Reply

Marsh Posté le 25-07-2005 à 10:55:14

Tu pense a quoi en disant "dom"? Ben en fait, maintenant il marche a peu de chose pres comme je voulais...reste juste un detail donc çà m'ennnui de repartir a zero!! Surtout kje suis une quiche en javascript...
Merci quand meme

Reply

Marsh Posté le 25-07-2005 à 11:39:16

Euh sinon quelqu'un aurai une idée pour précharger une image en PHP (pas de javascript!)? A ce moment là je refait le diaporama en PHP vu kje maitrise bcp plus...
Sur php.net il me faut le nom de la fonction pour arriver a choper des infos interessantes! et j'ai pas le bon mot clé!

Si des idées vous parviennent a l'esprit faites moi signe!

Reply

Marsh Posté le 25-07-2005 à 11:56:34

comment veux tu precharger une image en PHP alors que tout se joue dans le navigateur

Reply

Marsh Posté le 25-07-2005 à 12:06:55

un truc bien serait d'afficher tout ton diaporama en html
c'est a dire les images et les blocs de texte associé en html
et avec un javascript tu stocke tout dans un tableau et tu cache tout ensuite.

Reply

Marsh Posté le 25-07-2005 à 12:13:55

Si tu tiens vraiment à faire un diaporama en JS, laisses tomber ce script qui est relou...

Les clefs : (selon moi...)

Tu créer un objet Diapos, contenant des "Diapo"
Tu créer un objet Diapo qui contient un tableau avec le fichier de l'image, et le texte.
Tu appelles une fonction qui se rappelle elle-même, avec un timeout, qui réécrit dans un 'div'.

Laisses tomber tous les tableaux, etc.

Reply

Marsh Posté le 25-07-2005 à 12:15:39

Après relecture, je me rends compte que je ne comprends pas bien ton objectif...

Tu veux afficher des images les unes à la suites des autres de manière automatique ? Ou bien juste page par page ?

Dans le deuxieme cas, tu peux évidement le faire avec simplement du PHP. (dans le premier cas aussi en fait..)

Reply

Marsh Posté le 25-07-2005 à 13:00:48

Le truck c que je travaille avec une base de donnée mySQL et que les images du diaporama change en fonction de ce que l'on regarde...donc je trouvai bien pratique que ce script php soit appellé en fonction(scr de l'image, com);
bref l'aplication pratique que j'essaye de realiser...
http://www.alpub.free.fr/index.php [...] ge=panneau

pour le prechargement d'image en utilisant une fonction php, personne n'as une idée?

merci pour vos reponse çà fait plaiz!

ps : si quelqu'un a un script php tout fait qui fait diapo avec bouton "suivant" et "precedent" je suis preneur!

Message édité par poly56 le 25-07-2005 à 13:09:11

Reply

Marsh Posté le 25-07-2005 à 13:00:48

Reply

Marsh Posté le 25-07-2005 à 14:49:14

Bon, alors PHP, c'est une application "Server Side", ca veux dire, en gros, que le code PHP est interpreté uniquement sur le serveur. JavaScript, c'est "Client Side", donc c'est exécuté sur l'ordinateur de l'internaute.

Le préchargement d'une image, c'est quelque chose de "Client Side" puisque l'objectif est de lui faire préalablement télécharger une série d'images pour accélérer l'affichage une fois le site préchargé. C'est un plus estétique.

Donc, le préchargement d'image, tu dois le faire en Javascript.

Ton "Diaporama", tu devrais le faire en PHP. Je n'ai pas de script tout fait à te donner, puisque c'est d'une simplicité enfantine (quand on fait du PHP).

Les clefs :

Tu créer un tableau (PHP) avec les données que tu as récupéré dans ta base de données (en l'occurence MySQL).

En fonction d'un paramètre dans l'entête, que tu récupères, tu affiches l'image N° untel, avec son commentaire associé.

Genre :

Code :

function afficherImage (num) {
$htmlToReturn = "<div>";
$htmlToReturn .= "<img src=\"".$tableauImages[num]['img']."\" alt=\"".$tableauImages[num]['commentaire']."\"/>";
$htmlToReturn .= "<p>".$tableauImages[num]['commentaire']."</p>";
$htmlToReturn .= "</div>";
return $htmlToReturn;
}

Un truc du genre...

Reply

Marsh Posté le 25-07-2005 à 15:11:50

tu t'emmerdes, en PHP les strings peuvent aller à la ligne sans pb :

Code :

function afficherImage (num) {
$htmlToReturn = "<div>
<img src=\"".$tableauImages[num]['img']."\" alt=\"".$tableauImages[num]['commentaire']."\"/>
<p>".$tableauImages[num]['commentaire']."</p>
</div>";
return $htmlToReturn;
}

Reply

Marsh Posté le 25-07-2005 à 15:24:56

merci bien...

j'avait compri pour le javascript que c 'etai du "client side" et php l'inverse...mais j'esperai une fonction php c tout qui aurai pu me faire çà tout propre! :ange:

g chopper un truck sympas pour le prechargement d'image...
http://css-astuces.batraciens.net/ [...] es-css.htm

Code :

<img src="image_survol1.jpg" style="display:none" alt="">

bon ben voilà reste a gerer le souci des boutons "suivant" et "precedent"....c relou en PHP c'est obliger de recharger la page entiere vu ke c'est du "server side"! (on en revient tjs au meme soucis!)

bon jvai essayer d'y reflechir! :heink:

Reply

Marsh Posté le 25-07-2005 à 18:08:48

gatsusat a écrit :

tu t'emmerdes, en PHP les strings peuvent aller à la ligne sans pb :

Code :

function afficherImage (num) {
$htmlToReturn = "<div>
<img src=\"".$tableauImages[num]['img']."\" alt=\"".$tableauImages[num]['commentaire']."\"/>
<p>".$tableauImages[num]['commentaire']."</p>
</div>";
return $htmlToReturn;
}

I know C'était juste pour essayer "d'éclaircir" le code, mais en fait, ca n'a aucun effet... Perso, je ne fais jamais ca dans mes codes...

Sinon, pour la question de recharger la page à chaque fois, c'est ptet relou (quoique) mais c'est plus mieux.
Bon, sinon sur Clubic.com, quand tu regardes une galerie d'images, ils font vraissemblablement aussi du JS avec préchargement d'images.

Moi je dis, t'as deux grands choix (ou plus)

1. Tu réécris dans une div le code HTML avec la nouvelle balise à chaque fois
2. Tu écris directement toutes les images mais tu cache le div et tu l'actives par Javascript.

Dans le deuxieme cas, ceux qui n'ont pas activé le JS ont au moins le lien vers les images dans le code HTML...

A toi de voir...

Reply

Marsh Posté le 25-07-2005 à 18:17:45

http://www.stunicholls.myby.co.uk/ [...] llery.html
[:petrus dei]

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody

Reply

Marsh Posté le 25-07-2005 à 18:25:07

oué celui là il est bien cool avec les style CSS...j'vait deja vu hier soir

jvai peutetre utilisé celui la prochain coup! (une idée de coté...)

Pff en fait çà commence a me souler ce petit commentaire sous chaque image, du coup je sent kje vai faire simple! Allé on jarte ce point noir comme çà plus de souci! loool

merci de vous etre donnée la peinne de m'expliké 2,3 trucks, c'est toujours çà de noté pour la prochaine fois!

Message édité par poly56 le 25-07-2005 à 18:26:11

Reply

Diaporama en Javascript : [Besoin d'expert en javascript!!]

Sujets relatifs:

Leave a Replay