Monthly Archives: January 2012

WordPress jQuery Carousel

I insisted that I would blog today, or ‘Blog Thursday’ as I now need to remember! It’s been far too long since I last posted!

I’ve just got back from PHP London at the Doggetts pub, where Jakub Zalas (http://twitter.com/@jakub_zalas) gave a talk on Symfony2; it certainly looks like a nice framework but I’m already heading down the Zend route as that’s what we use at work! I would recommend checking it out though, if you haven’t already.

When searching for ideas on what I should blog about; I figured I’d consult ye olde Twitter! Thankfully, a couple of people asked questions; and even better that the questions are on the same topic of WordPress; something I’ve used quite a lot in my personal time as well as work.

Question 1:

The first question comes from @asforasafarina (thank you darling sister :p), “I would like to know how to put a jquery carrousel on my wordpress blog please! :)”.

The reason Asfora has asked this, is because I was showing her the new website we have for work (http://www.webgains.com). As you can see, it has a nice pretty carousel and she was shocked when I told her the website uses WordPress; this resulted in her wanted me to explain how she can put such an item on her own site.

To get you started, it’s probably easier to point you in the direction of fredhq.com; where you can download the ’roundabout’ jQuery plugin:

http://fredhq.com/projects/roundabout/

The download link is here:

https://github.com/fredhq/roundabout/zipball/master

So, how do you put it into your WordPress blog? All you need to do is open up your theme editor, edit the HTML of where you want the carousel to go and put this HTML:

<!– assuming you places the jquery.roundaabout.js in the root of your website. –>
<script type=”text/javascript” src=”/jquery.roundabout.js”></script>
<ul id=”carousel”>
<li><span>Block 1</span></li>
<li><span>Block 2</span></li>
<li><span>Block 3</span></li>
<li><span>Block 4</span></li>
<li><span>Block 5</span></li>
</ul>
In all honesty, that’s it! Simple as! You will of course want some styling and the below should help you out:
<style>
ul {
list-style: none;
padding: 0;
margin: 0 auto;
width: 42em;
height: 24em;
}
li {
height: 20em;
width: 30em;
background-color: #ccc;
text-align: center;
cursor: pointer;
}
li.roundabout-in-focus {
cursor: default;
}
span {
display: block;
padding-top: 6em;
}
</style>
To see it in action you can visit:
http://fredhq.com/projects/roundabout/demos/standard

Obviously, you will need to put in a lot more work to style it to suit your site; but once you have the carousel in you are in a great position to customise it.

Anyway – that will have to be all as it’s quite late already and I can’t be bothered to type any more!
Share