CodeCanyon jSimplePresentation 1055194
Script \ JavaScript \ Sliders
Transition \ TransitionTime \ Source \ TransitionFunction \ Opacity \ Option

JavaScript - jSimplePresentation 1055194 by vp76 @ CodeCanyon

Script \ JavaScript \ Sliders

This item represents a new vision of a slideshow, offered as a jQuery plugin.

Some of possible uses .

- To use it instead of powerpoint in order to present your ideas

- To advertise a product, a website, ..

- To make an HTML designed book

- etc, etc.


- Able to use other plugins in addition of this one

- Able to load unlimited number of pages

- It can contains what you want (a page is a simple div)

- The pages (center of the page) are automatically resized with the browser

- Fully and easily customizable

- Very easy to use

- Keyboard navigation (RIGHT / LEFT / SPACE / L)

- Slideshow option

- Autoplay option

- Loop option

- Image preloading option

- Go to a certain page (with secured input control)

- W3C Valid

- Works on iOS (iPhone / iPad) and certainly on Android

- Three themes included (grey, blue, orange)

- 4 transition presets

- You can write your own transition with a simple function in the plugin call

- Transitions can be different for the next and previous actions

- Well commented (most actions in the code contain comments)

How to use it
JS – Syntax

autoplay: boolean,
loop: boolean,
intervalTime: integer,
preloading: boolean,
transitionFct: function

JS – Example with a preset transition

var transitionFunction = function(elt, source, transitionTime) {
Transition.opacity(elt, source, transitionTime);
autoplay: false,
loop: false,
intervalTime: 2000,
preloading: false,
transitionFct: transitionFunction

JS – Example with a transition we write

var transitionFunction = function(elt, source, transitionTime) {
elt.css("opacity", "0");
// If we're going to the next page
if (source == "RIGHT") {
elt.css("marginLeft", "100%");
"opacity": 1,
"marginLeft": "0px"
}, transitionTime);
} else {
elt.css("marginRight", "100%");
"opacity": 1,
"marginRight": "0px"
}, transitionTime);
$presentation = $(document).simplePresentation({
autoplay: false,
loop: false,
intervalTime: 4000,
preloading: true,
transitionFct: transitionFunction


<div id="container">
<div id="page1">
<div id="page2">

Each div with id=”pageX” represent a page.

Each pages must have an id that starts with “page”.

Compatible browsers
This item works with the following browsers .

- Firefox 4+

- IE7+ (uses a separated css stylesheet for IE less than V.9)

- Opera

- Chrome

- Safari

Last Update: N/A; High Resolution: No; Compatible Browsers: IE7, IE8, IE9, Firefox, Safari, Opera, Chrome; Files Included: JavaScript JS, HTML, CSS; Software Version: jQuery.

EvenTouch Calendar; Full CSS3 Tooltip.

Keywords: animation, design, powerpoint, presentation, slider, slideshow, transition.