WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Sliders

jSimplePresentation

— Add-On to WorldWideScripts.net

Subscribe to our feed to stay up to date!

New! Follow us as you want it!


jSimplePresentation - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

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

Download
Other components in this categoryAll components of this author
CommentsFrequently asked questions and answers

Properties

Created:
15 December 11

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

Keywords

eCommerce, eCommerce, All Items, animation, design, powerpoint, presentation, slider, slideshow, transition