LIVE PREVIEWBUY FOR $6

This merchandise represents a brand new imaginative and prescient of a slideshow, provided as a jQuery plugin.
A few of doable makes use of :

  • To make use of it as an alternative of powerpoint so as to current your concepts
  • To promote a product, an internet site, …
  • To make an HTML designed e-book
  • and so on, and so on.

Options

  • In a position to make use of different plugins as well as of this one
  • Capable of load limitless variety of pages
  • It may well accommodates what you need (a web page is a straightforward div)
  • The pages (middle of the web page) are routinely resized with the browser
  • Totally and simply customizable
  • Very simple to make use of
  • Keyboard navigation (RIGHT / LEFT / SPACE / L)
  • Slideshow choice
  • Autoplay choice
  • Loop choice
  • Picture preloading choice
  • Go to a sure web page (with secured enter management)
  • W3C Legitimate
  • Works on iOS (iPhone / iPad) and positively on Android
  • Three themes included (gray, blue, orange)
  • 4 transition presets
  • You’ll be able to write your personal transition with a easy perform within the plugin name
  • Transitions might be totally different for the following and former actions
  • Nicely commented (most actions within the code include feedback)

Tips on how to use it

JS – Syntax

$(doc).simplePresentation({
    autoplay: boolean,
    loop: boolean,
    intervalTime: integer,
    preloading: boolean,
    transitionFct: perform
});

JS – Instance with a preset transition

var transitionFunction = perform(elt, supply, transitionTime) {
    Transition.opacity(elt, supply, transitionTime);
};

$(doc).simplePresentation({
    autoplay: false,
    loop: false,
    intervalTime: 2000,
    preloading: false,
    transitionFct: transitionFunction
});

JS – Instance with a transition we write

var transitionFunction = perform(elt, supply, transitionTime) {
    elt.css("opacity", "0");

    // If we'll the following web page
    if (supply == "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 = $(doc).simplePresentation({
    autoplay: false,
    loop: false,
    intervalTime: 4000,
    preloading: true,
    transitionFct: transitionFunction
});

HTML

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

Every div with id=”pageX” characterize a web page.

Every pages will need to have an id that begins with “web page”.

Suitable browsers

This merchandise works with the next browsers :

  • Firefox 4+
  • IE7+ (makes use of a separated css stylesheet for IE lower than V.9)
  • Opera
  • Chrome
  • Safari


Source