 |
 |
« GIF Animation Slideshow With Free Photo Editing Online Tools | Twitternama – Why Using Twitter, & Some Useful Twitter Tools »
| Tweet |
|
|
|
A lightbox – or is it videobox or mediabox or… – is a nice way of attracting visitor’s attraction upon clicking a link on a webpage.
It darkens or obscures the rest of the page while bringing the lightbox sharply into focus, usually in the middle of the browser.
Creative minds are at it for a long time, which has resulted into many variations of lightbox over time. Some excellent free-to-use examples are those by Lokesh Dhakar, Visual Lightbox, and others.
There is also a ‘CSS-only’ lightbox explained by Emanuele Feronato that needs minimal use of javascript.
In the demonstrative video below let me however dwell on Mediabox developed by John Einselen. Mediabox is available free, and as mentioned in its Google code introduction, it can display flash, video, audio, & html content in a modal dialog. It is based on the Slimbox concept and uses MooTools JS library.
The overlay screen becomes dark because it is made fully opaque. You can however make it completely transparent by simply altering certain parameters in the ‘mediaboxadv.js’ file. You can also make some other adjustments as explained here.
Installing Overlay Lightbox
John explains the details of Mediabox – now MediaboxAdvanced – which he rightly says can handle your images, videos, animations, social video sites, inline elements, and external pages with ease.
The installation is simple. You have to download the CSS file, the images, and the javascript files (one is MooTools Core) from John’s website on to your computer, and then unzip and upload them to your web server.
Before you upload, make suitable changes in the mediaboxadvanced JS file like the overlay opacity, initial width and height of the box, JW Player settings (if you’re using it for displaying your video like the one below), and so on. This step is important!!
The actual code is even simpler. In the video below you can see how you can easily trigger a text and an image link to open separate lightboxes – videoboxes in fact, because both show YouTube videos.
The html code is given at the end of this article.
Altering ‘mediaboxadv.js’ File
The script as such is longish, but let us look at part of it below where some parameters can be easily changed as required. For example, the ‘overlayOpacity’ decides how much opaque or transparent the overlay screen will be. In the above example, it is made 1, which makes it completely opaque.
Look at other parameters like resizeDuration (millisecond), initialWidth (pixel), initialHeight (pixel), showCaption, animateCaption, and so on. These are well explained alongside each of them, and therefore do change them to see how the thing works.
The global media options apply to all that you’re going to show in overlay screens from your webpage, and once again are not difficult to follow.
Let me draw your attention to the JW media player settings in case you decide to use JW Player to play FLV/MP4 flash videos in overlay screens. The parameter ‘playerpath’ is important, and perhaps it is a good practice to mention absolute URL here to where the flash player is located on your server.
// the following is a small portion picked up from the 'mediaboxadv.js' file >>
open: function(_images, startImage, _options) {
options = $extend({
loop: false, // Allows to navigate between first and last images
stopKey: true, // Prevents default keyboard action (such as up/down arrows), in lieu of the shortcuts
// Does not apply to iFrame content
// Does not affect mouse scrolling
overlayOpacity: 0.3, // 1 is opaque, 0 is completely transparent (change the color in the CSS file)
// Remember that Firefox 2 and Camino 1.6 on the Mac require a background .png set in the CSS
resizeDuration: 800, // Duration of each of the box resize animations (in milliseconds)
resizeTransition: false, // Default transition in mootools
initialWidth: 800, // Initial width of the box (in pixels)
initialHeight: 800, // Initial height of the box (in pixels)
showCaption: true, // Display the title and caption, true / false
animateCaption: true, // Animate the caption, true / false
showCounter: true, // If true, a counter will only be shown if there is more than 1 image to display
counterText: ' ({x} of {y})', // Translate or change as you wish
// Global media options
scriptaccess: 'true', // Allow script access to flash files
fullscreen: 'false', // Use fullscreen
fullscreenNum: '0', // 1 = true
autoplay: 'false', // Plays the video as soon as it's opened
autoplayNum: '1', // 1 = true
autoplayYes: 'yes', // yes = true
bgcolor: '#000000', // Background color, used for both flash and QT media
// JW Media Player settings and options
playerpath: 'http://www.yoursite.com/player.swf', // Path to the mediaplayer.swf or flvplayer.swf file
backcolor: '000000', // Base color for the controller, color name / hex value (0x000000)
frontcolor: '999999', // Text and button color for the controller, color name / hex value (0x000000)
lightcolor: '000000', // Rollover color for the controller, color name / hex value (0x000000)
screencolor: '000000', // Rollover color for the controller, color name / hex value (0x000000)
controlbar: 'over', // bottom, over, none (this setting is ignored when playing audio files
The HTML Code
The html code is as under with some minor modifications:
<html><head>
<title>TESTING OVERLAY LIGHTBOX</title>
<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/mediaboxadvblack.css" media="screen" />
<script type="text/javascript" src="http://www.yoursite.com/mootools-122.js"></script>
<script type="text/javascript" src="http://www.yoursite.com/mediaboxadv.js"></script>
</head>
<body>
<center>
<h1>Testing Overlay Lightbox</h1>
<br />
<!-- This is the text link -->
<a href="http://www.youtube.com/watch?v=sLlt0jeqP34&fmt=18" rel="lightbox[flash 420 350]"
title="Advent Of Online Video">online video</a>
<br /><br />
<!-- This is an image link -->
<a href="http://www.youtube.com/watch?v=TVKlMCd8l8o&fmt=18" rel="lightbox[flash 520 425]"
title="Contents Of Course"><img border=0
src="http://www.2webvideo.com/otherpage/images/best-video-software-2a.jpg" /></a>
</center>
</body>
</html>| Tweet |
|
|
|
This article of July 18th, 2009 is authored by Partha Bhattacharya, who runs this website. Partha also creates video-based e-learning course for clients, and when time permits, writes guest articles for selected sites.
Hi !! everybody !! .. nice content !! ..