Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

BANNIÈRE, DIAPORAMA, FONDU, AJAX


Information sur la source

Catégorie :Effets Classé sous : diaporama, fondu, ajax, banniere, photo Niveau : Débutant Date de création : 07/05/2007 Date de mise à jour : 06/06/2007 23:46:33 Vu / téléchargé: 22 790 / 3 176

Note :
5 / 10 - par 4 personnes
5,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (23)
Ajouter un commentaire et/ou une note


Description

Voici un exemple de script qui va vous permettre de réaliser un diaporama. Pour faire le changement d'image j'ai mis en place un système de fondu. Le chargement de image se fait à l'aide de la methode AJAX, une fois que le première image est chargé, le diaporama se lance, pendant ce temps les autres images se charge.

Test:
- Pour réaliser les testes avec AJAX, vous devez héberger le script sur un serveur Web.
- Sinon j'ai fait un script pour avoir un apperçu du résultat, en enlevant AJAX.

J'ai utilisé ce script pour réaliser une bannière mais il peut très bien être utilisé dans une galerie photo. C'est une alternative à Flash...

--------

Version 2 sans AJAX en utilisant la fonction new Image() de JavaScript
 

Conclusion

Have fun
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

04 juin 2007 20:11:02 :
Suite à un commentaire de rubiks10 (un peu révolté), j'ai réalisé cette fonction en utilisant new Image() à la place de AJAX. Les deux méthodes donnent le même résultat et contrairement à ce que dit rubiks10 (qui semble savoir de quoi il parle!!) AJAX sert belle et bien à mettre l'image en cache dans la première méthode que j'ai utilisé. Voilà, have fun
06 juin 2007 20:34:17 :
Problème d'opacité avec opera.
06 juin 2007 23:46:33 :
solution 2 (new Image() ) compatible opera...

Commentaires et avis

signaler à un administrateur
Commentaire de rubiks10 le 01/06/2007 13:06:48

Salut

Je pense que tu veux impressionné du monde en utilisant ajax dans ta source... Ajax ne sert à rien et surtout pas pour charger des images. Et puis en plus si au moins tu utilisais la réponse de la requête (responseText) qui contient le code binaire de l'image ok peut être que ca pourrais marcher mais la ce n'est pas le cas.

Sache que pour charger une image en javascript on fait :

var tonimage = new Image(URL);
tonimage.onload = function() { // Ici tu es sûr que ton image est chargée }

Voilà j'espère que cela te servira à l'avenir et que tu arrêteras d'utiliser Ajax pour rien.
@+

signaler à un administrateur
Commentaire de abdoulax le 01/06/2007 13:39:17

Lol, a quand même, genre j'avais envie de me la pété alors j'ai mis de l'AJAX. En faite ce code je l'ai utilisé pour réaliser un site lors de mon stage. Donc avant tout ce code a été réalisé pour un site et non pour impressionné les gens, comme tu peux le croir!!
En faite je connaissé pas cette méthode, du moins y a lontemps je croi l'avoir déjà vu, cependant dès que j'ai le temps je vais essayer de l'adapter à mon programme.

Enfin voilà, un 1/10 c'est méchant juste pour le choix d'une methode!!

Have fun

signaler à un administrateur
Commentaire de rubiks10 le 01/06/2007 22:04:48

Non j'ai pas mis 1/10 pour le choix d'une méthode j'ai juste mis 1/10 car l'ajax ne sert pas du tout !!! tu lances des requêtes Ajax dans le vent puisque tu ne récupères pas la réponse...

Ce n'est pas tes requêtes Ajax qui chargent tes images voilà.

D'ailleurs l'exemple sans ajax que tu as mis avec est OK et l'autre avec Ajax ne sert à rien. Voilà c'est pas méchant c'est juste pour que tu comprennes que tes requêtes ne servent à rien et sont dans le vent.

signaler à un administrateur
Commentaire de abdoulax le 02/06/2007 13:02:48

Contrairement à ce que tu croi, AJAX sert! Il sert à charger les images, avant de les afficher. Celle qui ne sont pas charger ne s'afficheront pas lors du diaporama. Elles attendront le prochain tour quand elles seront chargées. Pour ton histoire de réponse, faut que tu saches qu'on est pas obligé de l'utilisé. Moi j'utilise AJAX pour que l'image soit chargé dans le cache du navigateur. La version sans AJAX marche très bien en local, mais dès que tu vas la mettre en ligne, sa risque de merdé (tant de téléchargement de l'image).
Cependant je veux bien admettre que la solution avec new Image()... peut très bien marché, c'est à tester (ce week end j'espère)!

