Web Site Design and Development
Located in the south of Auvergne, in France, an expert in free software provides you with modern communication tools on Internet.
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
-
-
help! image slider gone?! 20 November 2009 09:10, by Arnault Pachot
hello, this perhabs ?
> http://www.openstudio.fr/jquery/
-
-
-
-
-
-
-
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 pause a+
-
-
-
-
-
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 over i have updated the zip file.
@+
-
-
-
-
-
:: Site Map :: Mentions légales :: Contact :: SPIP :: OpenStudio - 10, rue Chènebouterie 43000 Le Puy en Velay - +33 (0) 4 82 53 02 01