OpenStudio est éditeur du logiciel libre Thelia

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

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

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

Dans la section HEAD :

  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>

Dans la section BODY :

Comme avec le plugin Innerfade original, vous devez constituer dans votre page, la liste des images de votre diaporama :

  1. <ul id="animated-portfolio">                                   
  2. <li>
  3.         <a href="http://www.cc-plateau-chaisedieu.fr"><img src="/lab/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="http://www.casadart.fr"><img src="/images/casadart.jpg" alt="OpenStudio" title="Casa d'Art" width="400" height="335" /></a>
  7. </li>
  8. <li>
  9.         <a href="http://www.3bm.fr"><img src="/lab/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="http://www.aupanierdauvergne.fr"><img src="/lab/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>

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

  • openstudio
  • OpenStudio
  • OpenStudio

Dans la section HEAD :

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

Dans la section BODY :

  1. <ul id="animated-portfolio">
  2.    <li>
  3.         <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>
  4.    </li>
  5.    <li>
  6.         <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>
  7.    </li>
  8.    <li>
  9.         <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&ocirc;tel de r&eacute;gion" width="2099" height="375" /></a>
  10.     </li>      
  11. </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 :

.innerfade-title{
        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 :

ul#animated-portfolio{
        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ètresvaleurs
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

jquery.animated.innerfade.zip

Logiciel libre distribué sous licence GNU/GPL.

48 Messages

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

    Thanks.

  • 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

  • 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

  • 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

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

    Voir en ligne : 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) ?

    Voir en ligne : 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 ?

    http://www.6tnline.com/cour/minSite/diaporama.html

    Merci

  • 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

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

    Thanks

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

    Voir en ligne : 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.

    Voir en ligne : http://www.mijnruimte.com/index.htm

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

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

                            $(this).addClass(settings.runningclass);
                           
                            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[i]).hide();
                            };
                            $(elements[first]).css('top', 0);
                            $(elements[first]).css('left', 0);
                           
                            $.animatedinnerfade.move_photo(elements[first], settings);
                           
                            if ( settings.type == 'sequence' ) {
                                    mytimer = setTimeout(function(){
                                            $.animatedinnerfade.next(elements, settings, 1, first, mytimer, pauseActivated);
                                    }, settings.timeout);
                            }
                            else {
                                    var nextrandom;
                                    do { nextrandom = Math.floor ( Math.random ( ) * ( elements.length ) ); } while ( nextrandom == first )
                                    mytimer = setTimeout((function(){$.animatedinnerfade.next(elements, settings, nextrandom, first, mytimer, pauseActivated);}), settings.timeout);
                            }
                            $(elements[first]).show();
                    }
    ...
  • 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 !!!

    Voir en ligne : http://infowey.com

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

    - dans la section head, dans $(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
    });

    - 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

    a+

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

  • 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

  • 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

    Voir en ligne : [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
    Sim

  • Hi,

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

    Greets,

    Anthony

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

    merci

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

  • 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 : http://www.openstudio.fr/jQuery-Mul...

  • 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

  • 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

  • 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

modération a priori

Attention, votre message n'apparaîtra qu'après avoir été relu et approuvé.

Qui êtes-vous ?
Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.