[jQuery] news scroller example with innerfade and easing plugin
I thought I would share a news scroller like module I developed using
innerfade and easing plugins here.
this is how made some changes in innerfade plugin
$.innerfade.next = function (elements, settings, current, last) {
if ( settings.animationtype == 'slide' ) {
$(elements[last]).slideUp(settings.speed, $
(elements[current]).slideDown(settings.speed));
} else if ( settings.animationtype == 'fade' ) {
$(elements[last]).css("z-index","-2").fadeOut(settings.speed/3);
$(elements[current]).css({top: 94}).css("z-index","-1").animate({top:
0},{duration:settings.speed,easing: 'expoout'});
} else {
alert('animationtype must either be \'slide\' or \'fade\'');
};
......
rest of the plugin is same.
this is the html
<div id="newsscrollerjp">
<div class="newsitemjp_outer">
<div class="newsitemjp">
<div class="insidejp">
<img src="http://www.joomlaprodigy.com/images/stories/
prettypicturejp_logo.png" class="img" alt="" alt="" width="200"
height="180" align="left"/>
<a class="newsitemjp_heading" href="http://www.joomlaprodigy.com/
content/view/207/46/">PrettyPictureJP Module Released</a><br/>
<span class="small">Sat, 05 May 2007</span><br/>
PrettyPictureJP module is released today. Please read the module
s...<br/><br/>
<a class="readon" href="http://www.joomlaprodigy.com/content/view/
207/46/">Read More...</a><a href="http://www.joomlaprodigy.com/content/
blogsection/1/46/">Read All...</a>
</div>
</div>
<div class="newsitemjp">
<div class="insidejp">
<a class="newsitemjp_heading" href="http://www.joomlaprodigy.com/
content/view/206/46/">New Ajax rating system on JP</a><br/>
<span class="small">Fri, 04 May 2007</span><br/>
I am using a new mambot AjratingJP on JoomlaProdigy.com (which
stan...<br/><br/>
<a class="readon" href="http://www.joomlaprodigy.com/content/view/
206/46/">Read More...</a><a href="http://www.joomlaprodigy.com/content/
blogsection/1/46/">Read All...</a>
</div>
</div>
</div><div class="newsitemjp_outer">
<div class="newsitemjp">
<div class="insidejp">
<a class="newsitemjp_heading" href="http://www.joomlaprodigy.com/
content/view/205/46/">New Ajax rating system on JP</a><br/>
<span class="small">Fri, 04 May 2007</span><br/>
I am using a new mambot AjratingJP on JoomlaProdigy.com. This
mambo...<br/><br/>
<a class="readon" href="http://www.joomlaprodigy.com/content/view/
205/46/">Read More...</a><a href="http://www.joomlaprodigy.com/content/
blogsection/1/46/">Read All...</a>
</div>
</div>
<div class="newsitemjp">
<div class="insidejp">
<img src="http://www.joomlaprodigy.com/images/stories/large_icons/
alert.png" class="img" alt="" alt="" width="200" height="180"
align="left"/>
<a class="newsitemjp_heading" href="http://www.joomlaprodigy.com/
content/view/200/46/">New Version of Feedgator 0.7C42</a><br/>
<span class="small">Tue, 24 Apr 2007</span><br/>
For those of you who are disappointed with the feedgator earlier...<br/