Questions

Answer

How to use Lightbox with a flash component

Follow these steps to add Lightbox (possibility to pop-up only images) functionality to Flash files:

Step 1. First, download Lightbox++

Step 2. Copy the css, images and js folders from the archive in the same folder with your HTML file on your web server. This HTML file should embed the SWF file to which you want to add the Lightbox to.

If your site is running on Wordpress or Joomla, you will need to copy these folders in a new folder, let's call it lightbox, in the root of your Joomla/Wordpress site.

Step 3. Edit the HTML file and add these lines in the <head> section:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/lightbox++.js" type="text/javascript"></script>

Make sure you use the correct path for the above files.

For Joomla or Wordpress sites, you need to update the code, to make it point to the root lightbox folder, where you copied the Lightbox folders in step 2:

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script src="lightbox/js/prototype.js" type="text/javascript"></script>
<script src="lightbox/js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="lightbox/js/lightbox++.js" type="text/javascript"></script>

If your site is running on Joomla, you will need to add the code right before the </head> tag of the index.php file located in your active template's folder (e.g. templates/rhuk_milkyway/index.php).

If your site is running on Wordpress you need to add the code in the <head> section of the header.php file located in your active theme's folder (e.g. wp-content/themes/twentyten/header.php)

Step 4 (option A). If you want to have a Lightbox Image Set (with Next and Previous buttons), right after the lines from Step 3 add these lines, otherwise go to Step 4 (option B)

<script type="text/javascript">
function GroupDelegate(id) {
 var objLink = document.getElementById(id);
 Lightbox.prototype.start(objLink);
}
</script>

In the body of your HTML file you’ll have to add invisible links to the images which will be displayed in the Lightbox, like this:

<a id="img1" title="First image" rel="lightbox[img]" href="images/01.jpg"></a>
<a id="img2" title="Second image" rel="lightbox[img]" href="images/02.jpg"></a>
…

Step 4 (option B). If you intend to have a single image display in Lightbox (as opposed to option A with Image set) you simply have to add these lines into the <head> section of the HTML file:

<script type="text/javascript">
function LightboxDelegate(url,caption) {
 var objLink = document.createElement('a');
 objLink.setAttribute('href',url);
 objLink.setAttribute('rel','lightbox');
 objLink.setAttribute('title',caption);
 Lightbox.prototype.start(objLink);
}
</script>

Step 5 (option A). If you’re using SWFObject to embed the SWF, make sure you’re having these two params (in addition to maybe other params):

params.wmode = "transparent";
params.allowscriptaccess = "samedomain";

Step 5 (option B). If you’re using <object> </object> tags to embed the SWF file, add these lines:

<param name="allowscriptaccess" value="samedomain">  
<param name="wmode" value="transparent">

And in the embed tag you must insert the attribute:

wmode="transparent"

Step 6. If the links to go to when clicking an image are specified through the XML file, the url attribute, or in some cases the link attribute, must be set like this:
1. For Step 4 (option A):

url="javascript:GroupDelegate('img1')"

2. For Step 4 (option B):

url="javascript:LightboxDelegate('images/01.jpg','First Image')"

Also, you’ll have to change the target attribute to _self like this:

target="_self"

Note that the Lightbox will not work if tested locally. You’ll have to test it on a HTTP server.

For a more detailed description visit the original blog post from codefidelity.com

Comments

Page:
<
1
...
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
...
62
>
loading comments...

Benjamin Landes

Posted 9 years ago

About to buy dock menu for my site but having one thing from preventing me, i have it setup for Lightbox Image Set (with Next and Previous buttons)but works as a single image lightbox. Any ideas?
link: www.scootersbikeshop.com/specials.html

battila

Posted 9 years ago

forgot to send the link:
http://www.bambuszmania.hu/minta/index_js.html

Hi,

Use the same method to embed the index_js.swf file as the dock menu. Through CSS you must specify the following:

#DockMenuDiv
position: absolute;
z-index: 1;

battila

Posted 9 years ago

Hi,
i’m getting confused with placing the commercial docmenufx on its proper place. I published the whole site from flash, then i’ve tried to embed the docmenu’s swf into this published html. So the docmenu and the lightbox works fine, but i don’t know how can i place this docmenu right onto the holder that you can see under the glittering main title. I think that the div is on the wrong place, so probably i should use <object> or… i don’t know. Pleeeeeease, heeeeelp!

Sjoerd

Posted 9 years ago

Hey there, Im interested in buying the without logo version. Is there also a wordpress tutorial on how to add lightbox? I am not able to get it working with this tutorial.. Can anybody help me??

Hi,

The commercial version doesn’t have the flashxml.net logo.
To add Lightbox to your wordpress plugin you have to follow the tutorial from above but you have to use the absolute path.

Megan

Posted 9 years ago

can the light box display flash files instead of images? i want to link image scroller movies to popup an swf files int the lightbox. is this possible? thanks.

Hi,

It will work but it will not display the swf properly. You can try using a free version of a component.