Article: Smooth Slideshow v1.0

Smooth Slideshow v1.0

03/07/2006 - 14h07 Element appartenant à: Blog, Programmation, JavaScript, Sorties

JonDesign’s Smooth SlideShow Library
En utilisant moo.fx et prototype.lite.js, ce système javascript de “slideshow” vous permet de placer sur votre site des présentations et autres vitrines simplement et avec des effets graphiques de qualité professionnelle.

Attention
Une nouvelle version de JonDesign’s SmoothSlideshow est sortie, allez la voir !

Langues
This article is bilingual, view it in English.
Cet article est bilingue, vous lisez actuellement la version Française.

Liens Rapides
Aller directement sur le site de la bibliothèque (en Anglais)

Pourquoi choisir ce système plutot qu’une solution en Flash ?

Imagineons que vous voulez installer sur la première page de votre site une présentation animée de vos derniers produits, ou même d’un seul produit en montrant plusieurs de ses images sur votre page d’accueil. Restreindriez-vous l’accès à ces fonctions uniquement aux utilisateurs munis du plug-in Flash ?
Un autre point important est le fait qu’en utilisant ce script, vous aurez des pages conformes aux standards du W3C, ce qui est important pour l’accéssibilité par exemple.

Wow cool ! Mais combien ça coûte ?

Rien du tout, cette bibliothèque est sous licence libre, sous licence GPL pour être précis.

Quels navigateurs sont supportés ?

Étant donné que je me suis basé sur la librairie moo.fx, le script est en quelque sorte indépendant du navigateur.
Je l’ai pleinement testé avec:

Firefox
Opera
Internet Explorer v6

Si vous souhaitez m’informer de la façon dont marche ce script sur les autres navigateur, contactez moi par mail ou par google talk à l’adresse jonathan.schemoul@gmail.com.

Où le trouver et comment l’installer ?
Rendez-vous directement sur le site de la bibliothèque (en Anglais) !

Commentaires

Frank a commenté le 4 Juillet 2006 à 10h:

"library" se traduit en français par "bibliothèque" et non pas "librairie" ("bookshop").

Jonathan a commenté le 4 Juillet 2006 à 17h:

À Frank:
Tu as tout à fait raison, je le corrige de ce pas :)
J'ai pris l'habitude (incorrecte) de le dire à force de parler (en anglais le plus souvent) avec des développeurs du monde libre.

Thomas Linard a commenté le 5 Août 2006 à 20h:

Bonjour,

Les scripts ne passent pas le validateur JSLint http://www.jslint.com/. Est-ce délibéré ?

Jonathan a commenté le 7 Août 2006 à 17h:

Bonjour Thomas,

Non, ce n'est pas délibéré.
J'avais testé avec http://www.javascriptlint.com (basé sur le moteur spidermonkey de mozilla) qui lui a validé mon code avec seulement 2 avertissements.

JSlint semble, quand à lui, être plus strict, car de nombreuses librairies (dont smoothslideshow) ne sont pas valides selon ses critères. Dans de nombreux cas le code marche sur la plupart des navigateurs, mais n'est pas valide avec jslint.

Il m'a cependant montré quelques imprécisions dans mon code, et merci pour cela :) Mais je ne pense pas que smoothslideshow sera à 100% valide avec (bien que certaines erreurs seront corrigées dans la v2).

Thomas Linard a commenté le 9 Août 2006 à 14h:

Bonjour Jonathan,

Ça me fait plaisir de voir que vous accueillez bien JSLint !

Je suis toujours un peu surpris devant certaines réactions face à un validateur JavaScript. Si dans un fichier XHTML je ne ferme pas une balise mais que je serve le dit fichier en text/html, aucun navigateur n'y trouvera à redire. Et pourtant, mon code est incorrect et en d'autres circonstances, le parser l'aurait refusé. Bon, tous les développeurs HTML savent cela. Mais pour le JavaScript, je n'entends que « bof, ça passe avec tous les navigateurs que j'ai testé ». Je suis d'accord que JSLint n'est pas un validateur officiel comme celui du W3C pour l'HTML, mais quand même...

Bla a commenté le 10 Août 2006 à 18h:

Bonjour,

Merci beaucoup pour ce joli script ! Néanmoins, j'ai un souci. Je l'utilise pour une galerie de photos générée, et lorsqu'il n'y a qu'une seule photo dans l'album, le slideshow ne se comporte pas bien : l'image s'affiche un court instant, puis le commentaire sans l'image, et ainsi de suite. Y a-t-il une correction à apporter ?

