Recently I’ve been giving this site a bit of a makeover in an effort to make the site look and feel as user friendly and professional as I can. As part of this I’ve added an interactive Carousel of images at the top of the blog page which is dynamically created from the wordpress content.
The Carousel I decided to use is the Cloud Carousel created by Professor Cloud. Found here: http://www.professorcloud.com/mainsite/carousel.htm
The carousel is easy to integrate into existing sites and it is completely cross-browser friendly, it even works in IE 🙂
Following integration I decided to take it one step further. In addition to adding the mouse wheel functionality which Professor Cloud has kindly advised I thought that touch screen functions would make it that little more modern.
With the tablet market growing every day a large majority of people, myself included, use touchscreen technology in the form of a mobile phone or tablet such as the iPad to browse the internet. With this in mind I thought it would be a good proof of concept to integrate the JQuery TouchWipe plug-in so that users could spin the carousel with a swipe on the touchscreen.
So here’s the implementation code and downloads for you if you wanted to use the technology.
In the header of the page which you want to place the carousel add the following:
In the body of the page as this code example code and modify as appropriate. You can add as many images as you would like to see in the carousel.
<!-- This is the container for the carousel. --> <div id = "carousel1" style="width:256px; height:128px; background:#000;overflow:scroll;"> <!-- All images with class of "cloudcarousel" will be turned into carousel items --> <!-- You can place links around these images --> <img class = "cloudcarousel" src="/img1.png" alt="Description" title="Title" /> <img class = "cloudcarousel" src="/img2.png" alt="Description" title="Title" /> <!-- Define left and right buttons. --> <input id="left-but" type="button" value="Left" /> <input id="right-but" type="button" value="Right" /> <!-- Define elements to accept the alt and title text from the images. --> <p id="title-text"></p> <p id="alt-text"></p>
I’m also in the process of making downloadable WordPress themes which integrate this technology in a similar way to this blog.