Created: 24/05/2012
By: Hemn Chawroka
Website: iProDev
Thank you for using my script.
We start of with a simple HTML5 document that will be the backbone of our example.
<!DOCTYPE html> <html> <head> <title>iPresenter</title> <!-- Google Webfonts and our stylesheet --> <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow" /> <link rel="stylesheet" href="css/styles.css" /> <link rel="stylesheet" href="css/demo1.css" /> <!-- JavaScript includes --> <script src="js/jquery-1.7.1.min.js"></script> <script src="js/ipresenter.encoded.js"></script> <!-- iPresenter script starter Section --> <script> $(document).ready(function(){ $('#ipresenter').iPresenter(); }); </script> </head> <body> <!-- BEGIN CONTAINER --> <div class="container"> <!-- BEGIN #ipresenter element container --> <div id="ipresenter"> <!-- The Slides Will Go Here --> </div> <!-- END #ipresenter element container --> </div> <!-- END CONTAINER --> </body> </html>
Nothing unusual here. Along with the Google Webfonts include in the head, we also have our main stylesheet (we will go back to it in the next section) and a number of JavaScript source files before the closing head tag.
The #ipresenter div will hold the slides. The id is required in order to be recognized by ipresenter.js.
<div id="ipresenter"> <!-- The Slides Will Go Here --> </div>
With this plugin, we can create smooth CSS3 transitions between the slides of our showcase. To do this, we have to instruct iPresenter on how to orient the slides. This is easy to do - we will use data attributes on the step divs. These attributes are translated into real CSS3 transformations by the plugin, depending on the current browser, and affect the slide.
You can see the markup for the slides below:
<!-- The first slide retains its default position. We could omit the data attributes --> <div id="intro" class="step" data-x="0" data-y="0"> <img src="img/details.png" /> <h2>A phone that sees the world like you do, in 3D</h2> <p>Now your photos can have as much depth as the moment itself. HTC EVO 3D captures your photos and videos in 3D, plus you can view them without the glasses. The stunning 4.3-inch qHD display gives you crisp websites, vivid images and incredibly fluid videos.</p> </div> <!-- We are offsetting the second slide, rotating it and making it 1.8 times larger --> <div id="capture" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="180" data-easing="easeInOutQuint"> <img src="img/ksp1.png" /> <h2>Capture life in 3D</h2> <p>HTC EVO 3D allows you to shoot 3D movies and snap 3D photos via dual cameras, so no matter where you are, capture life as it should be. And see it all in true-to-life detail without 3D glasses.</p> </div> <!-- Same for the rest.. --> <div id="view" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270"> <img src="img/ksp2.png" /> <h2>An incredible view</h2> <p>The large 4.3 inch display serves up incredibly crisp websites, vivid images and fluid video on a pixel-packed qHD screen. Catch the latest blockbusters straight from HTC Watch – a new service that starts the show just seconds into the download and monitors your Internet connection to ensure uninterrupted viewing.</p> </div>
When the slideshow starts, iPresenter will compensate for these transformations, and apply the reverse rules to the #ipresenter div with a smooth CSS transition.
I'm using two CSS files in this sample. The first one contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.
The second file contains all of the specific stylings for the page. The file is separated into sections using:
/* === Preloader Section === */ div#ipresenter div#preloader { some styles } div#ipresenter div#preloader div { some styles } /* === Steps Section === */ div#ipresenter div.step { some styles } /* === Control Navigation Section === */ /* = General = */ a.ipresenter_stepsNav { some styles } /* = Next Button = */ a#ipresenter_nextStep { some styles } /* = Previous Button = */ a#ipresenter_prevStep { some styles } /* = Pagination Buttons Container = */ div.ipresenter-controlNav { some styles } /* = Pagination Previous Buttons = */ div.ipresenter-controlNav a.ipresenter-controlPrevNav { some styles } /* = Pagination Next Button = */ div.ipresenter-controlNav a.ipresenter-controlNextNav { some styles } /* = Pagination Number Button = */ div.ipresenter-controlNav a.ipresenter-control { some styles } /* = Pagination Tooltip = */ div.ipresenter-controlNav div.ipresenter-tooltip { some styles } div.ipresenter-controlNav div.ipresenter-tooltip div { some styles } div.ipresenter-controlNav div.ipresenter-tooltip img { some styles } /* === Playback === */ /* = General = */ #ipresenter-timer { some styles } /* = When its playing = */ #ipresenter-timer.play { some styles } /* = When its paused = */ #ipresenter-timer.pause { some styles }
Any images that are placed within the steps section can be customizable. If you would like to edit the display of these images, find the following section in the style sheet:
div#ipresenter div.step img { change styles here }
This script imports two Javascript files.
For start iPresenter add the following section in the javascript tag:
$(document).ready(function(){ $('#ipresenter').iPresenter(); });
Many options available for customize the iPresenter:
$(document).ready(function(){ $('#ipresenter').iPresenter({ easing: 'ease-in-out', // Easing timing (custom cubic-bezier function is acceptable) autoPlay: true, // To Enable or Disable the autoplay replay: true, // To repeat all steps from beginning animSpeed: 1000, // To set the speed of the switch animation (Microsecond) pauseTime: 5000, // To set the time of the pause between steps (Microsecond) directionNav: true, // Next & Previous navigation directionNavHoverOpacity: 0.6, // Fade on hover controlNav: true, // 1,2,3,4... navigation controlNavNextPrev: true, // previous,next navigation controlNavHoverOpacity: 0.6, // Navigation fade on hover controlNavThumbs: false, // Show thumbs navigation controlNavTooltip: true, // Show thumbs Tooltip keyboardNav: true, // To Enable or Disable the keyboard navigation pauseOnHover: false, // To Enable or Disable the slideshow when mouse come over it itemsOpacity: 0.4, // To set the value of the opacity for the steps randomStart: false, // Start on a random step startStep: 0, // Set starting Step (0 index) timer: 'Pie', // Timer style: "Pie", "360Bar" or "Bar" timerBg: '#000', // Timer background timerColor: '#EEE', // Timer color timerOpacity: 0.5, // Timer opacity timerDiameter: 30, // Timer diameter timerPadding: 4, // Timer padding timerStroke: 3, // Timer stroke width timerBarStroke: 1, // Timer Bar stroke width timerBarStrokeColor: '#EEE', // Timer Bar stroke color timerBarStrokeStyle: 'solid', // Timer Bar stroke style timerPosition: 'top-right', // Timer position (top,middle,bottom)-(left-center-right) set like: 'middle-center' nextLabel: "Next", // To set the string of the next button (Multilanguage use) previousLabel: "Previous", // To set the string of the previous button (Multilanguage use) playLabel: "Play", // To set the string of the play button (Multilanguage use) pauseLabel: "Pause", // To set the string of the pause button (Multilanguage use) onBeforeChange: function(){}, // Triggers before a step change onAfterChange: function(){}, // Triggers after a step change onLastStep: function(){}, // Triggers when last step is shown onAfterLoad: function(){}, // Triggers when slider has loaded onPause: function(){}, // Triggers when slider has paused onPlay: function(){} // Triggers when slider has played }); });
I've used the following images as listed.
Version 2.0
2012-05-24 Hemn Chawroka * Added touch navigation. * Added 3 beautiful timer. * Added pause/resume method. * Fixed some bugs. * Fixed timer call action. * Added control navigation. * Added thumbnail navigation. * Added tooltip image previewer.
Version 1.1
2012-04-19 Hemn Chawroka * Added browser compatibility check. * Added easing option. * Added randomStart option. * Added startStep option. * Added onBeforeChange callback option. * Added onAfterChange callback option. * Added onLastStep callback option. * Added onAfterLoad callback option. * Added onPause callback option. * Added onPlay callback option. * Added easing timing methods. * Fixed images preloader.
Once again, thank you so much for purchasing this script. As I said at the beginning, I'd be glad to help you if you have any questions relating to this script.
Hemn Chawroka