live demo:
Lightbox2 with added video support and some minor changes



Image1 Image2 Image3 Image4 Image5
download

This is a live demo of my altered version of Lightbox2. The main feature is the added video support. I included Jeroen Wijerings media player in the lightbox. As before, the lightbox is very easy to set up. It only needs the video file source and two attributes to get things going.

If you have any questions, suggestions, commments, ...
write to towangfoo[at]yahoo[dot]de or use the comments function below.

To get this script up and running in a second, follow the setup steps below.

Additionally, I made some minor changes to the functionality of Lightbox2. Here is the complete list of changes:

  • added video support
  • added half-transparent navigation images to increase usability (not visible in IE 6)
  • split up function start() in two parts to get the whole animation at startup
  • added configuration variable to toggle closing of the gallery with click on overlay
  • added configuration variable for overlay fade duration
  • addition to Object.extend() to toggle visibility status of an element
  • merged for-loops for areas and anchors in updateLinkList(), use regexp instead of string comparison
  • fixed display bug on Opera9.10 - Background color of imageDataContainer disappeared when animation ended. Fixed by giving the element a static height.

There are some issues that are not properly solved yet:

  • smooth fade-in of video player is not working
  • video path has to be absolute, relative paths are not working
    (maybe though, this is a bug in the media player)
  • only tested in Win XP SP2 on Firefox2, IE6, IE7 and Opera9.10

This script is published under MIT License/GNU Public License. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so.

Download this demo and get in touch.

To get running, follow these steps (steps 1 + 2 partly taken from the Lightbox2 guide):

Step 1 - Setup

  1. Place the needed scripts in directories you feel well with. Take care, that the files swfobject.js and jwplay.swf are placed in the same directory as lightbox.js.
  2. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header. 
    <script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
  3. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). 
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  4. Check the CSS and make sure the referenced lbprevlabel.gif and lbnextlabel.gif files are in the right location. Also, make sure the loading.gif and lbcloselabel.gif files as referenced near the top of the lightbox.js file are in the right location.

Step 2 - Activate image galleries

  1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example: 
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    Optional: Use the title attribute if you want to show a caption.
  2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example: 
    <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
    No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

Step 3 - Activate videos

  1. Add a rel="lightboxvideo" attribute to any link tag to activate the lightbox. For example: 
    <a href="/video/test.flv" rel="lightboxvideo">video #1</a>
    Note: The path to the video in href="" has to be absolute! relative paths are not working for some reason.
  2. Add a longdesc="" attribute to the same link tag. It is used to pass the needed Flashvars to Jeroen Wijerings media player. To get started you need the parameters width:123; and height:456; [in pixels]. For example: 
    <a href="video/test.flv" rel="lightboxvideo"
       longdesc="width:400;height:300;" title="my caption">video #1</a>
    You can see the full list of Flashvars on this page.
    Optional: Use the title attribute if you want to show a caption.
    No limits to the number of videos per page.

Comments (1) post a comment
2008-03-25 00:15 [MET]
kilywrote:
hello !
I'm working on my CV page and to display video I use your lightbox altered version.
it works great! thank you!
I tested it on Opera8&9(XP), FF2(XP), IE6 and Safari, and it's OK.
the only bug is if I try to validate the page the "longdesc" attribute returns me an error.

bye!
Post a Comment

Sorry, comments are disabled at the moment. Try again later.