Help! Why is this lightbox effect not working?

Hi,

I’ve inserted tabbed content into a lightbox – which is working fine except the background no longer fades. Individually the lightbox works fine, but once the two are combined, the background darkening vanishes.

Can anyone figure out what’s conflicting or stopping it working?

The site’s here:

http://www.computersinpersonnelhr.com/temp/eod-portal-mockup/mixed-step-2.html#first

Any help is much appreciated!

Thanks,

Dan

I can´t see any function applied to attach buttons, so, nothing is fired once clicked them.

Also you have many elements using same IDS , that´s wrong or course.

I can´t see any function applied to attach buttons, so, nothing is fired once clicked them. Also you have many elements using same IDS , that´s wrong or course.

Thanks,

This is purely a mockup, so the buttons etc aren’t set to perform any function yet.

It’s more in the launching of the lightbox (which occurs as soon as you visit the page).

Cheers,

Dan

So you have the button “Launch Expense Entry” linked to lightbox as:

rel="#apple" 

Not sure why you’re using the # there but that should link to the lightbox you’re using.

I think you’re trying to use this one:

http://www.huddletogether.com/projects/lightbox2/

You need to double check that you’re calling the following in your header:

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>

And then change the button link to this:

rel="lightbox" 

The original website has fairly clear instructions. Let me know if that works out for you.

Hi,

Thanks – it’s not the huddletogether lightbox; most available lightboxes didn’t work with tabbed content.

I’m using this one: http://flowplayer.org/tools/overlay/index.html for the lightbox and tabbed content. The lightbox comes up fine, it’s just the darkened background which is missing.

Cheers,

Dan

The lightbox isn’t coming up at all for me, actually. It just looks like it’s falling back on a standard CSS display.

Where are you calling the Javascript? Maybe I’m just missing it in your source code. The flowplayer demo shows instructions:

http://flowplayer.org/tools/demos/overlay/multiple.html

// open all overlays
function openAll() {
    $("button[rel]").each(function() {
        $(this).overlay().load();
    });
}

// close all overlays
function closeAll() {
    $("button[rel]").each(function() {
        $(this).overlay().close();
    });
}

I can´t see any function applied to attach buttons, so, nothing is fired once clicked them.

Btw, is there any way to see what functions/events are attached to a selector without having to dig the js code?

Thanks guys, you sent me in the right direction – I was missing:

mask: {color: ’#000’, loadSpeed: 200, opacity: 0.7}

Working like a treat now!

Dan