|
Archive - read only |
uCoz Community » Archives » Archive » [MINE] jQuery Lightbox (A jQuery plugin for all uses.) |
[MINE] jQuery Lightbox |
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.. What you should already know: We will need some extra plugins to support it like jQuery Metadata & SwfObject if you want to use the plugin with "Swf Media". Code <script type="text/javascript" language="javascript" src="swfobject-min.js"></script> <script type="text/javascript" language="javascript" src="jquery.metadata.js"></script> <script type="text/javascript" language="javascript" src="jquery.lightbox.js"></script> 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". Script usage is like this: Code <script type="text/javascript"> $(document).ready(function() { $("div a").lolipop(); }); </script> This will enable all the "A" elements inside all the "DIV" elements to use the plugin..
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". 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: Post edited by l2viruz - Thursday, 2009-06-25, 11:32 PM
|
| |||
| |||