How to use

Exhibition.Horizontal.js use becomes as follows.

HTML

The mark putting of HTML becomes as follows.

    <div id="container">
        <ul id="exhibition">
            <li><a href="#"><img src="../Demos/images/home/img_tn1.jpg" width="152" height="228" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn2.jpg" width="218" height="147" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn3.jpg" width="154" height="191" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn4.jpg" width="167" height="233" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn5.jpg" width="301" height="187" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn6.jpg" width="167" height="221" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn7.jpg" width="251" height="167" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn8.jpg" width="182" height="213" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn9.jpg" width="249" height="178" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn10.jpg" width="159" height="238" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn1.jpg" width="152" height="228" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn2.jpg" width="218" height="147" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn3.jpg" width="154" height="191" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn4.jpg" width="167" height="233" /></a></li>
            <li><a href="#"><img src="../Demos/images/home/img_tn5.jpg" width="301" height="187" /></a></li>
        </ul>
    </div>

CSS

The description of CSS becomes as follows.

/* Exhibition
----------------------------------*/
ul#exhibition {
	overflow: hidden;
	list-style: none;
	position: relative;
}

ul#exhibition li {
	position: absolute;
}

ul#exhibition li a {
	display: block;
	padding: 10px;
	background: #333333;
}

ul#exhibition li a:hover {
	background: #3c94af;
}

ul#exhibition li.active a {
	background: #3c94af;
}

Javascript

Javascript is described at the end.

window.addEvent("domready", function() {
	var container = $("container");
	var exhibition = $("exhibition");

	var images = exhibition.getElements("li");
	new Exhibition.Horizontal(container, images, {});
});