I've modified the code considerably since this morning, pretty smooth now in
FF... Just one problem now, the fade effect doesn't work in MSIE (bloody
typical).
Anyone got any hints? I think this'll make a nice reusable component for
anyone to use, and I'll be posting it for public consumption when it's
trouble free.
Code Follows:
/**
* Class Effect.SlideShow
*
* Version: 0.8
* Author: Tim Lockwood <[EMAIL PROTECTED]>
*
* If you find this script useful, please go ahead and use it, pass it
around,
* tweak it, and generally have a great time with it.
*
* All I ask is that you leave these headers intact.
*
* Usage:
*
* Include scriptaculous & prototype as normal, then this file. Create your
static image on
* the page with position:absolute and height, width, etc set.
*
* On the calling page, just create a new Effect.Slideshow on document load
and pass an array
* of image URLs to it.
*
* new Effect.SlideShow($('myimageid'), ['image1.jpg', 'image2.jpg',
'image3.jpg']);
*
*/
// TODO : Fade effect only works in Firefox at the moment, not sure why IE
doesn't like it.
Effect.SlideShow = Class.create();
Object.extend(Object.extend(Effect.SlideShow.prototype,
Effect.Base.prototype), {
// Constructor
initialize: function(element) {
this.element = $(element);
this.options = Object.extend({
slidetime: 6,
duration: 3,
height: '200px',
width: '200px',
top: '0px',
left: '0px',
images: new Array()
}, arguments[1] || {});
this.frontimage = document.createElement('div');
this.frontimage.setAttribute('id', 'frontimage');
this.backimage = document.createElement('div');
this.backimage.setAttribute('id', 'backimage');
Element.setStyle(this.backimage,
{
height:Element.getStyle(this.element, 'height'),
width:Element.getStyle(this.element, 'width'),
top:Element.getStyle(this.element, 'top'),
left:Element.getStyle(this.element, 'left'),
position:'absolute',
display:'inline-block'
});
Element.setStyle(this.frontimage,
{
height:Element.getStyle(this.element, 'height'),
width:Element.getStyle(this.element, 'width'),
top:Element.getStyle(this.element, 'top'),
left:Element.getStyle(this.element, 'left'),
position:'absolute',
display:'inline-block'
});
this.element.parentNode.appendChild(this.backimage);
this.element.parentNode.appendChild(this.frontimage);
this.currentbuffer = 0;
this.imagecursor = 0;
this.pe = new PeriodicalExecuter(this.shownext.bind(this),
this.options.slidetime);
this.shownext();
},
// Show Next Image
shownext: function() {
var ef = new Effect.Appear(this.frontimage, {
duration:this.options.duration,
afterFinish: this.onappearfinish.bind(this)
});
},
// Appear effect onfinish callback
onappearfinish: function() {
this.imagecursor++;
if(this.imagecursor == this.options.images.length) {
this.imagecursor = 0;
}
// Copy the frontbuffer to the back buffer
Element.setStyle(this.backimage, {
background: Element.getStyle(this.frontimage,
'background-image')
});
// Hide the front buffer.
Element.setStyle(this.frontimage, {
opacity:0
});
// Load the new image into the front buffer ready for the
next clock tick.
Element.setStyle(this.frontimage, {
background:"url('" +
this.options.images[this.imagecursor] + "') no-repeat"});
}
});
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
