Kung Fu Panda 2

In the Valley of Peace, Po Ping is revelling in his fulfilled dreams as he serves as the fabled Dragon Warrior protecting his home with his heroes now his closest friends. However, Po and company learn that the murderous Lord Shen of Gongman City is threatening the land with a fearsome new weapon that could mean the end of kung fu forever.

Read more
The Dark Knight

Batman raises the stakes in his war on crime. With the help of Lieutenant Jim Gordon and District Attorney Harvey Dent, Batman sets out to dismantle the remaining criminal organizations that plague the city streets. But they soon find themselves prey to a reign of chaos unleashed by a rising criminal mastermind known to the terrified citizens of Gotham as The Joker.

Read more
Hot Fuzz

Top London cop, PC Nicholas Angel is good. Too good. And to stop the rest of his team looking bad, he is reassigned to the quiet town of Sandford. Everything seems quiet for Angel, until two actors are found decapitated. It is called an accident, but Angel isn't going to accept that, especially when more and more people turn up dead.

Read more
Download

Version 0.94

Download the Slidorion now!

Slidorion was created by Ben Holland, student and part time web developer at Tidy Design. Follow me on Twitter or check out my blog.

Contribute or tell me about issues on GitHub

The Slidorion

A combination of an image slider and an accordion, the slidorion displays beautiful images along with a variable length description. With images linked to each tab, and accompanied by a large array of effects, the slidorion is a great alternative to the traditional jQuery slider.


NEW - Functionality has been added that supports multiple Slidorions on a single page. See demo

Usage

Import jQuery, jQuery UI and slidorion

<link rel="stylesheet" href="css/slidorion.css" />

<script src="js/jquery.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/jquery.slidorion.js"></script>

HTML Structure

<div id="slidorion">
	<div id="slider">
		<div class="slider-image" rel="section1">
			<img src="sample.jpg" width="500" height="400" />
		</div>
		<div class="slider-image" rel="section2">
			<img src="sample.jpg" width="500" height="400" />
		</div>
		<div class="slider-image" rel="section3">
			<img src="sample.jpg" width="500" height="400" />
		</div>
	</div>
	<div id="accordion">
		<div class="header"><a class="slider-link" rel="section1">Kung Fu Panda 2</a></div>
		<div class="content">
			<!-- CONTENT GOES HERE -->
		</div>
		<div class="header"><a class="slider-link" rel="section2">The Dark Knight</a></div>
		<div class="content">
			<!-- CONTENT GOES HERE -->
		</div>
		<div class="header"><a class="slider-link" rel="section3">Hot Fuzz</a></div>
		<div class="content">
			<!-- CONTENT GOES HERE -->
		</div>
	</div>
</div>

Basic Initialising

<script>
$(document).ready(function(){
	$('#slidorion').slidorion();
});
</script>

Initialising With Options

<script>
$(document).ready(function(){
	$('#slidorion').slidorion({
		speed: 1000,
		interval: 4000,
		effect: 'slideLeft'
	});
});
</script>

Options

Change Log

Version 0.94

Version 0.92

Version 0.91

Version 0.9