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.
- IE 7+
- All other popular browsers
- jQuery 1.4+
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
Initializes plugin. Can receive option(s). Use shortcutted syntax
$('#myslider').simpleShow({
effect: 'fading'
});
$('#my2slider').simpleShow();
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});
Destroys plugin and returns the element in original condition
$('#myslider').simpleShow('destroy');
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
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
Default: 10
Amount of blocks which would be used for blocks
animation.
$('#myslider').simpleShow({
effect: 'blocks',
blocks: 20
});
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
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
Default: 4000
An interval before showing next slide in milliseconds.
$('#myslider').simpleShow({
interval: 2500
});
Default: 1000
Speed of sliding effects in milliseconds.
$('#myslider').simpleShow({
speed: 3000
});
Default: true
Whether to show navigation arrows or not.
$('#myslider').simpleShow({
arrows: false
});
Default: true
Whether to show navigation radios or not.
$('#myslider').simpleShow({
radios: false
});
Default: 10
Z-index css property for slides.
$('#myslider').simpleShow({
normIndex: 50
});
Default: 100
Z-index property which would be set for active slide during some effects.
$('#myslider').simpleShow({
maxIndex: 70
});