Animated InnerFade with JQuery
Présentation
Ce plugin pour jQuery est une extension du travail de Torsten Baldes : InnerFade with JQuery.
Nous avons ajouté :
un effet de mouvement sur les images à la manière des animations en flash. Cet effet est désactivable.
la possibilité de piloter l’affichage : boutons ’précédent’, ’pause’, et suivant’
la possibilité d’afficher une image de fond au besoin pour habiller l’ensemble et se caler sur le design
l’affichage des titres des images (dans une zone modifiable via les css)
Exemple 1 : un portfolio
Dans la section HEAD :
- <script type="text/javascript" src="/js/jquery.js"></script>
- <script type="text/javascript" src="/js/jquery.animated.innerfade.js">
- </script>
- <script type="text/javascript">
- $(document).ready( function(){
- $('ul#animated-portfolio').animatedinnerfade({
- speed: 1000,
- timeout: 5000,
- type: 'random',
- containerheight: '300px',
- containerwidth: '270px',
- animationSpeed: 5000,
- animationtype: 'fade',
- bgFrame: 'none',
- controlBox: 'none',
- displayTitle: 'none'
- });
- } );
- </script>
Dans la section BODY :
Comme avec le plugin Innerfade original, vous devez constituer dans votre page, la liste des images de votre diaporama :
- <ul id="animated-portfolio">
- <li>
- <a href="http://www.cc-plateau-chaisedieu.fr"><img src="/lab/images/cc-chaisedieu.jpg" alt="cc-chaise-dieu" title="Communauté de communes du Plateau de la Chaise-Dieu" width="400" height="411" /></a>
- </li>
- <li>
- <a href="http://www.casadart.fr"><img src="/images/casadart.jpg" alt="OpenStudio" title="Casa d'Art" width="400" height="335" /></a>
- </li>
- <li>
- <a href="http://www.3bm.fr"><img src="/lab/images/3bm.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'hôtel de région" width="400" height="411" /></a>
- </li>
- <li>
- <a href="http://www.aupanierdauvergne.fr"><img src="/lab/images/aupanierdauvergne.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'hôtel de région" width="400" height="425" /></a>
- </li>
- </ul>
vérifiez dans vos feuilles de style que margin et padding sont à 0, insérez éventuellement les lignes :
ul#animated-portfolio{
padding: 0;
margin: 0;
list-style-type: none;
}
ul#animated-portfolio li{
padding: 0;
}Exemple 2 : vues panoramiques
Dans la section HEAD :
- <script type="text/javascript" src="/js/jquery.js"></script>
- <script type="text/javascript" src="/js/jquery.animated.innerfade.js">
- </script>
- <script type="text/javascript">
- $(document).ready( function(){
- $('ul#animated-portfolio').animatedinnerfade({
- speed: 2000,
- timeout: 15000,
- type: 'sequence',
- containerheight: '300px',
- containerwidth: '600px',
- animationSpeed: 15000,
- animationtype: 'fade',
- bgFrame: 'squelettes/img/frame.png',
- controlBox: 'show',
- controlBoxClass: 'mycontrolboxclass',
- controlButtonsPath: 'squelettes/img',
- displayTitle: 'yes'
- });
- } );
- </script>
Dans la section BODY :
- <ul id="animated-portfolio">
- <li>
- <a href="http://www.openstudio.fr"><img src="/images/statue2.jpg" alt="openstudio" title="Le Puy en Velay, Auvergne - vue depuis la statue Notre Dame" width="1373" height="375" /></a>
- </li>
- <li>
- <a href="http://www.openstudio.fr"><img src="/lab/images/vue-puy-en-velay2-375.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis le Rocher Corneille" width="1739" height="375" /></a>
- </li>
- <li>
- <a href="http://www.openstudio.fr"><img src="/lab/images/vue-puy-en-velay4-375.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'hôtel de région" width="2099" height="375" /></a>
- </li>
- </ul>
Dans le CSS :
Dans cet exemple, nous avons paramétré l’affichage de la zone de titre dans notre CSS, de la façon suivante :
position: absolute;
bottom: 20px;
left: 0;
z-index: 290;
width: 100%;
background: #00a7ee url(img/title-bg.png);
height: 34px;
filter:alpha(opacity=80);
-moz-opacity: 0.8;
opacity: .8;
border-top: 1px solid white;
}
.innerfade-title h2{
color: white;
font-weight: bold;
margin-top: 0;
margin-bottom: 0;
text-align: center;
font-family: Arial;
font-size: 16px;
font-style: italic;
line-height: 34px;
}
.mycontrolboxclass{
position: absolute;
right: 35px;
top: 20px;
}
ainsi que :
padding: 0;
margin: 0;
list-style-type: none;
}
ul#animated-portfolio li{
padding: 0;
}
Utilisation
$('ID or class of the element containing the fading objects').animatedinnerfade({
parameter1: 'value1',
parameter2: 'value2',
...
});| paramètres | valeurs |
|---|---|
| animationtype | Type of animation ’fade’ or ’slide’ (Default : ’fade’) |
| speed | Fadingspeed in milliseconds or keywords (slow, normal or fast)(Default : ’normal’) |
| timeout | Time between the fades in milliseconds (Default : ’15000’) |
| type | Type of slideshow : ’sequence’ or ’random’ (Default : ’sequence’) |
| containerheight | Height of the containing element in px (Default : ’300px’) |
| containerwidth | Width of the containing element in px (Default : ’600px’) |
| animationSpeed | Animation speed in miliseconds (default : 15000). Mettez une valeur de 0 pour désactiver l’effet de mouvement |
| runningclass | CSS-Class which the container get’s applied (Default : ’innerfade’) |
| bgFrame | path to the frame to display under the view. (Default : ’none’) |
| controlBox | ’none’ ’show’ (always visible) or ’auto’ (appears on mouse over), add ’rew’, ’pause’ and ’next’ buttons on mouse over. Attention : Requires jquery >= 1.2.1 |
| controlBoxClass | CSS-Class which the container get’s applied or ’none’ (Default : ’none’) |
| controlButtonsPath | path for control buttons : previous.gif, pause.gif, play.gif and next.gif (default : ’img’) |
| displayTitle | display titles ? ’yes’ or ’none’. (default ’none’) |
| titleClass | CSS class for title panel. (Default : ’innerfade-title’) |
Vous devez donner explicitement les attributs title, width and height sur vos images pour pouvoir bénéficier de l’affichage du titre et de l’effet de mouvement.
Note : si vous utilisez une image de fond au format png, vous devez appliquer un patch pour la compatibilité avec ie6. Exemple avec le patch win_png.htc, ajoutez simplement la ligne suivante dans votre CSS :
.bg-frame img{ behavior: url(win_png.htc); }Téléchargement
Logiciel libre distribué sous licence GNU/GPL.











