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

How does the auto glide work where do I insert the code "{autoGlide: true, frequency: 4}"

"Next" and "Prev" only work with prototype 1.5.1.

I need to use prototype "1.6.0.2" and it doesn't work anymore !! Who has an idea ???

Thanx

Answer to : How does the auto glide work where do I insert the code "{autoGlide: true, frequency: 4}"

var feed = new Glider('feed', {autoGlide: true, frequency: 5});

goTo: function(index) {

this.moveTo(this.sectionsindex?, this.scroller, {duration: this.options.duration});

Thanx francescu.santoni ;)

But i tried and it doesn't work :(

Can you be more precise please ? "Replace ... with ..." for example

THANX

I'm also having difficulty getting the auto function to work. Can someone please post exact details on what needs to be changed, or how the variable needs to be fed? Many thanks!

False alarm. I figured it out. This needs to be placed in the script on the page that triggers the script, i.e.:

<script type="text/javascript" charset="utf-8">

var my_glider = new Glider('my-glider', {autoGlide: true, frequency: 5});

</script>

If you're having issues remember 2 things:

1) You have to initialise the glider onload like the comment above! 2) To make the glider start on a particular section you need to use the following:

initialSection: 'section1' // give id of section you want to start with

...in your onload call

Hello everybody !

Glider.js is a very good script ! It works fine on i.e but there is a graphical bug on firefox when using iframe on the sliding pages. Has anyone have already notices this problem ? This is a link to see the graphical bug (only on firefox, it works fine on i.e): http://www.negmotion.com/TEST/ How to correct this problem ?

  goTo: function(index) {
    this.moveTo(this.sections[index], this.scroller, {duration: this.options.duration}); 
    },

To implement

<a href="#" onclick="my_glider.goTo('1'); return false;">1</a>

When using auto glide, add the duration to the same script. Otherwise the auto glide & glide will be slow, at least in Safari.

Example (fast one);

<script type="text/javascript"  charset="utf-8">
var my_glider = new Glider('my-glider', {autoGlide: true, frequency: 5, duration: 0.5});
</script>

Is it possible to pause the auto glide during mouse over?

Is this possible;

1) To pause the auto glide during content mouse over?

2) To pause the auto glide after prev or next click? It only pause when clicking a link to a section, not when using for example;

<a href="#" onClick="my_glider.previous();return false;">Previous</a>

I am using Glide 0.0.3 and I'd like to know how to get the control links to apply the active class when a section is active as it changes via autoGlide. Any suggestions to a solution is appreciated.

I also have Glider 0.0.4 with the same issue ... please send an example if possible.

for choose the initial section:

<script type="text/javascript" charset="utf-8">

var my_glider = new Glider('my-glider', {duration:0.5, initialSection:'section1'});

</script>

In glider properties, is it possible to change the animation direction to up and down?

how would you use the "continuous" glide option ???

if (this.options.continuous && !this.element.ext ) {

this.element.cleanWhitespace(); this.element.ext=true; this.element.appendChild(this.element.firstChild);

}

I guess this adds the 1st element to the end of the container, but it seems I can't get it to work :/

How one would use this "continuous" option?

regards

A patched version available here: http://www.infectious.com/javascripts/glider.js

Added the following: - ability to specify observers to update item/page counts - key press observers for LEFT and RIGHT moving the slider (should be updated if vertical is desired)

Example usage with page range updater (5 items per page, 5 initially shown, 31 total):

	var designGlider = new Glider('scrollableDesignContainer', {
			duration:0.9, 
			autoGlide:false, 
			changeObservers: [ new PageRangeUpdater($('page-range'), 5, 5, 31) ],
			frequency:1,
			initialSection: 'section1'});

	// add click handlers to design thunbnails
	Event.observe(window, 'load', function(event) {
		designGlider.addKeyPressObserver();
		designSelector.addClickHandlers();
	});

See Infectious.com for usage.

Would you please give me some advices about pausing the slide on one panel during mouseover? I'm not a javascript expert but I like so much your script and after 4 hour of work i didn't take anything out of this... bye!

hi

i don't know if this has been mentioned, but changing the onClick(as is in the download code) to onclick will allow your code to validate. maybe important to standards freaks if no-one else...

this script rocks, thank you :)

I noticed a few people having some trouble stopping the autoGlide.