En tout cas j'espère que tu comprends mieux le fonctionnement de ce code et qu'on est pas obligé d'utiliser tes fameuses réponses!!

Have Fun

signaler à un administrateur
Commentaire de abdoulax le 02/06/2007 19:36:39

Tien j'ai besoin de ton aide, car j'ai pas beaucoup de temps pour chercher. Donc voici le code suivant pour remplacer la partie AJAX:

function LoadVisuel() {
var tonimage=new Array();

for ( LoadVisuelPos=0;LoadVisuelPos<VisuelTab.length;LoadVisuelPos++)
{
tonimage[LoadVisuelPos] = new Image();
tonimage[LoadVisuelPos].src = VisuelTab[LoadVisuelPos][0];
tonimage[LoadVisuelPos].onload = function() { JsIsLoading(LoadVisuelPos); };
}
}
function JsIsLoading(LoadVisuelPos_) {
alert("hihi" + LoadVisuelPos_);
//alert(LoadVisuelPos_ + " - " + VisuelTab[LoadVisuelPos_][0]);
VisuelTab[LoadVisuelPos_][1]++;
if ( VisuelPos==-1 )
{
VisuelPos=0;
Visuel_Defil();
}
}

Lors de l'appel de la fonction JsIsLoading(LoadVisuelPos_) une fois que l'image est chargé, mon problème est de récupérer le bon paramètre, cad 0, 1, 2, 3 ou 4. Ici à chaque evenement il me sort 5.

Merci de ton aide :p

Have fun

signaler à un administrateur
Commentaire de rubiks10 le 03/06/2007 04:27:44

Bon vu l'heure qu'il est je n'ai pas trop envie de réfléchir à ca je regarderai ton code demain...

Sinon je te redis encore une fois ... Ajax ne sert à rien!!!!! C'est pas une requête Ajax qui mets quoi que ce soit dans le cache. Ajax permet de communiquer dynamiquement avec un serveur et donc sert à échanger des informations entre client et serveur, je sais de quoi je parle sinon je ne me serais pas permis de te laisser le message précédent, enfin bon si tu ne veux pas me croire c'est comme tu veux, ca va pas m'empecher de dormir. Mais vu ce que tu me dis tu devrais tout de même aller te renseigner un peu plus sur le fonctionnement du cache d'un navigateur alors, ainsi que l'utilité des requêtes Ajax et surtout comment on s'en sert.

Une requête Ajax dont on ne se sert pas de la réponse c'est que dans un cas bien précis lorsqu'on veut enregistrer quelque chose dans une base de données. dans les autres cas on veut que le serveur nous renvoie des données donc qu'on se sert de la réponse.

Je te ferai ca demain ++

signaler à un administrateur
Commentaire de rubiks10 le 03/06/2007 04:36:05

Aller je te dis maintenant ca sera fait comme ca...

remplace la ligne :
tonimage[LoadVisuelPos].onload = function() { JsIsLoading(LoadVisuelPos); };

par :
tonimage[LoadVisuelPos].onload = eval("function() { JsIsLoading("+LoadVisuelPos+"); }");

aller bye

signaler à un administrateur
Commentaire de abdoulax le 03/06/2007 22:20:38

Lol, a vrai dir ce que tu me dis n'est pas fondé, donne moi des exemples!! Moi j'ai fait des essaie et je te confirme que AJAX met les images en cache. Tape AJAX et cache sur google, tu vas voir que tu te trompe. Bon j'espere que je vais réussir à te rendre compte que tu as tor!!

Sinon merci pour le code, je teste ça dessuite...

Have fun

signaler à un administrateur
Commentaire de abdoulax le 06/06/2007 20:18:57

Apperement AJAX est compatible avec opera contrairement à la solution avec new Image(). Donc finalement, la solution avec AJAX est la plus adapté! Voilà, j'espère que le prochain cou tu éviteras de t'emballer avant d'enfoncer les gens et de mettre de sale note qui n'ont pas lieu d'être!!

Have fun

