This slideshow was inspired by the simplicity of some of the Wordpress slideshow plugins. This one is called deSlideShow standing for 'dead easy'.
It uses the jQuery library and the extended lightbox and drag event javascript libraries.
I struggled to find a slideshow that combined all the features I wanted yet was still simple to install, so I wrote this one.
I wanted something that users could easily update themselves from my content management system - deCMS.
Click 'Features' above to read more.
The user just has to add images to the page and the code does the rest. Completely non technical and no HTML or javascript knowledge required.
Add images via TinyMCE (or other online editor) - it uses the image title and alt for the caption and the caption area can hold a paragraph for each picture.
Automatically generated thumbnails (80 x 80) are displayed on the right and are highlighted as each picture is featured in the slideshow.
Plus it provides a slider for speed control of the slideshow so the user can vary the speed from 1 to 20 seconds.
The thumbnails also display in lightbox when clicked, providing for an alternative single slide view.
The slideshow panel width is set to 450px allowing for a picture up to this size, but the thumbnails will fit according to the page size (ie, the wider the page,
the more thumbnails you will see across the page).
Install deSlideShow on your web page by adding this HTML markup in the head section: <script src="src/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="src/jquery.lightbox-0.5.js" type="text/javascript"></script>
<script src="src/jquery.event.drag-1.5.min.js" type="text/javascript"></script>
<script src="src/deSlideShow.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { $('#dessdiv a').lightBox(); }) </script>
<link rel="stylesheet" type="text/css" href="src/jquery.lightbox-0.5.css" media="screen" />
then in the body, insert the and tags and insert your images between these tags.
This plugin has been written by Sue Smiles, micropulse.
Sue is a veteran programmer specialising in javascript, asp.net and xml CMS.
Sue uses her programming skills to write software that is easy for everyone to understand - virtually no technical knowledge required.
Sue has also written a CMS with additional shopping cart module that is dead easy to use and uses an XML database - no MySQL Click here to read more about deCMS ...
Try changing the page width: Current SlideShow Speed:
(in milliseconds)
(move the slider below to restart)
[dessstart]
[dessend]
The code to create the slideshow is very simple. Begin with:
and end with:
In between these tags insert your images. For example:
start
end
This can be installed into your web page by adding this HTML markup in the head section: <script src="src/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="src/jquery.lightbox-0.5.js" type="text/javascript"></script>
<script src="src/jquery.event.drag-1.5.min.js" type="text/javascript"></script>
<script src="src/deSlideShow.js" type="text/javascript"></script>
<script type="text/javascript"> $(function () { $('#dessdiv a').lightBox(); }) </script>
<link rel="stylesheet" type="text/css" href="src/jquery.lightbox-0.5.css" media="screen" />
then in the body, insert the start and end tags with the images inserted in between.
That's it!
There are no options or additional parameters, although they could be built in quite easily.
The idea was to keep this as simple as possible to enable the quickest possible install.
deSlideShow is a jQuery slideshow that has HTML code generated by javascript based on the images contained within the start and end tags.
It is an easy to use slideshow that requires no technical knowledge to install and use.
deSlideShow allows the user to change the contents of the slideshow by simply adding more images.
The slideshow has a caption area under the slide which contains the title of the image and the alternate text for the image.
The alternate text can contain a paragraph to provide a lengthy description for each image.
Because of this capacity for a long caption, it may be necessary to slow down the slideshow to read all the text.
This can be done with the slider under the slideshow which can be set from 1 to 20 seconds per slide.
deSlideShow also creates the thumbnails from the images and displays these to the right of the slideshow.
As the slideshow moves from image to image, a red border appears around the current thumbnail image.
deSlideShow also uses jQuery lightbox to display images and this is activated if the thumbnail is clicked.
variable speed slideshow,change slideshow speed,alternate speed,speed slider,control slideshow speed
auto generate thumbnails,display current thumbnail
user control slideshow,easily update slideshow,change slideshow images,alter slideshow images
slideshow with captions,user updatable captions,set slideshow captions
[dessend]