OpenStudio LAB

Thelia est un outil de création de sites e-commerce et de gestion de contenu en ligne basé sur Symfony 2. Vous trouverez dans cette section un aperçu de nos autres contributions libres et variées : développements logiciels, thèmes graphiques, tutoriels...

Animated InnerFade with JQuery

What is it ?

This plugin for jQuery is an extension to the work of Torsten Baldes : InnerFade with JQuery.

We added :
- an optional slide effect on large images
- ’prev’, ’pause’, ’next’ functions
- an optional background frame
- a title panel

Exemple 1 : portfolio

  • cc-chaise-dieu
  • OpenStudio
  • OpenStudio
  • OpenStudio

In the BODY section

  1. <script type="text/javascript" src="/js/jquery.js"></script>
  2. <script type="text/javascript" src="/js/jquery.animated.innerfade.js">
  3. </script>
  4. <script type="text/javascript">
  5. $(document).ready( function(){
  6.     $('ul#animated-portfolio').animatedinnerfade({
  7.         speed: 1000,
  8.         timeout: 5000,
  9.         type: 'random',
  10.         containerheight: '300px',
  11.         containerwidth: '270px',
  12.         animationSpeed: 5000,
  13.         animationtype: 'fade',
  14.         bgFrame: 'none',
  15.         controlBox: 'none',
  16.         displayTitle: 'none'
  17.         });
  18. } );
  19. </script>

In the BODY section

  1. <ul id="animated-portfolio">                                   
  2. <li>
  3.         <a href=""><img src="/images/cc-chaisedieu.jpg" alt="cc-chaise-dieu" title="Communaut&eacute; de communes du Plateau de la Chaise-Dieu" width="400" height="411" /></a>
  4. </li>
  5. <li>
  6.         <a href=""><img src="/images/casadart.jpg" alt="OpenStudio" title="Casa d'Art" width="400" height="335" /></a>
  7. </li>
  8. <li>
  9.         <a href=""><img src="/images/3bm.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'h&ocirc;tel de r&eacute;gion" width="400" height="411" /></a>
  10. </li>  
  11. <li>
  12.         <a href=""><img src="/images/aupanierdauvergne.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'h&ocirc;tel de r&eacute;gion" width="400" height="425" /></a>
  13. </li>  
  14. </ul>

in your CSS check that padding an margin are set to 0 :

        padding: 0;
        margin: 0;
        list-style-type: none;
ul#animated-portfolio li{
        padding: 0;

Example 2 : panoramic views

  • openstudio
  • OpenStudio
  • OpenStudio

In the HEAD section :

  1. <script type="text/javascript" src="/js/jquery.js"></script>
  2. <script type="text/javascript" src="/js/jquery.animated.innerfade.js">
  3. </script>
  4. <script type="text/javascript">
  5. $(document).ready( function(){
  6.      $('ul#animated-panorama').animatedinnerfade({
  7.             speed: 2000,
  8.             timeout:  15000,
  9.             type: 'sequence',
  10.             containerheight: '300px',
  11.             containerwidth: '600px',
  12.             animationSpeed: 15000,
  13.             animationtype: 'fade',
  14.             bgFrame: 'squelettes/img/frame.png',
  15.             controlBox: 'show',
  16.             controlBoxClass: 'mycontrolboxclass',
  17.             controlButtonsPath: 'squelettes/img',
  18.             displayTitle: 'yes'
  19.       });
  20. } );
  21. </script>

In the BODY section :

  1. <ul id="animated-portfolio">
  2.    <li>
  3.         <a href=""><img src="/images/statue2.jpg" alt="openstudio" title="Le Puy en Velay, Auvergne - vue depuis la statue Notre Dame" width="1373" height="375" /></a>
  4.    </li>
  5.    <li>
  6.         <a href=""><img src="/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>
  7.    </li>
  8.    <li>
  9.         <a href=""><img src="/images/vue-puy-en-velay4-375.jpg" alt="OpenStudio" title="Le Puy en Velay, Auvergne - vue depuis l'h&ocirc;tel de r&eacute;gion" width="2099" height="375" /></a>
  10.     </li>      
  11. </ul>

In the CSS : (layout for title panel is defined in the CSS)

        position: absolute;
        bottom: 20px;
        left: 0;
        z-index: 290;
        width: 100%;
        background: #00a7ee url(img/title-bg.png);
        height: 34px;
        -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;
        position: absolute;
        right: 35px;
        top: 20px;

and check that padding an margin are set to 0 :

        padding: 0;
        margin: 0;
        list-style-type: none;
ul#animated-portfolio li{
        padding: 0;

The call

$('ID or class of the element containing the fading objects').animatedinnerfade({
                   parameter1: 'value1',  
                   parameter2: 'value2',
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). Just set it to 0 to disable the slide effect
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’)

You need to set title, width and height attributes on images to display title on panel and activate the sliding effect on images.

