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

Example

See the plugin in action!

How to Use

Download JS

• Compressed (3kb)
• Uncompressed (5kb)

Download CSS

• Uncompressed (2kb)

Add Markup

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="https://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