<div id="my-glider" onmouseover="my_glider.stop();return false;">

</div>

how can i make the carousel continuous so when at the end, and you click next, it slides forward to loop the carousel instead of jumping back to the first section. it would be a lot smoother this way.

I want to place a small static picture (not supposed to scroll) on top of the glider. I've tried with a new div under div id="my-glider" but I can't get it to work.

Please anyone, give me a css example. Thanks! :)

this is great, but how do you get two to work on the same page?

A couple of examples that I made. This slider is just what I needed!!Thank you for building this!

You can download them if you like. http://designerfied.com/customized-sliding-carousel-for-prototype.html

Hey there. Thanks for sharing this code, it has helped me a lot in the designing of my new Wordpress theme. The glider allows me to squeeze a considerable amount of information into a small space, and I think that's the part in which it shines :) you can see it in action over at my blog: http://www.teddy-o-ted.com.

Thanks again for this wonderful code!

The glider script that I installed on my site http://www.omnibusdesign.ru/package/ It's great, but it seems that it doesn't work in Opera. I wonder is this is a bug or a feature? :) In other words, does Glider Script work in Opera or not? Could anyone in the know comment on this?

A great script! I have meet a problem: with autoGlide turned on, when I manually click on the controller links, the slider will double the rotating action in order to get to the right slide. This only happens in IE7 and works perfectly in FF. Can anyone here give a hand? Thanks in advance.

Hey! I love this script but I just ran into an issue with IE8. I have several slides that navigate through perfectly on IE7 and FF but when in IE8 it only goes through about half the slides before returning to the start. Has anyone else experienced this issue?

Has anyone figured out how to add a pause function?

@jrotondo38, the following works for me: <a href="#" onclick="my_glider.stop();return false;">Pause</a>

Thanks Sarahmstr, but that's more of a stop function than a pause. I guess I'll have to create a button that swaps a div to stop it, and a div to start it again.

Has anyone tried to add Scriptaculous transitions to this script rather than using the built-in glider transition between divs?

I don't know if this is useful or not, but I wrote a tutorial on implementing the script on my blog after a reader requested for it ;) Compacting contents using Glider script

i have a error

Error: element.dispatchEvent is not a function File: prototype.js Line: 3972

if (document.createEvent) {

element.dispatchEvent(event);

} else {

element.fireEvent(event.eventType, event);

}

Can anybody help me?

Are you using the latest version of Prototype and effects.js file?

The script dosn't work on the example page

major issue wirh RTL , cant use this script when change dir to rtl , any ideas??? it stops responding.. shalom_israel (a@t) (hotmail) thanks.

it only works on FF and doesnt work on ir or chrome even

can somebody help me with this: http://www.extranews.net/news.php?nid=4720, in IE the 300x250 banner doesn't show correctly after sliding, if any body knows the problem send me a mail to albert_690@hotmail.com. Thanks!

Has anyone made any progress on continuous looping of the items? Here is the test case I am working with: http://pastie.org/447526

I'd like the action to be that at the end of the sequence it continues to the first item instead of scrolling back to the beginning. Several people have requested this feature already, I know

thanks

Has anyone had any luck getting two sliders to work on the same page?

nevermind! I got it sorted.

I am not sure what I have done wrong, but my Glider has issues. Its not scrolling from image to image smoothly. And when you click I click on the link to go to the next page, the page jumps down as if it is moving to an anchor within the page. Here is the link: http://www.askewmedia.net/portfolio

Please help. Thanks!

@kickflip59: Don't know if this is all that's wrong, but try changing the order in which your js files are called. Prototype must be called before Scriptaculous, and Scriptaculous must be called before Effects. Then call the glider. You may also have conflict with the JQuery library; I'm not sure Proto-Scripty and Jquery are compatible on the same page. Good luck!

I am trying to add to my magento store http://www.thepromohut.com could this work with that script? Thanks

Hi guys,

I was pretty sure I had this sorted untill I saw it in IE 6 & 7. All the images appear to the side of the app and the navigation refuses to work. http://www.pssmr.co.uk/smrdigital

I know that it should work in IE 6, so does anyone have any idea what I've done?

Okay, well my problem was that I made each section position relative which allowed me to absolutly position text to each slide. IE 6 & 7 hated this and I'm finding it very difficult to find a work around.

Any ideas why sections cannot be position relative?

