Comp-Presenter jQuery Plugin

Easily present website design comps

This jQuery plugin was made to help present website design comps to clients. By using the web browser for presentation you can keep your client from opening your comp in an image viewing program that may confuse the client on how the final product will look. You can read my blog post about how to present design comps to a client for more information on this. This plugin works in IE6+, Firefox, Chrome, and Safari.

The Comp-Presenter jQuery plugin is free to use and you can re-purpose it to suit your needs. Licensed under GPL and MIT

How to Use

Download the Comp-Presenter plugin and CSS file and add the following code to the header of a new HTML page. Note, I am using the Microsoft Ajax CDN to include jQuery, but you can download it from jquery.com and include it directly if you want.

<link rel="stylesheet" type="text/css" media="screen" href="comp-presenter.css" />
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery.comp-presenter-min.js" type="text/javascript"></script>

In the body of the HTML page add an unordered list of your design comp images. Make sure the unordered list has a unique id. The alt text is displayed in the header of the presentation to show what slide the user is on. If you don’t want to use this feature you don’t have to add it to the image tag.

<ul id="slideshow">
	<li><img src="path/to/example-image-1.jpg" alt="Slide title" /></li>
	<li><img src="path/to/example-image-2.jpg" alt="Slide title" /></li>
	<li><img src="path/to/example-image-3.jpg" alt="Slide title" /></li>
</ul>

Back in the header of the HTML file add the following code below the code we added previously. Make sure you change the id to match the one you used.

<script type="text/javascript">
	$(document).ready(function(){
		$("#slideshow").compPresenter();                       
	});
</script>

Plugin Options

Key Options Default Description
title true
false
“string”
true Title of presentation that appears on top left. True uses the HTML pages title. False removes it. Or you can use any custom text in parentheses like "My Title"
prevText “string” “<span>&larr;</span> Previous” The text in the previous button.
nextText “string” “Next <span>&rarr;</span>” The text in the next button.
paging true
false
true Paging keeps track of what number slide you are on.
align “left”
“center”
“right”
“center” Aligns the images to the left, right, or center of the stage. Choose “center” for a centered design.
autoHide true
false
true true Slides the header off screen until the user hovers over it. Or keeps the header visible at all times.
pause number 3000 Time in milliseconds before the header slides of screen for the first time. Doesn’t matter if autoHide is set to false.
speed “slow”
“normal”
“fast”
number
“slow” “slow” Speed of slide transition. Number uses milliseconds.

Mini-Example 1

$("#slideshow-1").compPresenter({
	title:"Example 1"								
});
  • Home Page
  • About Us
  • Blog

Mini-Example 2

$("#slideshow-2").compPresenter({
	title:"Example 2",
	autoHide:false,
});
  • Home Page
  • About Us
  • Blog

Mini-Example 3 (No alt attribute on images)

$("#slideshow-3").compPresenter({
	title:false,
	pause:5000,
	speed:3000,
	prevText:"Previous Image",
	nextText:"Next Image",
	paging:false
});

jQuery | August 30, 2010 | 1 Comment

Leave a comment »

  • Richard

    Great plugin! I want to present comps with different backgrounds. Is it possible to add an indivisual class to the body for each slide, so that different body backgrounds can be shown?

    March 18, 2011 @ 5:50 am

Leave a comment