(faut que je mette ma source à jour, problème d'opacité avec opera

signaler à un administrateur
Commentaire de rubiks10 le 06/06/2007 21:22:38

Je n'ai rien à apprendre de toi, je suis ingénieur informatique spécialisé dans le développement Web 2.0.

Il y a maintenant pratiquement 1 an j'ai déposé une source que j'ai faite sur ce site sur un outil javascript permettant de faire des diaporamas un peu comme Flash. Et heureusement que Opéra fonctionne pour le new Image(). C'est la base de tout navigateur pour le traitement d'images. Et pour corriger ton histoire de cache avec Ajax, ce n'est pas une particularité d'Ajax mais un défaut qui apparait seulement sur Internet Explorer pour le cache des images (il ne met pas a jour l'image même si l'image est différente donc un tips est de rajouter dans l'url de l'image le timecode courant) puis le navigateur garde en cache seulement la réponse XML lors d'une requete Ajax et en aucun cas un code binaire d'une image récupéré par la réponse Texte.

Je suis désolé mais je pense que tu n'as rien compris au cache d'un navigateur est comment fonctionne une requête Ajax.

Sur ce je vais arrêté de discuter avec toi car cela ne mène nulle part et tu ne veux pas admettre tes erreurs et pas accepter des conseils.

++

signaler à un administrateur
Commentaire de abdoulax le 06/06/2007 23:52:30

En effet je me suis trompé, cette fonction est bien compatible avec opéra, j'ai parlé trop vite ^^. En attendant tu m'as toujours pas données d'exemple concernant ton histoire d'AJAX, pas de cache... Donne moi un exemple, une source, quelque chose qui me démontre que j'ai pas raison... Moi ce que je vois c'est que ma source marche très bien, donc pour le moment je change pas d'avis. Mais j'attends une démonstration de ta part...

Et tes conseils je les ai acceptés, la preuve j'ai fait une version avec la fonction new Image().

Have fun

signaler à un administrateur
Commentaire de Maxdivertis le 25/07/2007 15:31:09

Une ressource qui m'a sauvé la vie pour mon stage, merci.

signaler à un administrateur
Commentaire de Maxdivertis le 25/07/2007 16:04:15

Bonjour,
J'ai par contre un soucis au niveau du rafraichissement du diaporama : j'aimerai qu'il tourne en boucle sans etre obliger de rafraichire toute la page.
Voulez vous un bout de mon code ?
Merci d'avance

signaler à un administrateur
Commentaire de abdoulax le 25/07/2007 16:12:48

Je ne comprends ce que tu veux exactement!! ??

signaler à un administrateur
Commentaire de Maxdivertis le 25/07/2007 16:31:24

En fait si j'ai par exemple 4 photos j'ai mon diaporama qui commence par photo1 puis photo2... et arrivé a photo4 il s'arrete alors que j'aimerai qu'il reprenne a photo1, que ça fasse une boucle...

Merci

signaler à un administrateur
Commentaire de Renfield le 25/07/2007 16:37:30 administrateur CS

ben comme dirai l'autre...
y'a qu'a remonter tes manches ^^

signaler à un administrateur
Commentaire de Maxdivertis le 25/07/2007 16:41:51

Enfin ça fait 2h que je suis sur ce code et que j'essaye des boucles par ci par la, mais je trouve pas. Et l'AJAX je connais pas du tout.
donc si quelqu'un veux un bout de mon code...?

signaler à un administrateur
Commentaire de abdoulax le 25/07/2007 19:38:40

Normalement mon code reboucle sur le premier élément. Si tu veux y a une version sans AJAX. Continue un peu à chercher... Et si tu trouves pas montre nous ton pb!!

Have fun

signaler à un administrateur
Commentaire de Mooky3D le 19/08/2007 10:17:57

Bonjour et merci pour ce code léger et efficace.

Je m'en sers pour l'affichage d'une galerie dans la bannière de mon site.
Cependant je ne suis pas programmeur, et j'aurai aimé savoir s'il était possible de rendre aléatoire, le chargement et l'affichage des images de manière à ce que les visiteurs du site ne voie pas toujours les mêmes images (les premières en particulier).
je ne demande pas de le faire à ma place mais au mois m'indiquer un chemin de reherche.

Juste une remarque pour les apprentis sorciers dans mon genre ;-), Il manque un peu d'information dans le code de ton fichiers. je veux dire par là qu'avec des commentaires en entête de chaque partie et fonctions importantes de ton code, nous pourrions en même temps que l'utiliser, Apprendre et comprendre le fonctionnement du script. Bien sur c'est mon avis et c'est quand même ton code ;-).

Amicalement Arnaud (Alias Mooky)

signaler à un administrateur
Commentaire de Mooky3D le 19/08/2007 10:41:17

je savais que j'avais oublier quelque chose, Milles excuses pour ce deuxième post.

Dans l'affichage des images est il possible d'accrocher un lien pour chacune des images ?
je supposerais que c'est certainement dans cettte partie du code pour l'affichage.