Note : if you are using a png frame, you need apply a patch for transprency on ie6. for example when using the patch, add this call on your css :

.bg-frame img{ behavior: url(; }


This program is free software; you can redistribute it and/or
modify it under the terms of the GNU General Public License
as published by the Free Software Foundation; either version 2
of the License, or any later version.

48 Forum posts

  • How can i Download of that Query?

  • 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?

  • Salut; Merci de ce dev ;

  • Its great plugin!Thanks you!

  • This plugin is very good.
    Is there a way to set a cookie with last image view, and restart by them (if user reload)?


  • 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,


  • This is great but I cannot get the script to run in IE6 or IE7. I just get a stack of images. Any ideas?

  • 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,


  • 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...

  • 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)

    View online : Démo

  • 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)?

    View online : Binod singer

  • Bonjour Bravao pour ce tuto mais Hela jai un BUG sou IE 6 7 8 Quelqu’un peu amaider

  • 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 ?


  • 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.


  • I downloaded the example zip file. Everything works but the "controls" in Example 2 are "missing". Can you help out on this?


  • 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é ?

  • This failed to work in IE6/7 until I changed containerheight to containerHeight :(

    View online : Tom Coady

  • 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.

    View online :

  • 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:

    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 there any way to get the same smoothness in transition as if I just used the Title attribute? Thanks.

    View online :

  • 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.

  • To make first image random (when settings.type == ’random’), I changed some code:

    (look for variable ’first’)

                    if (elements.length > 1) {
                            var first = 0;
                            if ( settings.type == 'random' ) {
                                    do { first = Math.floor ( Math.random ( ) * ( elements.length ) ); } while ( first == 0 )

                            $(this).css('position', 'relative').css('overflow', 'hidden').css('height', settings.containerheight).css('width', settings.containerwidth);

                            for ( var i = 0; i < elements.length; i++ ) {
                                    $(elements[i]).css('position', 'absolute').css('top', 0).css('left', 0).css('z-index', String(elements.length-i));
                            $(elements[first]).css('top', 0);
                            $(elements[first]).css('left', 0);
                            $.animatedinnerfade.move_photo(elements[first], settings);
                            if ( settings.type == 'sequence' ) {
                                    mytimer = setTimeout(function(){
                                            $, settings, 1, first, mytimer, pauseActivated);
                                    }, settings.timeout);
                            else {
                                    var nextrandom;
                                    do { nextrandom = Math.floor ( Math.random ( ) * ( elements.length ) ); } while ( nextrandom == first )
                                    mytimer = setTimeout((function(){$, settings, nextrandom, first, mytimer, pauseActivated);}), settings.timeout);
  • 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

  • I have fixed this bug but not reported fixes on the jQuery plugins repository. I’ll do it,

    Thanks !

  • 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!

  • exelente plugin gracias !!!

    View online :

  • 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

  • Bonjour,

    Oui, c’est possible avec la fonction trigger de jQuery.

    l’idée c’est de simuler un click sur les boutons de navigation.

    voici un exemple (non testé, je l’écris en direct) :

    - dans la section head, dans $(document).ready() après l’appel à animated inerfade :

    $("").css("visibility", "hidden"); //on masque la flèche sur l'image
    $("a.mon-declencheur-suivant").bind('click', function(){
         $("").trigger('click');  //lorsqu'on clique sur le lien "suivant", on déclenche un click sur la flèche de l'image

    - dans le body : mettre un lien pour afficher l’image suivante

    <a href="#" class="mon-declencheur-suivant">suivant</a>

    - faire la même chose pour l’image précédente et la pause


  • 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...


  • Juste pour correction dans le css fourni en exemple sur ul#animated-portfolio:

           padding: 0;
           margin: 0;
           list-style-tyle: none;

    C’est list-style-type
    avec un ’p’ et non un ’l’...


    View online : Plugin Panoramas

  • 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

  • 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

    View online : [Plugin] Panoramas

  • 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.

  • 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

  • Hi,

    This script eats 80% cpu on firefox with Ubuntu. Is there any possibility for a fix? Great script!



  • good idea. i have introduced new values for the ’controlBox’ parameter :

    - ’none’ : no control box
    - ’show’ : control box is always visible
    - ’auto’ : control box appears on mouse over

    i have updated the zip file.


  • Excelent plugin!
    Only one thing: how can I set the controlBox to be always visible, not only on mouse over?
    Thank you!

  • 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 pour la transparence des png sous ie, le redimensionnement ne se fait plus.

  • ok merci ! c’est corrigé.

    (bien rafraîchir le navigateur pour avoir la dernière version).

  • 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


  • 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(; }
  • 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

    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é

  • 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 :

  • 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 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 : qui fait celà;
    Les 2 scripts réunis, ça ferait un systeme de diaporama, complet et fantastique


  • 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.

  • 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