How to add Dimming to HTML-box with full javascript?

[siostrom]

Hi,

I have a HTML-box that contains two small images. When the box open, I don't want the background to dim but I want it to close the box when I click somewhere outside it. I have this idea that you can decrease the opacity on the dimming so it wonÔÇÖt be visible. Can anyone help me with the code for this?

I'm new to highslide and website making in general so it would be appreciated if you could be specific in the answer.
/Marcus

[RoadRash]

Hi Marcus,

Add dimminOpacity to your Highslide settings/highslide.config.js file:

Code: Select all

hs.dimmingOpacity = 0.5;

Set the background for .highslide-dimming in the highslide.css file to none.

Code: Select all

.highslide-dimming {
	/*position: absolute;*/
	background: none;
}

[siostrom]

It didn't work. I couldn't notice any difference either.

[RoadRash]

You are using highslide-full.js as you indicate in the subject line?

[siostrom]

Yes

[RoadRash]

Can we please see your live page?

[siostrom]

http://fotosidan.mine.nu/highslide/index.html

I've changed the color temporarelly to black. I hav also removed the X button and the frames around it. If you want you can still close it with [esc]

[RoadRash]

The javascript file you are using has this config in the header (java1.js):

Config: default +inline +ajax +iframe +flash

This is the config for highslide-with-html.js ÔÇô not highslide-full.js. You need to use highslide-full.js for the dimming to work.

[siostrom]

I'm using the same file for a gallery with dimming and that one is working

[siostrom]

I'm sorry, you was right. Thank you VERY much for the help.

[RoadRash]

You're welcome.