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
>
loading comments...

Kirill

Posted 2 years ago

Hello.

I’m tryin to add light box to photo dragger plugin on my wordpress blog… But it doesnt work!

When im clickin on the picture in Photo dragger, lightbox is going on, but without a picture.

here ist my customization:

header.php of my template:

here ist my images.xml file:

</photos>

where is my mistake??

pls help me

Hi,

First edit images.xml and make sure that the files has the same format as our xml file. For e.g the code line below is not set correctly. It has attribute that should not be there.

<photo image="images/u10.jpg" url="http://sl1m.bplaced.net/wp-content/flashxml/photo-dragger-fx/images/u10.jpg"rel="lightbox" target="_blank"><![CDATA[<head></head><body></body>]]></photo>

The lightbox is not loading because the path to the files is not set correctly.

Daryl Johnson

Posted 2 years ago

I successfully have DockMenu running with a single image Lightbox popup:
'link'

Now I’d like to have the Lightbox image Set working – but can’t get the larger image to show: 'link'

Thanks.

Hi,

Edit your index.html like in the example below.
e.g:



<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml:lang=“en”>
 <head>
 <title></title>
 <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
 <script type=“text/javascript” src=“swfobject.js”></script>
 <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>

  <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);
 }
 
 var flashvars = {}; 
 var params = {};
 params.scale = “noscale”;
 params.salign = “tl”;
 params.wmode = “transparent”;
 params.allowscriptaccess = “samedomain”;
 var attributes = {};
 swfobject.embedSWF(“DockMenuFX.swf”, “DockMenuDiv”, “200”, “600”, “9.0.0”, false, flashvars, params, attributes);
 </script>

<link rel=“stylesheet” href=“css/lightbox.css” type=“text/css” media=“screen” />

</script>

  </head>
 <body>
 <div id=“DockMenuDiv”>
                        <a href=“http://www.adobe.com/go/getflashplayer”>
 <img src=“http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif” alt=“Get Adobe Flash player” />
 </a>
 </div>
 </body>

</html>

Now edit your images.xml and follow the example below.

<dockmenu>
 <photo image="images/01.jpg" url="javascript:LightboxDelegate('images/01.jpg','1')" target="_self"><![CDATA[Hello]]></photo>
 <photo image="images/02.jpg" url="javascript:LightboxDelegate('images/02.jpg','2')" target="_self"><![CDATA[Download the new<br>Dock Menu]]></photo>
</dockmenu>

amandine

Posted 2 years ago

Is applying the ligtbox with joomla possible ?( sorry for the english i’m french)

Hi,

Yes, it should work. Please follow the steps carefully.

Diego Espinoza

Posted 2 years ago

Hi, i just bought Fullscreen Cover Flow that brings lightbox option with it but I cant make it work. At first y tried with te scripts that the index bringed but nothing happens. Then i use the scripts of this tutorial and i cant make it work. pleaaassseee help me.

First scripts i used:

DIDNT WORK

Secon Script Used:

<title>Untitled Document</title>
<script src=“Scripts/swfobject_modified.js” type=“text/javascript”></script>
<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>
<script type=“text/javascript”>
function GroupDelegate(id) {
var objLink = document.getElementById(id);
Lightbox.prototype.start(objLink);
}
</script>

Used also :

and in the images xml used:

Nothing Worked!!

Hi,

Please make sure that the lightbox folder that has all the necessary js script files are present in root folder of the Cover Flow FX.

Sandro Reis

Posted 2 years ago

I just whant to say: Thank You!!

Wonderful post! solve my problem!!!

Tks
Sandro

loading 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
>

See all comments

Do you have a question?

you will get an answer in 24 hours, tops.

Questions

Answer

How to use Lightbox with a flash component

Comments

Do you have a question?

Galleries

Slideshows

Image Viewers

Image Menus

Widgets

Text Menus

Audio & Video

News Readers

Utils & Tools

Templates