slideshow.js Examples for version 0.3

Basic slideshow

new Slideshow('basic').create();

Basic slideshow (without javascript enabled)

More advanced settings

var advanced = new Slideshow('advanced');
advanced.description_template = "Image #{number} of #{total} - #{description} - 
     #{width}x#{height} - <span style=\"color:#999;\">#{filename}</span>";
advanced.duration = 1.5;
advanced.create();

Slideshow with automatic timer

var auto = new Slideshow('timer');
auto.description_template = "Image #{number} of #{total} - #{description}<br>
     <small>(The slideshow will advance automatically)</small>";
auto.auto_play = true;
auto.create();

Slideshow without descriptions

var no_desc = new Slideshow('no-desc');
no_desc.show_descriptions = false;
no_desc.create();

Slideshow without navigation buttons

var no_nav = new Slideshow('no-nav');
no_nav.show_nav = false;
no_nav.auto_play = true;
no_nav.create();

Slideshow with custom viewer size

var size = new Slideshow('size');
size.slideshow_size.height = '245px';
size.slideshow_size.width = '178px';
// could also be size.slideshow_size = { width:'245px', height:'178px' }
size.create();

Slideshow with auto_size and auto_center

var auto_size = new Slideshow('auto-size');
auto_size.auto_size = true;
auto_size.auto_center = true;
auto_size.slideshow_background = "#000";
auto_size.create();

Slideshow with auto_size and auto_center and a pretty border

var auto_size_two = new Slideshow('auto-size2');
auto_size_two.auto_size = true;
auto_size_two.auto_center = true;
auto_size_two.slideshow_background = "#000";
auto_size_two.create();

 &

#auto-size2 img {
	border: 6px solid #fff;
	border-bottom: 6px solid #ccc;
	border-right: 6px solid #ccc;
}