Animated InnerFade with JQueryFull w3c compliant animated slideshow with sliding effect on large images
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
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;
}
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;
}
$('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); }
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