Animated InnerFade with JQuery
Full w3c compliant animated slideshow with sliding effect on large images
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
In the BODY section
In the BODY section
in your CSS check that padding an margin are set to 0 :
ul#animated-portfolio{
padding: 0;
margin: 0;
list-style-type: none;
}
ul#animated-portfolio li{
padding: 0;
}
Example 2 : panoramic views
In the HEAD section :
In the BODY section :
In the CSS : (layout for title panel is defined in the CSS)
.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;
}
and check that padding an margin are set to 0 :
ul#animated-portfolio{
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',
...
});
| parameters | values |
|---|---|
| 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 win_png.htc patch, add this call on your css :
.bg-frame img{ behavior: url(win_png.htc); }
Download
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.
Monday 29 October 2007
Reply to this article
41 Forum messages
-
-
-
-
-
-
-
Animated InnerFade with JQuery 11 February 2008 10:30, by 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) :
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 pausea+
-
-
-
-
-
Animated InnerFade with JQuery 11 December 2007 16:05, by Arnault
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 overi have updated the zip file.
@+
-
-
-
-
-
:: Site Map :: Mentions légales :: Contact :: SPIP :: OpenStudio - 2 rue Pierret 43000 Le Puy en Velay - +33 (0) 4 82 53 02 01