Sometimes, We Write Stuff...

This is a pretty cool effect. I've done something like it, but for v1.1 of mootools. Check it out at 8trk.com

@Raff

If it were written as a class, it would be a lot easier[cleaner] to $clear the timer.

You would have methods that look like

buttonAction: function(){} //where all of the events for the buttons would be defined

startTimer: function(){}, endTimer: funciton(){},

In your buttonActions method, you can do a mouseover[mouseenter is better] for the buttons that would call the endTimer method, and have a mouseout[mouseleave] event that would start the timer again.

Writing it as a class would make it infinitely more flexible than what you currently have.

Hello, first of all I'm sorry for my bad english. Second, I have a question. How about if replace li's content in num_nav with thumbnails, and make really cool looking gallery? I was trying to do something like that, but with no good result :(. It'll be interesting for me to know is it possible, or it is not a good idea. Thanks in advance.

Hi Daniel! Your script is great and one of the best ones I could find specially for Mootools 1.2 The script is working fine but I have 1 problem : I don't want the number tabs in my slider so I remove the

<ul id="num&#95;nav">      
</ul>

from the html but after that the slider stops working :(

Is there a way to make this work like it does right now with the num-nav removed ?

Thanks

Hello, Daniel. Thank You for your answer. And I'll wait for that list. It will be very interesting for me. Have a nice day and smile

Thanks for your kind reply Daniel You're doing a great job helping pathetic people like me with your great scripts lol

Forget about my previous wish... Its not that important

The most tempting thing I see when I visit your site is the fading rollover/hover on the links on the sidebar/download,view demo buttons... I'm trying to learn how to do this for a long time and even more when I saw dragoninteractive.com. Now I know how to do it with images and I was also able to do it with mootools 1.11 using this method : http://demos111.mootools.net/Fx.Styles Now I want to do the same with 1.2 using this method : http://demos.mootools.net/Mouseenter But the problem is that I can't get it to work with more than 1 element as its using IDs for the effect to work... Now as you may have guessed by now that I'm a noob in js/mootools so I can't do it on my own lol I just want to know how we can change it to work with multiple lists like we can do with the 1.11 version.

Sorry for going OT and also for asking to such a busy person like you but I know you are a GREAT guy and will help me when you have nothing else to do and getting bored for hours... after watching every show on the TV, listening all the songs on the iPod if you ever get time please guide me hehe...

Thanks

Hey come on why do you need to be sorry? Lol I mean really you are already cool enough to share you're hard work with us so yea man no sorry worry here

On the other side, really sorry to hear that you are not well... I mean I know how much I hate to be ill when I'm working on designing projects lol!

Get well soon mate and please take your time

I figure out, I think so. Just add one line of code:

//since the viewer obviously has javascript on, we can remove the 'first_item' class
if(index == 0){
element.removeClass('first_item');
element.setStyle('left', "0");
}
else{
element.setStyle('left', "0");
	element.setStyle('top', "185");
element.setStyle('opacity', "0");
}

and

//this is so that it gives the illusion of continuous motion from one direction, even after the first cycle of items
item_in.start({
'left': [0, 0],
	'top': [185, 0],
'opacity':[0,1]
});

//no beginning values needed, since we always want to push the old item out to the left
item_out.start({
'left': '0',
	'top': '-185',
'opacity':[0]
});

End...

corect me if I'm wrong, please. Thx again for suggestion Daniel.

hey there.

first, thanks for that script.. i was using another slider but needed that automatic highlighted numbering thing. perfect.

but i've got one question.

is it possible to remove the autoplay and/or the whole play/pause thing without rewriting the js?

another suggestion would be to style the inner slide in a way that going from slide 1 to slide 5 would actually show the 3 slides in between.

now it's more a content jumper then a slider

anyway.. great script.

hehe,

yeah. guess i'll give it a try but it will take some time.. be back with questions.

Is there any way to change the transition type? Basically I want to make the transition a fade-in/fade-out thing.

Anyone know how I can accomplish this?

Hey jeremy, the fade-out fade-in effect would be accomplished by simply removing the left attribute from the start function and replace it with opacity[0,1 in the item_in.start function and opacity [0 in item_out.start.

Fantastic script!! Just one question. What is (if exist) the setting to have slider PAUSED by default when page is loaded? At the moment the script is on PLAY by default

Hello,

I am trying to use this script but it looks like some text overwiritng it for the first few items.

http://www.crsdepo.com/newsite/index_cycle2.html

Bottom right in right column for the testimonials section.

Any ideas?

Also is there anyway to change the slide to a vertical one? Like going up?

thanks!

hi, Great script! But also want to use only the fade in/out function. No slide. The solution below unfortunatly didn't work for me. Any clues?

Blockquote Aug 24, 2008 07:11 Hey jeremy, the fade-out fade-in effect would be accomplished by simply removing the left attribute from the start function and replace it with opacity[0,1 in the item_in.start function and opacity [0 in item_out.start. Blockquote

I think i posted this in the previous tutorial about this... is it possible, if this slideshow will be used as an image slideshow, to include a preloading image effect to the slideshow?