Lightbox feature added to JaS – JavaScript Slides

Updated September 17th, 2006

After doing some extensive testing, due to some error reports that the overlay layer didn’t cover all parts of the web page if it had a scroll, I’ve now updated the script to take that into consideration as well. A positive effect of this is that, during a slideshow, it will automatically adapt the overlay size if the user resizes the web browser window or scrolls within it.

Also, one of the biggest upsides to this is that I’ve eliminated the need to add CSS specifically for Internet Explorer to handle overflow scenarios. The CSS code below has been updated accordingly.

So, I sincerely ask of you to download the example package (ZIP file link) to get this important fix, or if you already have your own custom CSS, to re-download the JaS JavaScript file and simply replace your current one.

Looking at nice features like Lightbox JS and what my friends at Particletree did with Lightbox Gone Wild!, I found it to be a given to add this functionality to JaS – JavaScript Slides. Now the image view, as well as the slideshow feature, supports it in different combinations.

There are a few settings in the JaS JavaScript file to make it work, and some new CSS additions in the example package (ZIP file link) to make it look good as well. So either download the complete example package again (recommended), or make sure to at least get the new JavaScript file and add the CSS described below.

A picture of the dimmed feature in JaS

New JavaScript settings

dimBackgroundOverlayId : "jas-dim-overlay"
The id of the element that is used as an overlay to create the dimmed background.
dimBackgroundId : "dim-background"
The id of the element for the link that will show the dimmed background.
noDimBackgroundId : "no-dim-background"
The id of the element for the link that will hide the dimmed background.
allowDimmedBackground : true
If the dimmed background feature should be available.
automaticallyDimBackgroundWhenSlideShow : true
If the dimmed background feature should automatically be activated when a slideshow starts.

CSS additions for the dimmed effect

Like the Particletree guys, I choose to control the transparency solely through CSS, as opposed to using a semi-transparent PNG image. These are the CSS additions:

    General look of the overlay element
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.8;
    display: none;

    To make the link that turns off the dimming
    be clickable when in dimmed mode
ul#dim-background-controls li#no-dim-background{
    position: relative;
    z-index: 2;

In the ie.css file, the following CSS is added to cover up for some IE shortcomings:

    To cover up for float/position: relative bug in IE
    position: relative;

The position: relative is applied to the body element to get rid of the unexpected position: fixed effect in IE when setting position: relative to an element within a floated element. For more info, read Emil’s IE6 resize bug (position: relative becomes fixed).


Happy JaS-ing now! :-)


PS. Thanks to Teddy and Chris at adocca for doing some testing for me. DS.

Posted in CSS,HTML5/HTML/XHTML,JavaScript,Technology |

Leave a Reply

Your email address will not be published. Required fields are marked *