simpleShow

SimpleShow is a responsive cross-browser slideshow plug-in. It's benefits are simplicity, convenience and lightness.

Now available only version for jQuery, pure JavaScript version is in progress.

Supports

IE 7+
All other popular browsers

Requires

jQuery 1.4+

Live Demo

Usage

Include the relevant files in the <head> of your document:

<link type="text/css" href="style/simpleShow.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/simpleShow.min.js"></script>

Place the html code where needed:

<div class="simpleShow-wrapper one-of-slider">
   <div class="simpleShow-controls"></div>
   <img class="simpleShow-zeroBg" src="zerobg.png" />
   <div class="simpleShow-slides">
      <a href="#" class="simpleShow-slide"><img src="img/1.jpg" alt="" /></a>
      <a href="#" class="simpleShow-slide"><img src="img/2.jpg" alt="" /></a>
      <a href="#" class="simpleShow-slide"><img src="img/3.jpg" alt="" /></a>
   </div>
</div>

Note: Each slide should have simpleShow-slide class and not necessary should be a link or an image

Then you just need to initialise simpleShow on document.ready using a selector:

$(function(){
  $('.one-of-slider').simpleShow().show();
});

Note: Feel free to use chaining after calling simpleShow method

Note: SimpleShow can be initialised on any number of elements on a single page

Methods

init

Initializes plugin. Can receive option(s). Use shortcutted syntax

$('#myslider').simpleShow({
  effect: 'fading'
});
$('#my2slider').simpleShow();

update

Reinitializes plugin. Can be used for dynamically changing content and changing options

$('#myslider').simpleShow('update');
$('#my2slider').simpleShow('update', {speed: 2000});

Or you can use shortcutted syntax for already initialized elements

$('#myslider').simpleShow({speed: 2000, effect: 'sliding'});
$('#myslider').simpleShow({speed: 1000});

destroy

Destroys plugin and returns the element in original condition

$('#myslider').simpleShow('destroy');

params

Returns object with parameters for selected slider which consists of:

item - jQuery slider object

settings - settings object

slides - jQuery collection of slides

active - index number of an active slide

var params = $('#myslider').simpleShow('params');

Note: This method is only one returning data, not elements

Options

effect

Default: crossfade

Transition effects. Can be blocks, sliding, fading, crossfade, translation

$('#myslider').simpleShow({
  effect: 'fading'
});

Note: For fading effect you can setup "fading throw" color by defining background-color to .simpleShow-wrapper class

blocks

Default: 10

Amount of blocks which would be used for blocks animation.

$('#myslider').simpleShow({
  effect: 'blocks',
  blocks: 20
});

opacity

Default: 1

Changes opacity to the specified value and adds this effect to your animation. Works only with blocks, sliding, translation effects.

$('#myslider').simpleShow({
  effect: 'blocks',
  opacity: 0.2
});

Note: Used only with blocks effect

direction

Default: bottom

Sets the direction for some effects. Can be bottom, top, left or right.

$('#myslider').simpleShow({
  effect: 'sliding',
  direction: 'top'
});

Note: Used only with blocks and sliding effects

interval

Default: 4000

An interval before showing next slide in milliseconds.

$('#myslider').simpleShow({
	interval: 2500
});

speed

Default: 1000

Speed of sliding effects in milliseconds.

$('#myslider').simpleShow({
	speed: 3000
});

arrows

Default: true

Whether to show navigation arrows or not.

$('#myslider').simpleShow({
	arrows: false
});

radios