jQuery Slideshow Demo using the prettyPhoto Plugin
Include the prettyPhoto CSS and javascript files
<link href="js/prettyPhoto.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src='<%= ResolveUrl("~/js/jquery.prettyPhoto.js") %>'></script>
The jQuery setup code for the prettyPhoto plugin
$(function() {
$("a[rel^='prettyPhoto']").prettyPhoto({
animationSpeed: 'normal', /* fast/slow/normal */
opacity: 0.50, /* Value between 0 and 1 */
showTitle: true, /* true/false */
allowresize: true, /* true/false */
default_width: 600,
default_height: 444
}
});
Click on any square to launch the slideshow
Click Here to View the Slideshow
After launching the slideshow, use the left and right arrows on your keyboard
to scroll through the images much faster.
Background
I didn't think it would take a fair bit of searching to find a "good" slideshow plugin for jQuery, meaning:
- One
that doesn't need all images to be preloaded on the page (using <img> tags) in order to work
- Doesn't have obtrusive back and next controls
- Can be set up with little code, and optionally,
can be customized fairly well.
I tried lightbox (which I have used quite
a bit, such as on the site history page), crossfade and a few others. Some
of these are fantastic for image gallery types of web pages, but I wanted a minimalistic,
easy-to-use plugin. I found
prettyPhoto and it works very nicely.
The images are from a hunting and fishing newspaper column, "afield-afloat," by Hank Andrews,
clipped by my dad maybe thirty five years ago...