Free Code > Glossy Scripts > Glossy Slides

Glossy Slides is a JavaScript+CSS solution for creating a slideshow set of images/content as seen on the Cascading Slides screenshots page.

How to use

Place the JavaScript and CSS code somewhere on your site, and then reference them in the header of your documents as follows:

<link rel="stylesheet" type="text/css" href="glossyslides.css" />
<script type="text/javascript" src="glossyslides.js"></script>

Create your slides with HTML as follows:

<div id="glossySlide1" class="glossySlide">
    <a href="main.jpg" name="1"><img src="main528.jpg" alt="" border="0" /></a>
    <div class="caption">Main entry point for <i>Cascading Slides</i>. You can store multiple collections/albums
and even password protect some of them. <br>(Click image for full size version.)</div>
<div id="glossySlide2" class="glossySlide">
    <a href="shnoopy.jpg" name="2"><img src="shnoopy528.jpg" alt="" border="0" /></a>
    <div class="caption">I'm gaga for Lady. (Click image for full size poker face.)</div>
<!-- et cetera -->

To render the navigation links for the slides, make a call to the printNavLinks() function, passing it the number of slides on the page, like this:

<script type="text/javascript">
    glossySlides.printNavLinks( 12 );

Customizing the slideshow navigation

You can redefine any/all styles as defined in the CSS file (it is recommended that you override them with your own stylesheets rather than alter the default styles in the source).

You can also assign your own values to a few JavaScript variables:

Var (prefix with glossySlides.) Default Description
maxNavLinks 8 Restricts how many navigation paging links are shown at one time
disabledColor "#555555" Disabled navigation link color
highlightedColor "#00aa00" Current page navigation link color

If you find this code useful, please consider making a donation.

Copyright © Globalisk. All rights reserved.

VeriSign Verified