Merci,

Bla

Jonathan a commenté le 12 Août 2006 à 02h:

I am having a similar problem as Bla. What I really want to do is update the list of images being displayed.

I have writted a script that removes the nodes from the original div, resets the params, and then calls initSlideShow again with a new data array. The timings of the image display and inner html information bar are wrong.

Is there a way to dynamically update the images being displayed within the slideshow?

I greatly appreciate the help. Been struggling with this for a few days now. Thank you.

Jonathan

cutibipoulet a commenté le 12 Août 2006 à 18h:

Salut,
J'utilise dojo, et j'ai choisit d'utiliser conjointement ton slideshow... Cependant à chaque modification dynamique de la page (sans rechagement), le slideshow ne se réinitialise pas.
Pour contrer ce probleme, j'ai ajouter une fonction qui permet de stopper les timers...
'clearTimeout'
Simple et désormais cela fonctionne... donc voila c'été juste un post pour informer toutes les personnes dans mon cas, ou pour que Jonathan modifie sa bibliothèque.
Jespere avoir apporté quelque chose d'interessant pour cette bibliothèque.
Sinon merci pour le dev du slideshow.++

Jonathan a commenté le 12 Août 2006 à 22h:

Can you post your "clearTimeout" code? I believe this would help me greatly. Thank you.

Bla a commenté le 13 Août 2006 à 03h:

Hello,

C'est encore moi ...

Un autre souci que j'ai remarqué : le slideshow commence systématiquement à la 3e photo de mes albums.

Une idée ? Merci encore,

Bla

cutibipoulet a commenté le 13 Août 2006 à 23h:

this is the 'clearTimeout' code, i placed it in the "timed.slideshow.js" file :

//at the begining :
var timerIDShowInfo = null;
var timerIDHideInfo = null;
var timerIDNextSlide = null;

//at the end of the doSlideShow i modify the code like that :
timerIDShowInfo = setTimeout(showInfoSlideShow,1000);
timerIDHideInfo = setTimeout(hideInfoSlideShow,slideShowDelay-1000);
timerIDNextSlide = setTimeout(nextSlideShow,slideShowDelay);

//to conclude, i create a fonction to stop the slideshow :

//its not a perfect code... but like i said its work.

Ryan Thrash a commenté le 20 Septembre 2006 à 03h:

Any chance of porting this to the new mootools library at http://mootools.net/ ?

Jonathan Schemoul a commenté le 28 Septembre 2006 à 16h:

(seems that another Jonathan has posted two comments with the same name than me so I'll put my full name on this thread ;))

Hey Ryan,
We discussed about it the other day on gtalk, but I will also answer here, so other people will know.
I will try to work on it as soon as possible, since moo.tools seems to be the future of moo.fx :-)

Jonathan Schemoul a commenté le 7 Octobre 2006 à 01h:

A lot of these bugs will be fixed in some days with the release of Jondesign's SmoothSlideshow v2.0 :)

Fred a commenté le 10 Octobre 2006 à 23h:

Merci Jonathan pour le script, il est très efficae. J'éprouve tout de même un problème à obtenir un lien associé à mon image.

Tout le reste fonctionne. Mais le lien n'apparaît pas.. Bizarre!
--

Jonathan a commenté le 10 Octobre 2006 à 23h:

Bonjour,

Merci pour le retour :)

