Home & blog  /  Scripts  /  view post  /

Uber-customsiable video carousel

Overview

This carousel and featured-content rotator excels in two areas: firstly, it serves both video and graphic content, and secondly, it is super-customisable in terms of where the three components of the carousel - namely the slides, the tabs and the 'more info' area - are positioned within it. An XML file controls all behavioral and visual aspects of the carousel, though default settings can be overridden at the point of instantiation.

Example & demo tools

Carousel demo

Demo tools (override default settings)

Instantiation code

Here you can see one permutation of the carousel, but open the video carousel demo tools to see how it can be configured in different ways.

^^ top of page

Usage & params

The carousel is instantiated by calling new VideoCarousel(params);, where params is an object of propery name/value pairs including:

configPath (string) - the path to the XML config file containing the settings and slides data that this carousel should read

container (string or node reference) - a jQuery selector string or node reference of the element that should house your carousel

settingsOverrides (object) - an object of property name/value pairings that allows you to override default settings in the XML file, for example if you want the carousel to look or behave differently on a particular page

Here's the instantiation code for the above demo:

1$(function() {

2     new VideoCarousel({

3         configPath: '../inc/script_demos/vid_carousel/config.xml',

4         container: '#vidCarousel1'

5     });

6});

Note the document ready handler - necessary as, otherwise, we couldn't be sure that our #vidCarousel1 element had loaded yet.

^^ top of page

XML file - configuring the carousel

The XML file controls all behavioral and visual aspects of your carousel (unless you override any of these settings with the settingsOverrides object - see above). Its structure is as follows:

1

2    

3        

4             bottom

5             thumbs

6        

7         right

8        

9             352

10             222

11            

12                 slide left

13                 400

14            

15             2000

16        

17    

18    

19        

20             some_image.jpg

21             some_image.jpg

22             some_vid.mp4

23             some title

24             some HTML content here</p>]]>info>

25             http://some-url-here.comurl>

26        

27        

28    

29

The config file is split into two areas:

Settings

This is where you tell your carousel how to look and behave. The role of the nodes should be largely obvious. A few notes, though:

--- Valid values for settings > tabs > whre are 'top', 'bottom', 'left' or 'right'

--- Valid values for settings > info_area are 'right', 'left' or 'none'

--- Valid values for settings > slides > transition > type are 'slide left', 'slide right', 'slide up' or 'slide down'

--- If you don't want the carousel to auto-rotate, remove the auto_rotate node.

Slides

Include as many slides nodes as you want slides.

Important: whether a slide is graphic or video depends on the presence of a vid_src node.

If it is not present, the slide will simply show the image in slide_src. If it is present, the image in slide_src will form the video's starting image, until the play button is pressed.

^^ top of page

Notes

Settings overrides

You can override any setting in the XML config file by passing the XPath of the node as the name of a property in the settingsOverrides object. For example, if on a particular page you want the tabs at the top of the carousel, you'd instantiate like so:

1$(function() {

2     new VideoCarousel({

3         configPath: 'path/to/config.xml',

4         container: '#someElement',

5         settingsOverrides: {

6             'tabs where': 'top'

7         },

8     });

9});

JWPlayer

The carousel uses the free version of the renowned JWPlayer (www.longtailvideo.com/players). The free version includes a faint watermark on your video, in the bottom left corner, which fades once the video starts playing. To remove this, buy the full version of the player.

The JWPlayer is a very versatile player, with a full JavaScript API. Feel free to play around with the carousel script to change the video behavior if you want, e.g. to disallow full-screen mode or control auto-play.

Compatibility

The carousel has been tested and found to work in all recent FF, Opera, Chrome and Safari, and IE 6+.

^^ top of page
post new comment

Comments (5)

Cannings, at 21/01/'11 20:48, said: 
Yo, should of spent even less time with the Russian fam, and more time refining your latest script! lol.

Playing a video, without stopping it, then clicking on another slide, gets rid of the video out of sight, but it doesn't stop the video so you can still hear the sound going. I can imagine if you have more than one vid, you would end up with conflicting audio tracks. Not sure how you can tap in to the JW player, it at all, to be able to call a stop function??
Mitya, at 21/01/'11 21:41, said: 
Now fixed. Actually I fixed this a few days ago at work but forgot to update the version on my site :)
George, at 17/05/'12 11:41, said: 
Excellent job!
I would like to make 2 questions.
1. Is it possible to apply the url on the image?
2. On mouseover on the thumbnail, the autoplay stops. Is it possible to start again on mouseout?
Thanks a lot in advance
Mitya, at 22/05/'12 19:12, said: 
Hi George

The difficulty here is the slide may contain Flash, if it's a video Flash, so I didn't add click events to the slide itself.

You could add these, but you'd also have to add click events to the JWPlayer, for video slides.

As to your second point, I'll look into this.
robster, at 28/05/'12 06:16, said: 
stupid question

lets say i would like it to pick up video thats loaded automaticly

how would i get the xml file to see it

thank you

rob