Glider.js

Good script, make it update always!

Can you use an image map for the navigation links? I tried and it doesn't work as is. I assume changes to the js are required to do this?

Can you use an image map for the navigation links? I tried and it doesn't work as is. I assume changes to the js are required to do this?

Great Script! Thanks a lot!

Is it possible to access one of the div's directly. Thus if a user goes to another page you can go back with something like this:

http://domain.com/gliderpage.html#section1

Is it possible to access one of the div's directly. Thus if a user goes to another page you can go back with something like this:

http://domain.com/gliderpage.html#section1

Nice job.

I recently created a Coda-style slider using jQuery. If anyone is interested, it’s at http://www.ndoherty.com/demos/coda-slider

Nice one,tnx!

Great script, needs a pause feature for the auto glide and it would work perfect for a lot of peoples needs I think.

Hi, Glider.js seems to be broken at the moment? The example page is not working?

Jason

Realmente bueno, felicitacione y gracias por compartirlo. El autoGlide me funcionó a la perfección.

Saludos.

This works almost perfectly with something I'm currently working on. I have one problem. I want to use it in conjunction with lightbox. Both apps us the prototype framework and they conflict. Here is my modified example page: http://www.xclusivesites.com/SmoothGallery/glider/example.html I can get the glide action or the lightbox action to work but not both. Any suggestion?

See it in action...

http://www.fetchapp.com/tour

best solution I've ever seen. Nice&Clean, working without javascript enabled, w3c standard… All you need. In one word: "Great!"

How do you put an active state class on the buttons?

I'd like to know the same thing as fatfingur, how to set an active class on the active section.

is it possible to put moving 2 windows with one button? if I have buttons, div-1 and div-2. When I press one button then both div-1 and div-2 scroll... is it somehow possible?

Is there a way to change the orientation of the control to vertical instead of horizontal?

i stumbleed upon this. http://design-police.org/ Very cool effect. Not to sure how to use the content. Any ideas?

I have used it centered in the page... http://www.carrozzeriafecchi.com

I love this script! I've been playing with it and make some modifications and it's working great. I have question/problem how do script the active link like http://www.fetchapp.com/tour ? I have 5 sections that cycle through, the slider section has 5 "indictor" circles like iTunes, when you mouseover they get turn grey. I want to have the circles be black when the corresponding section is show (ie. section 3 visible, 3rd circle black). How can I do this?

The Coda Slider is, I guess what we're all looking for, but the way it scrolls isn't as smooth as the glider. This glider.js is perfect, but we need instructions on how we can configure it to look like that of Coda's. Hope the solution can be posted soon. Something like www.dynamicdrive.com/dynamicindex17/featuredcontentglider_dev.htm would be sweet. the only problem with this script is that it scrolls vertically.

I like how the "Design Police" just stole straight from the panic/coda website, and stripped out the copyright & "not for redistribution" comments from the JS.

Bruno,

I don't really know much at all about javascript, let alone Prototype/Scriptaculous. With this, I don't have to worry about it. All of my head banging was dealing with css, but now I have it! Thank you so much!

Also, thanks to jared5burns for posting the example using mouseover/active images, as picking your code apart was a big help!

-greg

glider.js version 0.0.4 doesn't work with ie. there seems to be a bug in slide animation.

i've found the mistake. when replacing

moveTo = this.wrapper.down('#'+element.href.split("#")[1])
    this.moveTo(moveTo, this.scroller, { duration:this.options.duration });     
    Event.stop(event);

with the code from v.0.0.3:

this.moveTo(element.href.split("#")[1], this.scroller, { duration:this.options.duration });     
    Event.stop(event);

the bug is fixed and the animation works in ie, too!

This fix still doesn't seem to be working for me in ie6. Anyone else having issues with this?

Can you tell me how to create a link control link outsider the glider div?

I'm trying to do so using the moveTo method, but I can't seem to work out what parameters to pass to the method.

I'm creating a link like so:

<a href="#dm" onclick="portfolio_display.moveTo('dm','portfolio_display',0.5);return false;">Direct Mail</a>

thad.mac, Sure, you can do it by these actions: Remove the "float: left" line from the CSS-part Reduce the width of div.scroller div.content (in case you have a div width a fixed width in the content, just add one if you don't)

kcarunida, 0.0.4 works in both IE6 and IE7, have you updated the scriptaculous libraries?

foamcow It's a bit tricky but here's the code you need: <a href="javascript:void(0);" onclick="portfolio_display.moveTo('dm', $('my-glider').down('div.scroller'), {duration: 0.5});">Direct Mail</a> You might have to change "my-glider" to what you have replaced the div id with in your page.

And... A thank you to the developers of this plugin, it's great!

Could anyone help me to make this work? See glider example, http://www.inneractive.nl/example.zip. I just need the tabs to be selected when current section is shown, if possible also switch tabs when you use the “next” / “previous”. I’m not really a js master so the work i did, didn’t work :(

Thanx a lot!!

Hi, Is there a way to make this glider go by pixel width instead of section id? In other words, can I make it go 500px to the left or right at a time? Sorry if this is a trivial question. I'm a JS noob :)

- V

great plugin. works perfectly.

i like the fact that when you refresh, it goes back to the same section. but for what i'm developing, i need to turn it off and on fresh, return to the 1st section. this is a problem w/ FF. Works OK on IE n O.

is this doable. help please

This is a great plugin if you're using the Prototype framework.

For all you Mootools lovers (me being one of them) there's a Mootools version here: http://zendold.lojcomm.com.br/icarousel/

Great Script!

I only have one Problem: I use 3 gliders, but only one is visible at a time. To change between them, there is a tab navigation which uses .show() and .hide() (prototype functions). In Safari, each glider gets back to the first "page", when you use .hide() and make him visible again. Other browsers keep the last page. Is there any chance to solve this problem for Safari?

Example: Click on Tab2 makes Glider2 visible. Navigating to his second page. Back to Glider1 (Glider2.hide(); Glider1.show()) and then again Glider2 (Glider2.show(); Glider1.hide()). Now Glider2 shows his first page, but only with Safari. All other browsers still show page 2.

Very cool class this is for sure. I would like to know if anyone has tried to make this dynamic? I Would like to be able to add more content to the Glider through ajax? I believe all I need is an add method to this class

Just posted an issue with a patched version of glider.js to support multiple on-glide observers.. Very easy to hook up multiple updates to the HTML when someone slides to the next section.

I've found a way to use the "lightbox effect" together with Glider.js. Check out http://www.dolem.com/lytebox/ Works out of the box :)