Comments on: The ImageSlider MooTools class

By: Justin

Justin — Wed, 29 Apr 2009 14:36:23 +0000

Can you it be made to cycle through on a timeframe?

Say every 30 seconds it changes on it’s own.

Great looking script.

Regards,

Justin

By: Gorkreg

Gorkreg — Thu, 23 Apr 2009 13:21:08 +0000

Thanks for that.

By: Travis

Travis — Tue, 21 Apr 2009 22:16:03 +0000

Only thing i can think of is that you’re not setting the width and height attributes of your img tags so the script cant calculate how far it needs to slide. This works locally because everything’s immediately loaded, but not on your server because the images haven’t fully loaded when the dom loads and the script initiates.

BTW i have version 2 of this class done with a lot of improvements and changes, i just haven’t had time to make a new blog post about it. It works with vertical scrolling and also allows you to scroll with the mouse wheel.

By: Gorkreg

Gorkreg — Tue, 21 Apr 2009 15:57:09 +0000

Hi Travis!

Thanks for the answer. After playing a bit I discovered that it wasn’t the relative positioning of the child elements but the relative positioning of the Container mask what I needed. Now it works well in all the browsers.

Of course, nothing can´t be so easy and a very strange thing happened when I uploaded the files to the server. In Safari and Firefox when you press the right button, the slidercontent doesn’t stop on the next image but passes it and continues until everyrhing is white (???!!!). The same files working in my localhost work well. That is something that never happened to me.

I tried to change the parameters “numOfElementsToSlide” and “numOfElementsShown” in the Javascript code but it didn’t work. Do you have any ideas on why this could be happening?

By: Travis

Travis — Mon, 20 Apr 2009 21:02:12 +0000

@Gorkreg …odd.
With just a quick glance at the CSS in firebug it might be the relative positioning of the child elements.

Try that and let me know if it fixes it.

on the child elements set
position: relative;

By: Gorkreg

Gorkreg — Mon, 20 Apr 2009 20:10:11 +0000

Hi!
I was looking for something like that and finally found it. Thanks. One problem: it doesn’t work in IE6. Not in my page nor in your example but it does work in your webpage’s portfolio. How did you do it?

By: Rajnikant

Rajnikant — Sat, 10 Jan 2009 07:49:50 +0000

Chaaka Jevu che

By: Travis

Travis — Wed, 22 Oct 2008 16:56:08 +0000

@Kemar

Here’s a brief explanation of what’s going on.

Using naming conventions I’m able to link the thumbnails to their respective detail section. For instance the thumbnail div with id #corprasoftLink is linked to the details div with id #corprasoftDetails.

All of the sections are already on the page and just hidden on page load. Whenever a user clicks the thumbnail a function is fired that, using the naming conventions mentioned earlier, finds the corresponding details section, clones it, injects it back into the page as a child of a masking div, but offset to the right. Then i animate the whole thing to the left.

I’m also setting a location hash so that you can hotlink directly to a particular portfolio section ( http://travisjbeck.com/portfolio.html#wildcat ) for example.

By: Kemar

Kemar — Wed, 22 Oct 2008 14:58:26 +0000

Hey,

I love it. Can you explain further if you don’t mind how you create the technique to have the respective info of the clicked thumbnail or element of the ImageSlider to show up?

Thanks Bro!

By: Michael

Michael — Mon, 06 Oct 2008 15:59:37 +0000

Excellent post – great script.