VP Newsletter

JavaScript - jSimplePresentation - CodeCanyon

VP Newsletter his title this type of JavaScript/Sliders This time I will review,made by vp76, JavaScript/Sliders is sold at a price of $5 in CodeCanyon. marketplace.load('http://1.envato-static.com/assets/lib/jwplayer-112980df220bb5e43b64b8364f5a075e.js'); marketplace.previewConfigs = [{ type: 'video', width: 1280, height: 750, preview_url: 'http://0.s3.envato.com/files/12308773/Presentation.flv', mp_placeholder: "http://codecanyon.net/video_player/codecanyon_backdrop.png", image_url: "http://0.s3.envato.com/files/12308770/Img.jpg" }]; animation // design // powerpoint // presentation // slider // slideshow // transition //

Created	15 December 11
Last Update	15 December 11
Compatible Browsers	IE7, IE8, IE9, Firefox, Safari, Opera, Chrome
Software Version	jQuery
High Resolution	No
Files Included	JavaScript JS, HTML, CSS

More Info...VP Newsletter ..

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 p)
• 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

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

Each p 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 LinkVP Newsletter - C ..

Related produck This user:vp76

More items by vp76