jScrollPresenter

A simple, yet powerful horizontal presenter (jQuery Plugin)

This is a simple, yet powerful horizontal presenter in which you can display “slides”. As a matter of fact, slides can consist of virtually any valid HTML markup. There's also an option for automatic scrolling, i.e. automatic changing of the slides.

Download

You can grab a copy of jScrollPresenter over at the GitHub repository as either zip or tar archive. There you will always find the latest version of the plugin. Just use the following links to download directly.

Download .zip Download .tar

Requirements

jScrollPresenter itself requires at least jQuery 1.7 to work properly. Furthermore, you can use jQuery UI to benefit from its enhanced easing functions, though this is not strictly required for the plugin to run correctly.

Browser Compatibility

So far, jScrollPresenter has been tested and considered working in Mozilla Firefox 3.0 as well as Chrome 15 and Internet Explorer 9 (including newer versions of the aforementioned browsers). If you would like to contribute by testing the plugin in various other browsers and versions, just drop me a note with your results.

Configuration

Appearance

Most (if not all) of the layout aspects can be controlled via ordinary CSS rules. See the examples section for some clues on how to manipulate the appearance to your liking.

Behavior

There are some optional configuration options which give you a certain amount of control over the behavior of jScrollPresenter. You can pass some or all of the following options to the plugin during the initialization as a JSON object. See demo 2 or demo 3 for hints on how to do this.

Usage Examples

Here you can see some examples of jScrollPresenter in action. You can use the corresponding CSS style rules as a starting point for your own customizations. Feel free to copy and modify them as you like.

• Simple Example with Default Configuration
• Automatic Scrolling & Optional Configuration
• Scrolling with Images and Placing the Position Indicator Inside

Demo 1: Simple Example with Default Configuration

Code

<style type="text/css">
	#demo1 {
		width: 780px;
		overflow: hidden;
	}
	#demo1 .jScrollPresenterPlaceholder div {
		float: left;
	}
	.jScrollPresenterPlaceholder {
		position: relative;
	}
	#demo1 .jScrollPresenterHeader {
		background: #789;
		overflow: hidden;
		text-align: center;
	}
	#demo1 .jScrollPresenterHeader a {
		color: #EEE;
		display: block;
		float:left;
		width: 179px;
		font-weight: 700;
		font-size: 1.15em;
		padding: 8px;
		text-decoration: none;
	}
	#demo1 .jScrollPresenterHeader a:hover, #demo1 .jScrollPresenterHeader a.selected {
		background: #4682B4;
	}
</style>

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

<div id="demo1">
	<div class="jScrollPresenterHeader">
		<a href="#panel-1">Lorem ipsum</a>
		<a href="#panel-2">Cicero</a>
		<a href="#panel-3">Werther</a>
		<a href="#panel-4">Far far away</a>
	</div>

	<div class="jScrollPresenterPlaceholder">
		<div id="panel-1">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et libero quis quam malesuada fringilla. Mauris scelerisque justo eget elit laoreet accumsan. Praesent fermentum massa sed nisl malesuada malesuada. Pellentesque ac ante eget ante sollicitudin sodales. Donec vel arcu ut tellus sagittis hendrerit ut sit amet mauris. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sem erat, lacinia ut feugiat nec, tristique in tortor. Duis adipiscing condimentum mollis.</p>
			<p>Aliquam eu nunc quis nunc lobortis fermentum. Nullam iaculis risus imperdiet ipsum tristique vitae mollis velit tempor. Ut id magna et augue faucibus rhoncus eu non diam. Phasellus ligula risus, commodo et auctor nec, pharetra a nunc. Aenean sollicitudin congue mattis. Nulla pulvinar ultricies pellentesque. Nam tincidunt volutpat hendrerit. Sed felis tellus, tincidunt eu pellentesque non, auctor id turpis. Phasellus lobortis consectetur nisi, sit amet semper est consectetur nec. Aenean fringilla libero in ante sodales suscipit. Quisque mattis libero non libero fringilla mollis. Suspendisse sit amet lacus non erat consequat facilisis. Nullam aliquam, lorem eget imperdiet convallis, lectus augue pellentesque orci, eu condimentum felis nulla sit amet ligula. Pellentesque cursus vehicula diam, sit amet iaculis felis elementum vel. Duis a sapien at nibh posuere aliquam in nec lacus. Proin in pulvinar nisi.</p>
		</div>
		<div id="panel-2">
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
			<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
		</div>
		<div id="panel-3">
			<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
			<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
		</div>
		<div id="panel-4">
			<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
			<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
		</div>
	</div>
</div>
		

Demo 2: Automatic Scrolling & Optional Configuration

Code

