### “iPresenter” Documentation by “Hemn Chawroka” v2.0

# “iPresenter”

Created: 24/05/2012
By: Hemn Chawroka
Website: iProDev

Thank you for using my script.

## Table of Contents

1. HTML Structure
2. CSS Files and Structure
3. JavaScript
4. Sources and Credits
5. Changelog

### A) HTML Structure - top

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.

1. data-easing - easing timing function (custom cubic-bezier function is acceptable):
     - linear
     - ease
     - ease-in
     - ease-out
     - ease-in-out
     - ease-out-in
     - easeInQuad
     - easeOutQuad
     - easeInOutQuad
     - easeInCubic
     - easeOutCubic
     - easeInOutCubic
     - easeInQuart
     - easeOutQuart
     - easeInOutQuart
     - easeInQuint
     - easeOutQuint
     - easeInOutQuint
     - easeInSine
     - easeOutSine
     - easeInOutSine
     - easeInExpo
     - easeOutExpo
     - easeInOutExpo
     - easeInCirc
     - easeOutCirc
     - easeInOutCirc
     - easeInBack
     - easeOutBack
     - easeInOutBack
2. data-pausetime - how long the slide will show;
3. data-x, data-y, data-z will move the slide on the screen in 3D space;
4. data-rotate, data-rotate-x, data-rotate-y, data-rotate-z rotate the element around the specified axis (in degrees);
5. data-scale - enlarges or shrinks the slide;
6. data-thumbnail - the url of the thumbnail;

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.

### B) CSS Files and Structure - top

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
    	}

### C) JavaScript - top

This script imports two Javascript files.

1. jQuery : jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. iPresenter

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
    		});
    	});

### D) Sources and Credits - top

I've used the following images as listed.

- Photos from htc EVO™ 3D (Demo 1)
- Photos from Joanna Kustra (Demo 2)

### E) Changelog - top

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

Go To Table of Contents