|
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 usePlace 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> <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> </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 ); </script> Customizing the slideshow navigationYou 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:
If you find this code useful, please consider making a donation.
Copyright © Globalisk. All rights reserved. |
|
||||||||||||
|
