What's new? | Help | Directory | Sign in
Google
missingmethod-projects
Repository for MissingMethod projects
  
  
  
  
    
Search
for
Updated May 18, 2007 by bruno.bornsztein
Labels: Featured
Glider  

Glider.js

This script makes it easy to create a sliding carousel component like the one seen at www.curbly.com. Inspired by www.panic.com/coda.

Download

The latest files are available for checkout via SVN here.

You can also download a zipped version here.

Example

View an example of this component in action.


Comment by insign, Jul 16, 2007

Good script, make it update always!

Comment by janaalt, Jul 26, 2007

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?

Comment by janaalt, Jul 26, 2007

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?

Comment by iHunte, Jul 31, 2007

Great Script! Thanks a lot!

Comment by anthony.abraira, Aug 28, 2007

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

Comment by anthony.abraira, Aug 28, 2007

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

Comment by ndoherty13, Sep 16, 2007

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

Comment by mcposeidon, Sep 22, 2007

Nice one,tnx!

Comment by m...@ondesignstudios.com, Oct 11, 2007

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

Comment by ja...@greenvoice.com, Oct 16, 2007

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

Jason

Comment by cgutierrezv, Oct 17, 2007

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

Saludos.

Comment by phparray, Nov 01, 2007

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?

Comment by jared5burns, Nov 01, 2007

See it in action...

http://www.fetchapp.com/tour

Comment by bokinga, Nov 03, 2007

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

Comment by fatfingur, Nov 12, 2007

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

Comment by arie.mail, Nov 17, 2007

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

Comment by rain.kes, Nov 20, 2007

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?

Comment by thad.mac, Nov 27, 2007

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

Comment by SamRicheson, Jan 19, 2008

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

Comment by andreadimambro, Jan 22, 2008

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

Comment by jcalv...@eastbaynewspapers.com, Jan 24, 2008

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?

Comment by vporciuncula, Jan 30, 2008

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.

Comment by gaker1, Jan 31, 2008

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.

Comment by gaker1, Jan 31, 2008

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

Comment by n1tn4t, Feb 05, 2008

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

Comment by n1tn4t, Feb 05, 2008

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!

Comment by kcarunida, Feb 14, 2008

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

Comment by foamcow, Feb 26, 2008

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>

Comment by tho...@gamingeye.com, Mar 27, 2008

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!

Comment by h...@inneractive.nl, Apr 01, 2008

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!!

Comment by madd...@yahoo.com, Apr 07, 2008

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

Comment by ejosephat, Apr 08, 2008

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

Comment by renderblender, Apr 13, 2008

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/

Comment by niels.doering, May 06, 2008

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.

Comment by m...@datasteps.com, May 07 (5 days ago)

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

Comment by kigster, May 09 (3 days ago)

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.

Comment by fred...@lounge24.se, Today (15 hours ago)

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 :)


Sign in to add a comment