UN SLIDESHOW AVEC FADE-IN FADE-OUT DES VIGNETTES ET AFFICHAGE DES IMAGES DANS LA MÊME FENÊTRE REDIMENSIONNÉE DYNAMIQUEMENT

Information sur la source

Catégorie :Navigation Niveau : Initié Date de création : 12/03/2003 Date de mise à jour : 12/03/2003 20:26:12 Vu / téléchargé: 30 670 / 3 403

Auteur : malalam

Site perso

Ecrire un message privé

Note :

8,80 / 10

Commentaire sur cette source (24)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

Tout est dit dans le titre :
c'est un slideshow, avec un scrolling horizontal, contrôlé par l'utilisateur.
Les vignettes défilant sont opacifiée et deviennent normales dès qu'on passe la souris dessus (merci DHKolD, je me suis servi de ton script pour ça :-) ).
Lorsqu'on clique sur une vignette, un pop-up s'affiche avec les dimensions et l'image voulues.
En substance, voilà.
Maintenant, si quelqu'un a une idée pour que le slide tourne en boucle, ça m'arrangerait!

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 !

slideshow
- cadre
  - droite.jpg 1 132 octets
  - gauche.jpg 1 095 octets
  - menucad.jpg 6 899 octets
- dessins
  - Abstaction1.jpg 50 679 octets
  - Abstraction10.jpg 26 714 octets
  - cabinet_psy1.jpg 62 118 octets
  - Cave1.jpg 91 548 octets
  - cloitre.jpg 110 328 octets
  - escaliers.jpg 70 738 octets
- js
  - slideshow.js 1 536 octets
- styles
  - styles.css 470 octets
- vignettes
  - Abstaction1 copy.jpg 20 154 octets
  - Abstraction10 copy.jpg 13 606 octets
  - cabinet_psy1 copy.jpg 18 561 octets
  - Cave1 copy.jpg 23 400 octets
  - cloitre copy.jpg 16 689 octets
  - escaliers copy.jpg 18 293 octets
- images.html 821 octets
- slideshow.html 2 531 octets

Télécharger le zip

Sources du même auteur

Toutes les sources de malalam

Sources de la même categorie

Toutes les sources de la catégorie Navigation

Commentaires

Commentaire de jjdagadir le 13/08/2003 18:07:39

DECIDEMENT, JE DECOUVRE TES SOURCES, C EST REELLEMENT DU BEL OUVRAGE ENCORE BRAVO
KENAVO
Commentaire de malalam le 14/08/2003 09:49:36 administrateur CS

Arrête! J'vais rougir!! lol!
Commentaire de zebandit le 26/07/2004 22:36:53

Bonjour je profite de telecharger ce code pour m inscrirer et tester ce nouveau design du site .

Bravo pour la source ;)
Commentaire de experienc le 05/10/2004 15:00:53

ne fonctionne pas avec mozilla firefox .....
Commentaire de bobbyflip le 21/11/2004 13:13:37

super script par contre je narrive a mettre plus de 9 photos et vous?!
Commentaire de malalam le 07/12/2004 12:00:08 administrateur CS

Merci :-)

Hmm...cela fait tres longtemps que je ne me suis pas penche sur ce script...mais je suppose que ca a un rapport avec le nom de l'image (img9, img10...).

Que se passe t il exactement, voir si je peux t'aider?
Commentaire de meh le 07/12/2004 16:27:12

Eh oui, dommage, ne fonctionne malheureusement pas du tout sur Firefox, Mozilla and co
Commentaire de bobbyflip le 08/12/2004 12:48:27

en faite le probleme est que : si je met 10 images,la 10 ne veut pas s'afficher ,elle reste cachée
j'ai regardé plusieur fois, le code est juste
si tu sais comment faire dis le moi stp
Commentaire de sibi12 le 27/01/2005 17:03:32

N'est pas conforme W3C... dommage

Si ça t'interesse j'ai deja coder pour un pote une fonction js qui te permet de faire ce genre d'effet...et qui fonctionne sous mozilla et internet explorer. je peux le poster
Commentaire de meh le 27/01/2005 18:05:25

Oui, poste! :)) ...et que ceux qui comme moi ont désiré être averti par mail pour ce slideshow soit aussi directement averti de ton post ...c'est possible cher javascriptfr.com???:))
Commentaire de sibi12 le 27/01/2005 18:15:01

Voila le code est posté : http://www.javascriptfr.com/code.aspx?ID=29130

(je l'ai mis tel que je l'ai envoyer à mon pote il faut donc broder autour)
Commentaire de meh le 27/01/2005 23:47:01

Ok, merci!!!
Commentaire de malalam le 28/01/2005 13:41:55 administrateur CS

Hello,

oui je sais. A l'epoque, je n'y faisais pas attention, a la portabilite.
De toutes facons, a l'epoque, j'aurais eu du mal a le rendre portable lol...