Pour info la version 2.0 du script vient de sortir (je vais écrire un post de ce pas pour l'annoncer).

Pour le lien, il ne marche que pour la version "timed".
Pour la version "showcase", il faut faire un lien sur le texte, en insérant du code html.
La raison pour cela est que les fleches sont déjà des liens en elles mêmes, et prenent la plupart de l'espace de l'image en terme de surface cliquable.

Forex strategy a commenté le 25 Mars 2008 à 12h:

Foreign exchange and forex strategy<a href="http://personalisinglearning.info/node/20#forex-trading-strategy">Forex trading strategies</a>
http://personalisinglearning.info/node/2...
[URL=http://personalisinglearning.info/node/20#forex-trading-strategy]Forex trading strategies[/URL]

Forex rates a commenté le 25 Mars 2008 à 14h:

Currency exchange <a href="http://ariadne.cs.kuleuven.be/cgmoodle/user/view.php?id=360&course=1#forex-rates">Forex currency rates</a>
http://ariadne.cs.kuleuven.be/cgmoodle/u...
[URL=http://ariadne.cs.kuleuven.be/cgmoodle/user/view.php?id=360&course=1#forex-rates]Forex currency rates[/URL]

Forex systems a commenté le 25 Mars 2008 à 17h:

US dollar and other currencies <a href="http://www.enrichedlearning.co.uk/user/view.php?id=186&course=1#forex-trading-systems
">Forex trading system</a>
http://www.enrichedlearning.co.uk/user/v...
[URL=http://www.enrichedlearning.co.uk/user/view.php?id=186&course=1#forex-trading-systems
]Forex trading system[/URL]

Forex currency trading a commenté le 25 Mars 2008 à 18h:

What is forex trading <a href="http://www.teacool.net/moodle/user/view.php?id=1683&course=1#forex-and-gold">Forex currency trading</a>
http://www.teacool.net/moodle/user/view....
[URL=http://www.teacool.net/moodle/user/view.php?id=1683&course=1#forex-and-gold]Forex currency trading[/URL]

Broker trading a commenté le 31 Mars 2008 à 00h:

As one of the premier brokers <a href="http://moodle.everacruz.gob.mx/moodle/user/view.php?id=1716&course=1#broker-forex-trading">Broker forex trading</a>
http://moodle.everacruz.gob.mx/moodle/us...
[URL=http://moodle.everacruz.gob.mx/moodle/user/view.php?id=1716&course=1#broker-forex-trading]Broker forex trading[/URL]

bulka a commenté le 1 Avril 2008 à 19h:

DL1MtW <a href="http://mukran.mycyberway.com/nex/anak-smu-telanjang.html">anak smu telanjang</a>
<a href="http://mukran.mycyberway.com/nex/anak-smu-telanjang-di-handphone.html">anak smu telanjang di handphone</a>
<a href="http://mukran.mycyberway.com/nex/daftar-cewek-pangglan-jogja.html">daftar cewek pangglan jogja</a>
http://mukran.mycyberway.com/nex/artis-r...
http://mukran.mycyberway.com/nex/Agnes-m...
http://mukran.mycyberway.com/nex/bugil-s...

brain a commenté le 16 Avril 2008 à 01h:

6DVyyP 0f9v37f7d2g9flas5

bserrr a commenté le 30 Avril 2008 à 22h:

buy viagra <a href=http://www.techdis.ac.uk/community/user/view.php?id=1576&course=1>buy viagra</a>

cserrr a commenté le 30 Avril 2008 à 22h:

buy levitra <a href=http://medschool.slu.edu/moodle/user/view.php?id=3431&course=1>buy levitra</a>

graduation backgrounds a commenté le 2 Mai 2008 à 23h:

comment1, <a href="http://ppcdoorway.com/players/mp3-player-buyer-guide">mp3 player buyer guide</a>, http://ppcdoorway.com/players/mp3-player... mp3 player buyer guide, :-OO, <a href="http://ppcdoorway.com/translators/arabic-tattoos">arabic tattoos</a>, http://ppcdoorway.com/translators/arabic... arabic tattoos, 532, <a href="http://ppcdoorway.com/trousers/tight-leather-trousers">tight leather trousers</a>, http://ppcdoorway.com/trousers/tight-lea... tight leather trousers, hpefaz, <a href="http://ppcdoorway.com/jacket/italian-leather-jackets">italian leather jackets</a>, http://ppcdoorway.com/jacket/italian-lea... italian leather jackets, 4817,

hbscpx a commenté le 8 Mai 2008 à 01h:

dpxolg <a href="http://cuzbquncgwdf.com/">cuzbquncgwdf</a>, [url=http://zpslicsubjdd.com/]zpslicsubjdd[/url], [link=http://hynnqjnbayoj.com/]hynnqjnbayoj[/link], http://klvooeezteaf.com/

Zramciwv a commenté le 11 Mai 2008 à 18h:

Lmtknubj a commenté le 11 Mai 2008 à 19h:

Jlruesbz a commenté le 11 Mai 2008 à 19h:

Where to find the in the Internet?, http://buy-viagra-soft-tabs.theonlinedru... buy viagra soft tabs, 45703,

Oquyxruo a commenté le 11 Mai 2008 à 19h:

Where it is possible to buy the ? <br>It is very necessary! , http://buy-cialis-soft-tabs.theonlinedru... buy cialis soft tabs, ugf,

Disewoij a commenté le 11 Mai 2008 à 20h:

Mqesnwrs a commenté le 11 Mai 2008 à 20h:

Nnpfmcdf a commenté le 11 Mai 2008 à 21h:

The too is necessary to me. How it to order? , http://buy-penis-growth-pills.theonlined... buy penis growth pills, scdhr,

Ntjtuedj a commenté le 11 Mai 2008 à 22h:

Who knows where to find the ? , http://buy-penis-growth-oil.theonlinedru... buy penis growth oil, ercmvr,

Mdzncbto a commenté le 11 Mai 2008 à 22h:

Order and buy the in ours online-shop! Only for dead presidents :), http://buy-penis-extender-standard.theon... buy penis extender standard, jnskqk,

Vbgywwfj a commenté le 11 Mai 2008 à 23h:

The too is necessary to me. How it to order? , http://buy-human-growth-hormone-agent.th... buy human growth hormone agent, 6369,

Gfcrutoe a commenté le 11 Mai 2008 à 23h:

In whom it is possible to order the ? Who can help? , http://buy-phentrimine.theonlinedrugshop... buy phentrimine, qybqi,

Uujtupcp a commenté le 11 Mai 2008 à 23h:

Dhszqpch a commenté le 12 Mai 2008 à 00h:

Agbvilqo a commenté le 12 Mai 2008 à 00h:

Wrgyokmx a commenté le 12 Mai 2008 à 01h:

So where it to find?, http://order-viagra-soft-tabs.theonlined... order viagra soft tabs, gxfeex,

Gjclpzpe a commenté le 12 Mai 2008 à 01h:

Urgently! Friends asked! I have a ! I can sell. , http://order-cialis-soft-tabs.theonlined... order cialis soft tabs, gkrwkz,

Vgaekcml a commenté le 12 Mai 2008 à 02h:

Tkybkdcf a commenté le 12 Mai 2008 à 03h:

It is necessary to search correctly. By the way, who to share the helpful information? Where it is possible to find? , http://order-female-viagra.theonlinedrug... order female viagra, :)),

Pttqxfpy a commenté le 12 Mai 2008 à 03h:

Sell the ! It is very complex for finding... , http://order-penis-growth-pills.theonlin... order penis growth pills, qev,

Ohroqlld a commenté le 12 Mai 2008 à 04h:

Give somebody the to a site about the ? , http://order-penis-growth-oil.theonlined... order penis growth oil, caodj,

Nwjlxdxs a commenté le 12 Mai 2008 à 04h:

Where it is possible to order the in us? , http://order-penis-extender-standard.the... order penis extender standard, 0668,

Bnvtlvpb a commenté le 12 Mai 2008 à 05h:

On this site it is possible to find the , http://order-human-growth-hormone-agent.... order human growth hormone agent, zaog,

Ubojcfcc a commenté le 12 Mai 2008 à 05h:

Help to find in the Internet the ! Write on e-mail. , http://order-phentrimine.theonlinedrugsh... order phentrimine, %-(((,

Hagnfhke a commenté le 12 Mai 2008 à 06h:

Postez un commentaire

Derniers Projets

PGO Automobiles Projet de type: Web PlayZikStar Projet de type: Web Holdiland: Boutique en ligne Projet de type: Web

Articles Récents

Paris Envies, Bars et ... Element appartenant à: Blog, Frameworks, Sorties, WebDesign, Web 2.0, TurboGears Découverte : iGoogle Element appartenant à: Blog, Utile, Web 2.0 Smooth Gallery v1.0 Element appartenant à: Blog, Programmation, JavaScript, Sorties, Standards, WebDesign, SmoothGallery Smooth Slideshow v2.1 Element appartenant à: Blog, Programmation, JavaScript, Sorties JonDesign in English just ... Element appartenant à: Blog, Sorties

Nous avons aimés...

Kick & Blog Blog sur les nouvelles technologies et le marketing. Vibleog Le blog des Dailyoutubers. BlogTheCom Blog sur la communication.

Accueil - Ordinateurs haut de gamme - Bar Paris - Articles - Brice - Projets

Switch to English Passez à la version Française Flux RSS des Articles XHtml 1.1 Valide