jSimplePresentation

jSimplePresentation Created by vp76. This templates have specific characteristics, namely: This item represents a new vision of a slideshow, offered as a jQuery plugin.Some of possible uses .

You can use this jSimplePresentation on Javascript category for animation, design, powerpoint, presentation, slider, slideshow, transition and another uses.

jSimplePresentation
© Copyright by vp76

Features:

  • 1280×720: 1280×720
  • Jquery: jQuery
  • No: No
  • Ie7, ie8, ie9, firefox, safari, opera, chrome: IE7, IE8, IE9, Firefox, Safari, Opera, Chrome
  • Javascript js, html, css: JavaScript JS, HTML, CSS

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.

Features

  • 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

$(document).simplePresentation({    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);};$(document).simplePresentation({    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%');        elt.animate({            'opacity': 1,            'marginLeft': '0px'         }, transitionTime);    } else {        elt.css('marginRight', '100%');        elt.animate({            'opacity': 1,            'marginRight': '0px'         }, transitionTime);    }};$presentation = $(document).simplePresentation({    autoplay: false,    loop: false,    intervalTime: 4000,    preloading: true,    transitionFct: transitionFunction});

HTML

<div id='container'>    <div id='page1'>        ...    </div>    <div id='page2'>        ...    </div></div>

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