Highslide JS API Reference : hs.dimmingOpacity

hs.dimmingOpacity

A float between 0 and 1 defining the opacity of a dimmed page background

The dimmingOpacity property creates the popular Lightbox darkening/lightening background effect. Setting dimmingOpacity to 0 disables the effect, whereas float values up to 1 create an increasingly opaque background. Adjust the hs.dimmingDuration setting to control how the background fades in and out. The effect relies on the .highslide-dimming CSS rule to work. In this rule the background colour is set:

.highslide-dimming {
	background: black;
}

Details

Requires	transitions
Type	float
Default value	0
Overrideable inline	Yes

Example

Dimming the background

In this example we apply a black background with an opacity of 0.75.

Put this in the head section of your page

<script type="text/javascript">
   hs.dimmingOpacity = 0.75;
</script>
<style type="text/css">
.highslide-dimming {
	background: black;
}
</style>

The effect:

Highslide JS API Reference

Object: hs

Variables

Functions

Events

Object: hs.Expander