<style type="text/css">
	#demo2 {
		width: 780px;
		overflow: hidden;
	}
	#demo2 .jScrollPresenterPlaceholder div {
		float: left;
	}
	.jScrollPresenterPlaceholder {
		position: relative;
	}
	#demo2 .jScrollPresenterHeader {
		background: #789;
		overflow: hidden;
		text-align: center;
	}
	#demo2 .jScrollPresenterHeader a {
		color: #EEE;
		display: block;
		float:left;
		width: 179px;
		font-weight: 700;
		font-size: 1.15em;
		padding: 8px;
		text-decoration: none;
	}
	#demo2 .jScrollPresenterHeader a:hover, #demo2 .jScrollPresenterHeader a.selected {
		background: #4682B4;
	}
</style>

<script type="text/javascript">
	$(document).ready(function() {
		$("#demo2").jScrollPresenter({
			scrollSpeed: 500,
			scrollDelay: 2000,
			transition: 'swing'
		});
	});
</script>

<div id="demo2">
	<div class="jScrollPresenterHeader">
		<a href="#panel-1">Lorem ipsum</a>
		<a href="#panel-2">Cicero</a>
		<a href="#panel-3">Werther</a>
		<a href="#panel-4">Far far away</a>
	</div>

	<div class="jScrollPresenterPlaceholder">
		<div id="panel-1">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et libero quis quam malesuada fringilla. Mauris scelerisque justo eget elit laoreet accumsan. Praesent fermentum massa sed nisl malesuada malesuada. Pellentesque ac ante eget ante sollicitudin sodales. Donec vel arcu ut tellus sagittis hendrerit ut sit amet mauris. Suspendisse potenti. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sem erat, lacinia ut feugiat nec, tristique in tortor. Duis adipiscing condimentum mollis.</p>
			<p>Aliquam eu nunc quis nunc lobortis fermentum. Nullam iaculis risus imperdiet ipsum tristique vitae mollis velit tempor. Ut id magna et augue faucibus rhoncus eu non diam. Phasellus ligula risus, commodo et auctor nec, pharetra a nunc. Aenean sollicitudin congue mattis. Nulla pulvinar ultricies pellentesque. Nam tincidunt volutpat hendrerit. Sed felis tellus, tincidunt eu pellentesque non, auctor id turpis. Phasellus lobortis consectetur nisi, sit amet semper est consectetur nec. Aenean fringilla libero in ante sodales suscipit. Quisque mattis libero non libero fringilla mollis. Suspendisse sit amet lacus non erat consequat facilisis. Nullam aliquam, lorem eget imperdiet convallis, lectus augue pellentesque orci, eu condimentum felis nulla sit amet ligula. Pellentesque cursus vehicula diam, sit amet iaculis felis elementum vel. Duis a sapien at nibh posuere aliquam in nec lacus. Proin in pulvinar nisi.</p>
		</div>
		<div id="panel-2">
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
			<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?</p>
		</div>
		<div id="panel-3">
			<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>
			<p>I am so happy, my dear friend, so absorbed in the exquisite sense of mere tranquil existence, that I neglect my talents. I should be incapable of drawing a single stroke at the present moment; and yet I feel that I never was a greater artist than now.</p>
		</div>
		<div id="panel-4">
			<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
			<p>It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
		</div>
	</div>
</div>
		

Demo 3: Scrolling with Images and Placing the Position Indicator Inside

Images courtesy of PublicDomainPictures.net

Code

<style type="text/css">
	#demo3 {
		width: 780px;
		overflow: hidden;
	}
	#demo3 .jScrollPresenterPlaceholder div {
		float: left;
	}
	.jScrollPresenterPlaceholder {
		position: relative;
		clear: both;
	}
	#demo3 .jScrollPresenterPlaceholder p {
		margin: 0;
	}
	#demo3 .jScrollPresenterHeader {
		overflow: hidden;
		text-align: right;
		clear: both;
		top: -24px;
		position: relative;
	}
	#demo3 .jScrollPresenterHeader a {
		color: #EEE;
		font-weight: 700;
		font-size: 2em;
		padding: 2px;
		text-decoration: none;
	}
	#demo3 .jScrollPresenterHeader a:hover, #demo3 .jScrollPresenterHeader a.selected {
		color: #789;
	}
</style>

<script type="text/javascript">
	$(document).ready(function() {
		$("#demo3").jScrollPresenter({
			scrollDelay: 4000
		});
	});
</script>

<div id="demo3">
	<div class="jScrollPresenterPlaceholder">
		<div id="panel-9">
			<p><img src="image1.jpg" alt="Sky" title="Sky" /></p>
		</div>
		<div id="panel-10">
			<p><img src="image2.jpg" alt="Sunset" title="Sunset" /></p>
		</div>
		<div id="panel-11">
			<p><img src="image3.jpg" alt="Money" title="Money" /></p>
		</div>
		<div id="panel-12">
			<p><img src="image4.jpg" alt="Prague" title="Prague" /></p>
		</div>
	</div>

	<div class="jScrollPresenterHeader">
		<a href="#panel-9">●</a>
		<a href="#panel-10">●</a>
		<a href="#panel-11">●</a>
		<a href="#panel-12">●</a>
	</div>
</div>
		

License

jScrollPresenter is licensed under the 2-clause BSD License. See the LICENSE file in the downloaded archive for further information.