48 Messages
11 décembre 2011, 07:49, par nishant
How can i Download of that Query ?
9 juin 2011, 22:42, par Martin
Hi there,
nice script - but im having problems get the play, next, previous button to work. Its simply not appearing. The image path is right but its not appearing.
Any ideas ?
12 mars 2011, 09:36, par pascal
Salut ; Merci de ce dev ;
13 février 2011, 15:56
Its great plugin !Thanks you !
18 janvier 2011, 02:31, par Merlinox
This plugin is very good.
Is there a way to set a cookie with last image view, and restart by them (if user reload) ?
Thanks.
29 septembre 2010, 16:50, par Rob
Hello,
I know how to make it to animate from the bottom to top and back to the bottom, but is it possible to make it go from bottom to top and then stop and fade into the next picture ? I don’t want it to go to the bottom again.
Many thanks in advance,
Rob
13 septembre 2010, 10:22, par Matt
This is great but I cannot get the script to run in IE6 or IE7. I just get a stack of images. Any ideas ?
http://dev.mattcampy.com/mit_ci/index.html
20 novembre 2009, 09:10, par Arnault Pachot
hello, this perhabs ?
> http://www.openstudio.fr/jquery/
19 novembre 2009, 21:01, par david_ffm
hello,
i am looking for an image slider in javascript. it should be a row of thumbnails that keeps moving to the left and/or right.
it should be either moving constantly or move "onmouseover" (not by clicking)
my brother keeps pretending that he saw those kind of sliders on this page here somewhere. he says he saw a page with loads of different applications relating to images/jquery, amongst also panorama viewer, virtual tour etc.
he bookmarked this page but now he pretends it looks different. google archive search tells me that he is wrong somehow ;-) ... but still, admin or somebody, anyone has an idea ?
many thanks in advance,
david
24 juin 2009, 22:16, par ZeB
Bon finalement il fallait modifier plus en profondeur les CSS de la FancyBox pour qu’elle reste à tout prix au dessus de l’innerfade.
Par contre, il me semble que votre plug-in est un peu buggé (et ce n’est pas relatif à mes scripts, ça le fait aussi sur votre démo) : si on met en pause pendant la transition de deux images, puis que l’on relance, l’image en cours ne continue pas son FadeIn. Si on continue à jouer comme ça deux ou trois fois, là ça commence à bien bugger, et parfois il n’y a même plus de FadeIn ou FadeOut à la transition...
22 juin 2009, 13:48, par ZeB
Bonjour,
Tout d’abord bravo pour cette extension du plug-in InnerFade :)
Néanmoins, j’ai un petit souci. J’utilise FancyBox (un lightbox like), et lorsque je lance ce dernier (avec un diaporama innerfade en arrière-plan), la FancyBox passe derrière le diaporama (après le premier fade). J’ai essayé d’appliquer un z-index:999 ; à la fancybox mais ça n’a rien réglé...
Une petite idée pour m’aider ? Merci d’avance ;)
(j’ai mis le lien de la démo, allez sur Portfolio (ou touche P), puis cliquez sur crédits (en bas à droite ou touche R), laissez tourner au moins un cycle de fade pour voir le problème)
Voir en ligne : Démo
7 juin 2009, 12:19, par katmandou
Bonjour, et merci pour ce super plugin.
Il me plait tellement, que je veux en mettre plusieurs sur ma page d’accueil, mais ça ne marche pas.
Je suppose qu’il faudrait remplacer le id par une classe (un id est a priori unique) ?
Voir en ligne : Binod singer
23 avril 2009, 07:51, par ede
Bonjour Bravao pour ce tuto mais Hela jai un BUG sou IE 6 7 8 Quelqu’un peu amaider
17 avril 2009, 12:00, par x@v
bonjour,
moi sous ie sa bug complètement, je ne vois pas bien pourquoi, étant donné que j’ai recopié l’exemple et utilisé la même css ?
http://www.6tnline.com/cour/minSite/diaporama.html
Merci
8 avril 2009, 16:04
I have to agree with Anthony. This is a CPU hog ! I’m not even using the sliding animation. I’m simply iterating a list of 5 short sentences ! I’m using FF 3.0.8 on a 2.3GHZ MacBook Pro with 4 GB of memory, and it’s not happy. The CPU usage jumps from 0.8 (idle) to anywhere between 30-50% whilst running.
Merci,
JP
11 mars 2009, 06:26
I downloaded the example zip file. Everything works but the "controls" in Example 2 are "missing". Can you help out on this ?
Thanks
12 février 2009, 18:44
Bonjour et merci pour votre code.
j’aimerais simplement afficher les boutons avant et après (sans le pause)
que dois je faire ? est ce compliqué ?
11 novembre 2008, 18:14
This failed to work in IE6/7 until I changed containerheight to containerHeight :(
Voir en ligne : Tom Coady
5 octobre 2008, 14:20, par Joris
Hello,
i really like this effect and i’m trying to use it as a way to make a ’film’ like effect. I want an image to be seen from left to right, no up and down, and then fade to load another image from left to right.
I’m able to get it working like this, but it doesn’t move ’smoothly’. Is there a way to get the ’stopping in the middle of the image and then move forward’ (i guess its the up and down) out of the script ?
I got the up and down out of it by making the containerheight as high as the images...
Greetings and thanks.
Voir en ligne : http://www.mijnruimte.com/index.htm
14 septembre 2008, 04:50
Hi, I am very happy with this script, but I am having a problem in IE7 with part of the transition. I am placing my content for these inside of divs rather than ul items as I want to have some text on the overlay but below the title :
http://socalcoasters.com/sccv308_test2.html
If you look at the bottom half of this, which I set up as .innerfade-title2, while it works perfectly in Firefox, in IE the second class I added has a delay/choppiness with the opacity transition on the part I added.....is there any way to get the same smoothness in transition as if I just used the Title attribute ? Thanks.
Voir en ligne : http://socalcoasters.com/sccv308_te...
22 juillet 2008, 16:54, par shimmy
is there a way to stop the animation after a set time ?
i want it to loop through a set of images and then stop at the end. without a continues loop.
16 juin 2008, 14:45, par casey
To make first image random (when settings.type == ’random’), I changed some code :
(look for variable ’first’)
24 mai 2008, 01:53, par brice
Bonjour
Bravo pour le plugin
Helas j’ai un bug sous FF sur MAC
Le plugin modifie la propriété font-weight il me semble et tous mes textes s’en retrouvent "’clignotants" plus ou moins gras, cela me le fait meme sur votre site !
Ya til une solution ?Merci d’avance
7 mai 2008, 10:58, par Arnault
I have fixed this bug but not reported fixes on the jQuery plugins repository. I’ll do it,
Thanks !
6 mai 2008, 20:10, par FilmTraveler
There is a bug on line 66 of version 0.1.1 -
this line has settings.controlBoxclass but it is supposed to be settings.controlBoxClass - notice the lower-case "c" in the original version. I hope this helps and is corrected in a future version !
24 avril 2008, 21:41
exelente plugin gracias !!!
Voir en ligne : http://infowey.com
15 février 2008, 14:29
Bonjour
Ce diapo est vraiment chouette ..
Cependant je rencontre un petit problème.
Il diffuse des images qui n’ont pas toujorus la meme largeur ni hauteur, et j’aimerais que ces images soient centrées dans ma division. Je n’y parviens d’aucuns manières.
Même si je met un
et que je lui attribue text-align : center ; ca ne va pas.
J’ai essayé en jouant sur les marges etc... Mais je n’y parviens toujours pas :-)
Merci à vous
11 février 2008, 10:30, par Arnault
Bonjour,
Oui, c’est possible avec la fonction
triggerde jQuery. http://docs.jquery.com/Events/trigg...l’idée c’est de simuler un click sur les boutons de navigation.
voici un exemple (non testé, je l’écris en direct) :
$(document).ready()après l’appel à animated inerfade :$("a.next-button").css("visibility", "hidden"); //on masque la flèche sur l'image$("a.mon-declencheur-suivant").bind('click', function(){
$("a.next-button").trigger('click'); //lorsqu'on clique sur le lien "suivant", on déclenche un click sur la flèche de l'image
});
<a href="#" class="mon-declencheur-suivant">suivant</a>a+
10 février 2008, 18:00, par Arnault
merci VDigital, c’est corrigé !
très bonne idée l’intégration dans phpwebgallery. Je suis en train de reprendre un peu le plugin, pour le simplifier et alléger le cpu, pour l’instant c’est pas très concluant...
a+
9 février 2008, 22:41, par VDigital
Juste pour correction dans le css fourni en exemple sur ul#animated-portfolio :
ul#animated-portfolio{padding: 0;
margin: 0;
list-style-tyle: none;
}
C’est list-style-type
avec un ’p’ et non un ’l’...
8-)
Voir en ligne : Plugin Panoramas
5 février 2008, 17:58, par trolin
bonjour,
j’aime beaucoup votre plugin, il fonctionne très bien
(merci de le partager)
je rencontre cependant une limitation : j’aimerais pouvoir déclencher l’arrêt ou la reprise du diaporama par des évènements de mon choix (par exemple au survol de la souris sur l’image). est ce possible ?
merci d’avance de votre réponse
5 février 2008, 00:39, par VDigital
Juste pour vous signaler la prochaine publication d’un plugin...
Pré-Annonce sur le site de PhpWebGallery et Démo en ligne sur mon site.
Autant dire tout de suite des dizaines de nouveaux utilisateurs dans les prochains jours.
D’avance et au nom de tous : un grand merci, pour ces scripts.
Vincent (aka VDigital)
Membre de l’équipe de développement de PhpWebGallery
Voir en ligne : [Plugin] Panoramas
3 février 2008, 20:34, par Arnault
Hi ! Sorry for the delay before answering (big work at this beginning of year !)
Thank you for your comments.
I believe that the both last problems are linked.
I will work on it.
25 janvier 2008, 11:54, par Sim
I’m not an experienced JS developer but I’m experimenting with your Innerfade extension and found that if I add displayTitle : ’yes’ and refresh the page in Safari on Mac 10.5.1 it causes it to quit unexpectedly.
It works fine in Firefox on the same system.
When I take the displayTitle out, the problem is solved.
Very useful plug-in though. Thanks and keep up the hard work. Regards
Sim
24 janvier 2008, 12:31
Hi,
This script eats 80% cpu on firefox with Ubuntu. Is there any possibility for a fix ? Great script !
Greets,
Anthony
11 décembre 2007, 16:05, par Arnault
good idea. i have introduced new values for the ’controlBox’ parameter :
i have updated the zip file.
@+
11 décembre 2007, 14:58, par Lúcio Carneiro
Excelent plugin !
Only one thing : how can I set the controlBox to be always visible, not only on mouse over ?
Thank you !
27 novembre 2007, 11:50, par Arnault
pour info, j’ai juste agrandi un peu l’image de contour pour qu’elle fasse les dimensions exactes de la fenêtre. En principe ce redimensionnement est automatique (via les css), cependant sous ie, si on utilise le patch win_png.htc pour la transparence des png sous ie, le redimensionnement ne se fait plus.
27 novembre 2007, 11:30, par Arnault
ok merci ! c’est corrigé.
(bien rafraîchir le navigateur pour avoir la dernière version).
27 novembre 2007, 10:08
Bonjour,
sur IE6 seulement, il y a une marge bas et droite de 1cm environ en trop ou l’image apparait apres le cadre.
C’est depuis que vous avez mis un cadre (alors qu’il n’y en avait pas) qu’il y a ce defaut.
Allez sur la page avec IE et vous constaterez
merci
23 novembre 2007, 13:24, par Arnault
c’est juste un pb avec la transparence des png sous ie6. le patch n’était pas appliqué correctement.
la bonne syntaxe est :
.bg-frame img { behavior: url(win_png.htc); }23 novembre 2007, 11:16
Encore moi !
Merci pour les modifs
Sur IE seulement, le panoramic views n’affiche rien.
De plus, (pour info), dans le fichier index.html il y a src="squelettes/js/jquery.animated.innerfade.compressed.js"
qui n’existe pas dans le rep js
Le porfolio marche partout
merci
23 novembre 2007, 10:49
merci
j’allais justement te proposer la même solution (bloquer les boutons tant que l’image n’est pas complètement chargée)
j’essaie ton nouveau script
merci de ta réactivité
22 novembre 2007, 19:26, par Arnault
ok, le pb survient lorsqu’on revient sur une image trop vite (dont l’anim n’est pas complètement terminée). En attendant une meilleure solution, je bloque les boutons next/prev tant que l’image ciblée n’est pas prête.
j’ai mis à jour le zip. merci pour tes commentaires !
sinon pour le carroussel, j’envisage rien pour l’instant. Celà dit, je suis en train de développer un carrousel multimédia (photo, vidéo et audio) en jQuery : http://www.openstudio.fr/jQuery-Mul...
22 novembre 2007, 15:04
Petite précision ;
lorsque l’on clique vite ou successivement sur la fleche pour voir les images suivantes, il n’y a plus d’image affichée, il faut attendre quelques secondes que ca revienne ; de plus le sens est inversé, ca va dans un sens puis dans l’autre ;
c’est la pagaille, puis ca revient tranquillement
C’est valable pour tous les navigateur
Merci
22 novembre 2007, 14:49
Merci pour votre modif
C’est phénoménal
c’est parfait, sauf sur Opéra ou en cliquant sur le bouton image suivante, à un moment il n’y a plus d’image qui s’affiche.
De plus le fadeIn/Out ne fonctionne pas.
Je déclare votre diaporama comme le meilleur sur Internet !
Pourriez-vous rajouter la fonctionnalité "miniatures" : en cliquant sur un petit bouton, les vignettes des photos apparaissent ; en cliquant sur une d’elle, celà mène à l’affichage de la photo.
Il y a un plugins super : http://sorgalla.com/jcarousel/ qui fait celà ;
Les 2 scripts réunis, ça ferait un systeme de diaporama, complet et fantastique
Merci
22 novembre 2007, 14:18, par Arnault
Bonjour, vous avez raison, il faut également préciser :
ul {margin: 0; padding: 0;}img {border: none;}
J’en ai profité pour l’inclure dans la nouvelle version du zip, ainsi qu’un fichier index.html et des images d’exemple. Tenez moi au courant.
22 novembre 2007, 09:21
Bonjour, et merci pour ce beau plugin qui a de suite attiré mon attention parmi des dizaines testés.
Sur mon PC XP, j’ai un problème d’affichage.
Sur IE6, les boutons de défilement d’images sont avec une bordure ; l’image elle même à un cadre sur le côté gauche et haut.
Sur le dernier Firefox, 3 cotés ont une bordure (sauf le bas), les boutons sont avec bordure et la fenêtre de l’image est trop large d’un centimètre (l’image déborde)
Sur Opéra, tout semble marcher ; mais à un moment tout s’arrête et plus aucune images
Manque t-il un css, dans votre page de démo ?
merci d’avance pour votre réponse