######## Extrait de visuel.js de ABDOULAX ##########
#{
# VisuelPosChange=VisuelPos;
# VisuelPos++;
# if ( VisuelTab.length <= VisuelPos )
# VisuelPos=0;
#
# if ( VisuelTab[VisuelPosChange][1] == 1 )
# ICI ? -># document.getElementById("visuel").innerHTML+="<img src='" + VisuelTab[VisuelPosChange][0] + "' #id='visuel_" + VisuelPosChange + "' style='filter:alpha(opacity=0); -moz-opacity:0; position: center; margin-left: #0px;' />";
# else
# {
# setTimeout("Visuel_Defil()", 10);
# return 0;
# }
# Visuel_Fondu();
#}
###########

Pour la définition du lien j'imagine que c'est à rajouter dans la liste de définitions des images

###########
# var VisuelTab = [
# ["visuel_2.jpg",0],
# ["visuel_3.jpg",0],
# ["visuel_4.jpg",0],
# ["visuel_5.jpg",0],
# ["visuel_1.jpg",0],
# ];
###########
Merci Arnaud

signaler à un administrateur
Commentaire de Nijin94 le 18/04/2008 23:23:45 1/10

Bonjour

Le code ne fonctionne pas, il affiche une et unique image même si je recharge la page...

signaler à un administrateur
Commentaire de abdoulax le 19/04/2008 12:37:32

oula j'avais pas vu ces postes, dsl de pas avoir répondu.

Pour mooky3d, sa fait un longtemps que je n'ai pas vu ce code, mais j'ai regardé vite fait.

Je pense que t'as plus besoin de la partie VisuelPos... et la tu fait t'ulise l'instruction rand dont je ne sais plus l'instruction, je crois que c'est srand:

document.getElementById("visuel").innerHTML+="<img src='" + VisuelTab[rand(VisuelTab.length )][0] ...

Après pour le lien, tu ajoutes tes liens dans le tableau et comme sa tu auras un lien associé à ton image. Mais dans tous les cas il va falloir un peu se pencher dans le code.

Pour ninjin94, je sais pas :s

Have fun

signaler à un administrateur
Commentaire de h405 le 28/07/2008 21:38:45 8/10

très bonne alternative à flash
Merci

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

lien vers photo [ par fabz01 ] Bonjour &#224; tous, Voil&#224; je suis d&#233;butant et je rame &#233;norm&#233;ment avec le javascript. j'ai un exo &#224; faire et &#231;a fait p !!! Défi !!! recherche diaporama [ par tamtamdesign ] Bonjour,je suis nouvelle venue sur ce site (tr&#232;s int&#233;ressant).Voil&#224;, je recherche un script pour mes pages album photos.Mais comme j'ai diaporama : passer à l'image suivante de facon automatique [ par poucinette51 ] Bonjour,J'ai un diaporama photos dynamique, cad que les images ne sont jamais les meme, tout est en php.L'affichage d'une photo se fait de la manière Galerie Photo demande conseil [ par G4uthier ] Bonjour, voila j'ai une partie admin pour gérer une galerie photo et je voudrais que quand ladmin clique sur la photo et bien la photo se supprime de Iframe Unload ? [ par visualight ] Bonjour,Je suis bloqué sur une gallerie multimedia (photo+video) que j'ai réalisé il y a un temps.Le but de cette gallerie est de fournir une vue vide Problème dans l'élaboration de mon diaporama [ par FANDOR2 ] Tout d'abord (même si je suis la pour une demande), une formule de politesse s'impose...donc "Bonjour à tout le monde" ! Deuxio: j'espère être dans l diaporama avec lien vers page sur photo [ par Bigbangss ] bonjour,arretez moi si je me sui trompé de thème. Je cherche actuellement un code à insérer dans une page web me permettant d'afficher un diaporama de Diaporama avec vignette cliquable [ par jeanclaude57 ] Bonjour j'ai un diaporama où je voudrais apporter une amélioration mais ne connaissant pas le Javascript je me tourne vers vous. Avec le diaporama j' effet ajax puis changer image puis effet ajaxy [ par Annadrill ] bonjour,voilà, j'ai une div avec une image dedans et j'aimerais que lorsque je clique sur un lien, la div se ferme (effect.Fade), puis une fois fermée Affichages des images [ par DAVIMIKA ] Bonjour,   <p class="MsoNormal" st


Nos sponsors

Sondage...

CalendriCode

Octobre 2008
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,328 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.