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

blade

Posted 9 years ago

my url is http://www.tiendaalondras.com/ saw the tutorials , so i put the code i dont know why the lightbox doesnt work, i did the step ,
i m using joomla 1.5, is there problem the lightbox with joomla?
the scroll is very complete and i will use in my joomla templates ,
i think that my problems are in the images.xml,
i took the option A because in your tutorials, you used thats option, i take this way

Thanks.
dominicanos0@hotmail.com
please check the page to say me that solution i can get with the lightbox,

FlashXML Support

Hi,

You have to add the code from step 3 in the index.php file of the template you’re using. Make sure you use the absolute path for those files.

Karl

Posted 9 years ago

Hi Team

I am trying to use the 3d-carousel-menu on my site, however I just cannot seem to get it to show on my web page. The page is http://www.o-dj.co.uk/Olympic-DJ-Wedding-Disco-Testimonials.html

I have the files located as follows on my server

Webpage with issue is http://www.o-dj.co.uk/Olympic-DJ-Wedding-Disco-Testimonials.html = http://www.o-dj.co.uk/ route site folder, with all other webpages (all functioning correctly)

The files from the zip have just been unzipped in to the folder named 3d-carousel-menu and are saved in http://www.o-dj.co.uk/3d-carousel-menu/ folder

I have put the body tag in of

</head><body id=“main_body”>

<script type=“text/javascript” src=“http://www.o-dj.co.uk/3d-carousel-menu/swfobject.js”></script>
<script type=“text/javascript”>
var flashvars = {};
flashvars.folderPath = “http://www.o-dj.co.uk/3d-carousel-menu/”;
var params = {};
params.scale = “noscale”;
params.salign = “tl”;
params.wmode = “transparent”;
var attributes = {};
swfobject.embedSWF(“http://www.o-dj.co.uk/3d-carousel-menu/carousel.swf”, “CarouselDiv”, “600”, “190”, “9.0.0”, false, flashvars, params, attributes);
</script>

and also put the div in as follows

div id=“CarouselDiv”></div><div class=“Image”></div><div id=“Servicetxt”>

Can you help to why this is not even showing on my website, because I am lost now

FlashXML Support

Hi,

I checked your website and I saw that the 3D Carousel Menu FX is working ok. Let us know if you’re still having issues with it.

JUAN SEBASTIAN

Posted 9 years ago

hellow
im using Image Scroller FX as a pluging in joomla
i have added the code in step 3 for lightbox, and finally works in firefox, safari, n chrome but no in internet explorer how can i do, my client needs to see it working.

by the way the lightbox works in IE if i used imagen scroller as wArped, BUT AS AN ARTICLE NO.

please i need your help.
then i buy it.

FlashXML Support

Hi,

Give us the link to your website and we will investigate this issue you’re having.

CY

Posted 9 years ago

it’s okay ~ although i was expecting to get some hope from here.
however, just now. i mean NOW! i found the solution myself after 24 hrs trying !!
i would love to share with everyone and hope it’ll help someone else who needs it :-)

  • after test after test, i found an article and simply Stopped using AC_RunActiveContent.js !!
  • article “Fancybox inline flash issue with Firefox” : http://stackoverflow.com/questions/1626239/fancybox-inline-flash-issue-with-firefox

good day to everyone.. finally i can take a rest now….

CY

Posted 9 years ago

hi ,
no i didn’t purchased any component here.
i use flash cs4 work on flash website. and try to call lightbox from flash
was looking for help to solve my problem then i saw your article here .
can you please help ?

FlashXML Support

Hi,

I’m sorry but we only offer support to our products.

Do you have a question?

you will get an answer in 24 hours, tops.

(required) Only alphanumeric characters allowed
(required) (will not be published)
Please type a message! Your message is too long! Either try to keep within 1500 characters, or contact our support team via email at support [at] flashxml.net.
(will not be published)
You mistyped the two words!
Can't read? Change the image
Format your comments using Textile: *bold*, _italic_, "link text":address, @code@
Connect to us on Facebook Follow us on Twitter Subscribe to our RSS feed
Copyright © FlashXML.net 2009 - 2019