Donc toutes mes excuses, c'est une erreur que je ne commets plus. En fait, a l'epoque, c'est surtout que ca a ete developpe pour un site qui ne voulait pas de compatibilite autre qu'avec IE...si si, ca existe.

Autre precision : je ne le rendrai pas portable...j'ai malheureusement peu de temps pour ca, et c'est une vieille source.

Ce qui fait, Sibi, que je vais regarder avec grand interet ta source :-)
Commentaire de kalamya le 16/06/2005 13:54:08

Carrément excellent !!!
Séduite, je suis allée voir tes autres sources... Absolument génial !
Fais un site et inséres y une newsletter... je suis certaine que tu auras beaucoup d'abonnés ! Moi la première d'ailleurs :)
Encore Bravo et surtout merci de nous faire partager ton savoir faire !!
Commentaire de malalam le 16/06/2005 13:56:06 administrateur CS

Hello,

ben c'est tres gentil, tu vas me faire rougir la...!
Pour le site, on verra plus tard...j'ai trop de travail, et je bouge trop en ce moment lol. Et j'ai un projet de site qui me tient a coeur, sans aucun rapport avec la programmation.
Mais un jour, sans doute...

Enfin, merci beaucoup en tous cas :-)
Commentaire de montalto le 14/11/2005 14:56:44

Domage sa ne fonctionne pas sous Firefox, qqun aurait un équivalent qui fonctionne sous FF, surtou au niveau du mouvement vers la gauche ou droite???
Commentaire de collombat le 05/05/2006 10:38:46

Est ce qu'il y a eu des améliorations sur ce code car il m'intéresse beaucoup ? Je l'ai testé et je me suis rendu compte de ses limites (compatibilité...) Merci d'avance :-)
Commentaire de Krynna le 10/07/2006 17:52:08

Euh, pour ma part, je suis plus que totalement débutante, alors peut-être que ma question va vous paraître stupide, mais, je voudrais, quand on clique sur l'une des images, l'afficher dans une page html inclue dans un div, et non pas dans une nouvelle fenêtre.
Comment dois-je m'y prendre ?
Merci de votre compréhension devant mon ignorance :p

Krynna.
Commentaire de levelKro le 01/08/2007 01:47:54

J'aimerai savoir comment améliorer la vitesse du Scroll, car ces vraiment pas vite et sur une bibliot`que de + de 10 vignettes, c'ets long tous passer pour atteindre la bonne, et aussi un moyen d'ajouter de koi pour arriver a stoper le scroll si le curseur n'est plus sur les fleches..... je m'en sert en localhost pour une bibliothèque de pochette pour visionner des films ..... et j,aimerai savoir aussi comment tous afficher, sa coupe....
Commentaire de kristowitz le 08/08/2007 18:38:50

dommage que ca marche pas sur mozilla... je voulais le modifier pour l'intégrer à un slideshow perso mais faut que j'en trouve un autre. Si qqun en a un sous le coude... en fait la différence c'est que ca intervertirait une image principale au lieu de la pop-up, dans mon idée.
Kristow
Commentaire de kristowitz le 08/08/2007 18:44:16

salut Levelkro, en fait je me rend compte que mon message précédent s'adresse plutot à toi vu que y'a plus grand monde sur l'affaire, visiblement.
Krynna, je crois qu'on cherche à faire presque la même chose, alors recontacte dans qques temps peut-être que j'aurais trouvé.
Kristow
Commentaire de levelKro le 09/08/2007 05:14:23

J'ai demander a un ami plus callé qu emoi en JS pour améliorer le code et voici ce ki a de mieu et de trouvé;

La navigation est plus intuitive, vers la gauche, sa roule a gauche... vers la droit sa roule a droite, mais au centre, sa arrête.

Pour avoir + d'image, il faut étendre la largeur total à plus....
dont 20 images * 300pix de large donne 6000 pixel largeur total...
Commentaire de fabhayes2008 le 07/07/2008 16:01:15

bonjour

je n'arrive pas a placer mes images dans le scroll ...
que fqut il changer ou ajouter dans le code ??

merci
Commentaire de fabhayes2008 le 08/07/2008 11:10:39

bonjour,

je ne parviens pas a modifier les photos, une fois qu elles sont modifier, elles n apparaissent ni dans les vignettes ni en grand format (un carre blanc avec une croix rouge vient remplacer celles ci).
j effectue le changement sur cette balise :

<a href="javascript: Aff(586, 475, 'Abstaction1.jpg');"><img name="img1" style="filter:alpha(opacity=35)" onmouseout="which=0;this.filters.alpha.opacity=35" onmouseover="Fadeout(10,this);" src="vignettes/Abstaction1 copy.jpg" border=0/></a>

avez vous une solution ??
merci