[MINE] jQuery Lightbox - uCoz Community

Message # 1 | 10:43 PM 2009-06-25

Hello there,

Since this board opened I felt like posting this script I have made since 5-6 months and I had it for my own use..
Inspiration came from other scripts like "Lightbox" to open images but this one opens anything... It is specially configured to support UCOZ galleries and here's the trick :P.

What you should already know:
A bit of Javascript
The jQuery Javascript Library. If you don't know this then you can spend some time here learning about it http://docs.jquery.com

We will need some extra plugins to support it like jQuery Metadata & SwfObject if you want to use the plugin with "Swf Media".
So here's the HTML.

Code

This script gets the source of each element from the "href" attribute of each element.

It can open "Images", "Media(SWF, Quicktime, MP4, Youtube Videos)", "Web Pages".
The bad thing is that it will seem uncompleted in some stages and it's because I stopped dealing with it for a long time but anyway it works fine with all the things it's created for..

Script usage is like this:

Code

This will enable all the "A" elements inside all the "DIV" elements to use the plugin..
So when you click the "A" elements the plugin executes and automatically does the job for you.
In youtube videos "Width & Height" is set by default but in any other "Media" you use you will have to specify the width and height of the media like this..

Code

<a title="My Video Caption" rel="width : 400,height : 150" href="_swf/myswf.swf">Swf Video</a>

In swf media you can choose whether it will be "transparent" or not like this..

Code

<a title="MySWF" rel="wmode: 'transparent',width : 400,height : 150" href="_swf/myswf.swf">Swf Video</a>

If you don't want it to be transparent then just remove the "wmode: 'transparent'" input.

You can place you own settings this way.

Code

$("#myelement a").lolipop({
            wmode : "transparent",
            overlaySpeed :  1000,
            overlayOpacity : "0.4"
});

So this code changes the default values and sets the "wmode" to transparent, the speed that the overay will appear in "1 second" and the opacity of the overlay to "0.4";

Alternatively you place global settings this way.

Code

$.fn.lolipop.settings.overlaySpeed = 1500;

This will set the "overlaySpeed" to 1500 everytime the plugin executes unless it has it's own settings set like the way I showed you before.

Alternatively you can place special settings in each element in this way..

If you want an element not to use the plugin then use this code..

Code

<a href="myimage.png" title="My Image" rel="enabled: false">Open my image</a>

Or if you want the "overlaySpeed" to be different only in this element then use this code.

Code

<a href="myimage.png" title="My Image" rel="overlaySpeed: 3000">Open my image</a>

That's the short explaining and i'm sure that many of you will not understand but guys please first bare reading the jQuery documentation or ask questions here :D.

Now what is the special in this plugin is that it can be used on "Ucoz" Galleries or "Photo Albums".
All you gotta do is place this code.

Code

$.fn.lolipop.settings.ucoz = true;

And to apply the plugin to the images you gotta do this.

Code

$(".phtTdMain div table tr td a").lolipop();

And you're done!! Now when a user clicks on an image in the gallery the plugin will apply and the lightbox will appear!! :P

Also you will need to add the styles rules to your my.css file..(if you're an ucoz user) OR place the "css" file found in the "styles" folder of the plugin in your site or copy it's code to your my.css file for global use.

This is it guys!!..

NO LICENSE OR COPYRIGHTS..FREE FOR ALL..DO IT EVERYTHING YOU WANT :P

Download the plugin package file:
http://rapidshare.com/files/248660313/Lightbox.zip.html
http://www.mediafire.com/?my3dzmm4mt2

Post edited by l2viruz - Thursday, 2009-06-25, 11:32 PM