How do they do that?

gmak - April 30, 2009 - 09:39

Does anyone know how the frontpage of the CakePHP.org website does their side scrolling 'slide show' thing?

I'm guessing it's using a jquery plugin of some sort, but I can't seem to find anything about it.

I'd like to use a similar interface for our site, but need some pointers.

Anyone know the secret?

Thanks

I dont see any slide show

mm167 - April 30, 2009 - 10:05

I dont see any slide show ....

We go the drupal way. How about you?
http://www.drupalway.com

jQuery

Keyz - April 30, 2009 - 10:37

mm167, it's the top block with the right/left arrows on either side.

They're using jQuery, looks like custom written. I "think" the code that does it is in here if you want to study it (if you want to copy, I'd suggest asking permission first): http://cakephp.org/js/common.js

Drupal core comes with jQuery (the same library they are using on cakephp's site), so you can write your own scripts with it, or you can add one of the many jQuery plugins, OR you can install a premade Drupal module that uses jQuery if it does what you need already.

Here's a comparison of modules that are of that sort (of which there are really too many... hopefully in the future some will consolidate their features together): Comparison of Rotator / Slider modules

Though it will take some CSS and styling finesse to get it "like that"... possibly a module to look into that is most like what they are doing there is Views Carousel or Slider module.

Re: How do they do that?

progga - April 30, 2009 - 11:44

The "tabs" widget of jQueryUI can produce similar effect. Here is an example - http://docs.jquery.com/UI/Tabs. You'll have to add two buttons on your own though :-)

@Keyz : Thanks a lot for the "Comparison of Rotator / Slider modules" link. This one looks really interesting.

Tabs

Keyz - April 30, 2009 - 12:06

If you go that route, consider using http://drupal.org/project/tabs which integrates jQuery UI tabs so you can more easily use it in your own module or code.

Thanks for all your

gmak - April 30, 2009 - 21:20

Thanks for all your suggestions. It looks like it is done with the Coda jquery plugin. This suggests that the 'Slider' module from Drupal will be the best bet, as it implements the Coda tab/slider actions.

I'm going to try this and see how I get on.

Thanks again.

 
 

Drupal is a registered trademark of Dries Buytaert.