Never take life seriously. Nobody gets out alive anyway.

How To Create An Overlay Lightbox In Your Webpage

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.

Click link below to see an example of overlay lightbox (screen becomes fully dark)
>> Online Video

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:

TESTING OVERLAY LIGHTBOX

Testing Overlay Lightbox

online video

Embed Online MP3 Player In Your Website, Fast & Easy

If you want a hassle-free, free mp3 player to embed any online audio in your website, you can try StangeCube’s AudioPlay.

AudioPlay is based on flash technology, and all you need to run your favorite music or podcast in your blog is to embed some html codes therein. Of course you have to have the music to be embedded already available on the net.

Watch the video below on how to go about. You may also see it on YouTube.

Download AudioPlay

You may use AudioPlay in 2 ways. Download the free codes in a zip file from their website. The present version is 0.9.9 released as on 20.10.2010 (see following image).

Download the mp3 player, AudioPlay

After you’ve downloaded and unzipped the contents, you’ll find 4 files and a folder. The folder contains the images of buttons of different designs (see following image).

These AudioPlay files are to be uploaded for embedding mp3

Among the files, the audioplay.swf file is responsible for ‘driving’ the audio player. The config.xml file is where you can change the different parameters for altering the playing of audio. For example, you can delay the start of the audio while making it automatic; you can make the audio fade in and control its volume; you can let the mp3 audio repeat as many times or infinitely, and so on.

You can embed several mp3 players in a single webpage. In that case each player will be having a distinct identification, like ‘playerid=1’, ‘playerid=2’, and so on. The XML file will contain the path to the location of the mp3 file for each player. Take a look at the following piece of code.

<player playerid="2">
<musicfile>music.mp3</musicfile>
<repeatTimes>1</repeatTimes>
<autostart>no</autostart>
<buttondir>buttons/classic</buttondir>
<mode>playpause</mode>
<sendStop>yes</sendStop>
<listenstop>yes</listenstop>
<trackid>second</trackid>
<fadeindur>1000</fadeindur>
<mastervol>90</mastervol>
<autostartdelay>1000</autostartdelay>
<einterface>yes</einterface>
<initbuf>no</initbuf>
</player>

From the index file you’ll know the html embed code which is what you will need to embed the mp3 player in your website or blog. The html code is likely to be as under. Refer this article to know more on embedding SWF flash file.

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab
#version=10,0,0,0" width="30" height="30" id="player2">
<PARAM NAME=movie VALUE="audioplay.swf?playerid=2">
<PARAM NAME=quality VALUE=high>
<PARAM NAME=wmode VALUE="transparent">
<PARAM NAME="allowScriptAccess" value="always" />
http://audioplay.swf?playerid=2
</object>

Notice, in the above html code, the reference to the mp3 audio is via the playerid parameter. In this
case it is playerid=’2’.

Once you know the purpose of the different files, the next action will be to upload the files to your web server. In particular, you should upload the button images (of the style you choose), the config.xml, the audioplay.swf file, and the mp3 file of the audio you want to embed.

The html code to embed mp3 player is given above.

Auto-Generate Code To Embed MP3 Player

Many of you may not feel comfortable to play around with codes. For them, the solution is to use the excellent online code generator provided by StrangeCube AudioPlay (see the following image).

AudioPlay online code generator for embedding mp3 player

All you need to do is to mention the absolute URL of the MP3 file to be embedded, select some of the choices like repeat, button style, player mode, etc., and then press the Generate Code button. The html code for embedding the mp3 player comes in the small box on the right.

Copy it and paste it in your blog where you want the player button to come. And there you are! Your favorite mp3 is now ready to be played.

As way of demonstration I have embedded the following button which is the mp3 player to play the audio narration of this article when clicked. Try it out.

http://www.2webvideo.com/video-production/demo/embed-mp3-player/embedding-mp3-player-button.html

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s