jc

Javascript Carousel modified for Touchscreen swipe actions

May 4, 2013
Comments off

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.

 

carousel

The Carousel I decided to use is the Cloud Carousel created by Professor Cloud. Found here: http://www.professorcloud.com/mainsite/carousel.htm

“There are some attractive Adobe Flash based solutions for this type of UI component, and while JavaScript versions exist (see this and this), the commercial Flash products tend to have better aesthetics and polish. To redress the balance in JavaScript’s favour, I have created this jQuery carousel plugin.”

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:

<script type="text/JavaScript" src="<location>/cloud-carousel.1.0.5.js" />
<script type="text/JavaScript" src="<location>/jquery.mousewheel.js"/>
//Add link to latest version of JQuery

<script>
$(document).ready(function(){

// This initialises carousels on the container elements specified, in this 
case, carousel1.

$("#carousel1").CloudCarousel(
{
xPos: 128,
yPos: 32,
bringToFront:true,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text"),
mouseWheel:true,

yRadius: 20,
reflOpacity: 0.8,
FPS: 30
});
});
</script>

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>

Now all you need is the JavaScript files. Get them here:

cloud-carousel.1.0.5.js

jquery.mousewheel.js

I’m also in the process of making downloadable WordPress themes which integrate this technology in a similar way to this blog.

Comments are closed.