after ie8 update anchors work wrong - some work some not - is there any solution ?

I've noticed there is Opacity rendering in effect.js , can we use this to create a fading slideshow?

thanks for sharing. http://taphop.net

Great script. I've used it (and obviously abused a bit :)) on my page but I've got problem with IE8 (IE7 works fine, not yet sure with IE6): pressing 'next' / 'prev' doesn't slide to proper sections and makes everything confusing. Try for yourself: http://polilang.co.uk/one2one

Forgot to add: it obviously works great with other browsers. Anybody knows why it is not working on IE8? Appreciated!

Ok, sorry for spamming - last bit, I promise: it is working fine on IE8 on localhost, but not on http://polilang.co.uk domain. So confusing!

Ok, I've found a problem's source, probably related to IE8 October's security patch (KB974455 - I found this information here: http://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/0ff6bf47-a028-4f96-a3a0-fc373d5acb19). Basically I've debugged the script on IE8 and FF 3.5 and found that 'scrollerContent' (which is the same as 'content' in Glider's demo - the one with large width and zero height) on IE8 returns negative offset! So Prototype Position.cumulativeOffset returns incorrect value, messing the slider.

I've put temporary workaround on my form (http://polilang.co.uk/one2one), checking if 'scrollerContent' offset is negative and reverting it in Position.cumulativeOffset calculation (you can check this in source code).

Hopefully you find this information useful and maybe MS will fix this soon...

I am trying to get this to run on Premium Buys (in beta now, so it is not active on the site). I am getting a javascript error in the nightly build of webkit though.

Hi, if you see the panic/coda sample, it scrolls all way back instead of looping. So, lets suppose I got 5 articles into my Featured Articles (glider), but when it hits the 5th articles, it slides back/scrolls all way back the 5 articles. I wonder how I could hack the code to make it loop instead of goes back. I mean, I want that after showing the article #5, it shows next that should be the #1 again (loop) and not scrolls showing all way back 5,4,3,2,1 to show the #1 again. Was I clear? (I'm sorry my language barrier). :0)

Thanks in advance.

Does anyone know how to stop or slow down sliding from last to first slide? It is really annoying. Thanks, I'd really appreciate this!

Look in featuredcontentglider.init({ for autorotateconfig: [9000, 3] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]

I have problems with IE6 and IE7... sliding wont go all the way, instead it goes like 1/8 of the page... can someone help me ?

It works fine in Opera, FF, Safari and IE8...

strangely enough, "next" and "previous" work properly...

Anybody get this to work in IE8 or FF3.5? Everything just gets lined up on the left margin for me and not functionality.

it does not work with IE 8 at all ... what is the reason please .. i'm using latest versions of prototype, effects, and glider (0.0.4) ... what the hell is the reason behind that ???? @ n1tn4t : your solution didn't work ! @polilang.co.uk : can you detail how did you handle the negative offset in code ?

@muradjam: Actually one of recent Microsoft fixes made negative offset workaround irrelevant. It should work OK now if you follow all the steps :)

As the side note: I'm switching to another slider solution now - I'm using CrossFade? made by http://millstream.com.au I've found it much better because it doesn't create massive 'sliding div' with all the slides on it which can cause flickering of your page e.g. when you use semi-transparent PNGs. You can download it here: http://www.millstream.com.au/view/code/crossfade I've got tweaked version of it on my site (e.g. support for 'active' item, smooth horizontal scrolling transitions). Get it from here: http://polilang.co.uk/js/crossfade.js You can see it working on http://polilang.co.uk/home (both sliders!) or http://polilang.co.uk/test. I've written sort-of-tutorial here: http://polilang-dev.blogspot.com

Hope you'll find it useful :)

Solution to "Active" state on Prev and Next clicks:

in glider.js - under "next: function(){" add this just before the "},"

if (this.controlscurrentIndex? == null){

this.controls0?.removeClassName("active");

this.controlscurrentIndex?.removeClassName("active");

Under "previous:" just change nextIndex? to prevIndex?

Hello, Does anyone know how to affect the vertical and horizontal position of each slide? I've tried tinkering with it but cannot seem to remove the slight vertical scroll that happens with each slide? Basically I just want the thing to slide left and right. Sorry for such a basic question.

Hell can anyone help? My first slide always load slightly lower than repositions itself correctly after clicking on the link to go to the next slide. How do I fix it so my first slide is position correctly. I tried messing with the CSS but nothing seem to be working. Great script BTW.

he following works for me: <a href="#" onclick="my_glider.stop();return false;">Pause</a>

But how restart it?

yes, how can it restart from a stop state? no on page load or initialization, but to restart it as wavebass says.

hi, can anybody pls help me out with this. I have the situation where I need to control two different gliders with links outside of those gliders. Can someone show me how to achieve this? thanx in advance.

sorry for my english..

example page it doesn't work on IE8!

Has anybody been able to figure out how to change the "continuous" action so that the 1st section appears directly after the last section (instead of sliding backwards to the 1st section?)

I've seen a couple people ask about it above, but I don't see any responses.

Thank you.

Here's my pause functionality:

Event.observe(window, 'load', function() {
    var timer = 5;		
    var glider = new Glider('glider', {
                     autoGlide: true,
                     frequency: timer,
                     duration: 0.5 
                 });
			
    // pause	 
    $('glider').observe('mouseover', function(e) {
        glider.stop();
    });
    function startGlider() {
        glider.start();
    }
    $('glider').observe('mouseout', function(e) {
        if (typeof(timeout) != "undefined") {
            clearTimeout(timeout);				
        }
        timeout = setTimeout(startGlider, timer*1000);
    });
});

For people trying to load glider by ajax. It bugs and I spent a night to find a solution. The solution is to take care of loading_time, i fill my dom_id with glider content, i wait a delay of one second and then i init a new glider. Thus it works. Done. tracy loisel

Example page doesn't work in FF 3.6.3

hi this is absolutely what i want...i am a newbie... can somebody help me with the auto resize of the glider frame according to the image size....i.e if the image is small the frame should go small and vise versa....thanks a lot....plzz help me out of this...

@cinnamonas

where exactly would you place that code?

brds85 - it works fine when you download it and fix the stylesheet/javaScript link from the HTML page. This is an old design and it appears some of the linking is missing from the demo page.

Can someone please post the code to get two sliders working on the same page?

seems to be broken in ie9 beta.

Anyone know of a fix?

adding onclick="return false;" to the links fixes it in ie9 beta

Although this should work in FF... it doesn't! What's up with that?!

Thanks for the great script. However I cant get to make it work with the Nivo Sliver - http://nivo.dev7studios.com/ - on the same page using jquery.min.js framework. Any ideas how I can fix this issue ? Thanks a lot!

I'm having problems using more then 13 slides. Any else having this problem?

Could not get it working when loading via Ajax (prototype's Ajax.Updater('gliderDIV','glider.php'). The Slideshow itself starts fine, but 'next' and 'previous' are not working anymore. Directly loaded it works fine, so no error in the template! Would like to have it ajaxed, to load data from DB just when Glider is included. Any suggestions?

Where would one insert this code to get the pause functionality to work?

Event.observe(window, 'load', function() {

var timer = 5; var glider = new Glider('glider', {

autoGlide: true, frequency: timer, duration: 0.5

});

// pause $('glider').observe('mouseover', function(e) {

glider.stop();

}); function startGlider() {

glider.start();

} $('glider').observe('mouseout', function(e) {

if (typeof(timeout) != "undefined") {

clearTimeout(timeout);

} timeout = setTimeout(startGlider, timer*1000);

});

¿How can i add onblur event to this script?

Hi. I tryed version4.0.0 at IE9. but,it can't work. 3.0.0 is correctly working.

Hi! I've gotten the slider to work as expected, however, for some reason it's scrolling vertically instead of horizontally as it initially was. Is there something i need to tweak in the javascript that will allow me to do this? This just started happening when i started working on it this week - it was working fine a few weeks ago. :/ Any help would be WONDERFUL! Thank you!!

Hey, The glider works great, http://www.socialmain.com/SocialMain/platform.php mucho thanks. One issue though. As I am using a full page slide, when the bottom next and prev links are hit I would like the slide to happen when it hits the anchor? any thoughts? t.solyan@socialdealer.com

so sorry, http://www.socialdealer.com/SocialMain/platform.php

the documentation?

the documentation?

Hello,

Dos anyone knows how to make loop affect in glider? Thanks

everything else works fine for me but the sections don't slide. they just click to the next one as targets. help!