jQuery Video Gallery - Keep It Simple Stupid


Adding to Your Website

To add this you'll need jQuery and jQuery.videoGallery.js, then add the following to the head of your document: <script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jQuery.linkControl.js"></script>

<script type="text/javascript">

$('li').videoGallery({w:640, h:480, holderDiv:'#another-div'});


The two areas in bold are the DOM elements you want to add the code to. Then include the name and path to the file as rel='path/to/filename' without the .swf. If you would like to use titles add title='Your Title'.

The code should look something like this:
<li rel='swfs/1' title='The First Video'></li>
<li rel='swfs/2' title='The Second Video'></li>
<li rel='swfs/3' title='The Third Video'></li>

Then you will need to set up a div with an id of 'video-holder'. Set the 'rel' and 'title' of that div to whatever you want the starting video to be.

You may optionally set up a div or header with a 'video-title' id to hold the title of the video.


After you have the initial plugin working there are a few different options to help in customizing this. They go inside the open/close brackets.

w:NUMERIC VALUE (sets the width of the swf file, default is 320)

h:NUMERIC VALUE (sets the height of the swf file, default is 240)

holderDiv:'#ID-NAME' (specifies where the movie will be shown, default is '#video-holder')

src:'ATTRIBUTE' (specifies where in the DOM element the plugin will get the source from, default is 'rel')

showTitle:true (either true or false this specifies whether to display a title, default is true)

title:'ATTRIBUTE' (specifies where in the DOM element the plugin will get the title from, default is 'title')

titleLoc:'#ID-NAME' (specifies where the title will be shown, default is '#video-title')

Other Plugins

jQuery Page Peel: A jQuery plugin for the page peel ad effect used on quite a few sites now.

jQuery Link Control: A jQuery plugin designed to give the end user control over whether they want to open a link in a new window or not without having to right click and such.