Beautiful Image Banner scrolling horizontally

by etiennenoel

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://logicbox.net/jquery/simplyscroll/jquery.simplyscroll.min.js"></script>
    <div class="row-fluid">

            <ul id="scroller" class="span12 imageContainer" style="background-color:whitesmoke; height:300px;">
                <li class="imageBlock imageBlock1">
                    <img class="img img1" src="http://image.shutterstock.com/display_pic_with_logo/77318/109365194/stock-photo-green-apple-with-leaf-isolated-on-a-white-background-109365194.jpg"/> 
                    <img class="img img2" src="http://image.shutterstock.com/display_pic_with_logo/599431/127612211/stock-photo-green-apple-isolated-on-white-background-127612211.jpg" />
                    
                    <img class="img img3" src="http://image.shutterstock.com/display_pic_with_logo/507223/121073518/stock-photo-strawberries-121073518.jpg" />
                    
                    <img class="img img4" src="http://image.shutterstock.com/display_pic_with_logo/507223/101694889/stock-photo-flowering-fruit-trees-in-the-orchard-101694889.jpg" />
                    
                </li>
                <li class="imageBlock imageBlock2">
                    <img class="img img1" src="http://image.shutterstock.com/display_pic_with_logo/84610/84610,1328266003,5/stock-photo-people-two-couples-on-the-beach-having-party-drinking-and-having-a-lot-of-fun-in-the-sunset-94232548.jpg" />
                    
                    <img class="img img2" src="http://image.shutterstock.com/display_pic_with_logo/1057853/110204975/stock-photo-summer-moutain-with-green-plants-and-clouds-in-the-sky-110204975.jpg" />
                    
                    <img class="img img3"...

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
/*
 * simplyScroll 2 - a scroll-tastic jQuery plugin
 *
 * http://logicbox.net/jquery/simplyscroll
 * http://plugins.jquery.com/project/simplyScroll
 *
 * Copyright (c) 2009-2011 Will Kelly - http://logicbox.net
 *
 * Dual licensed under the MIT (MIT-LICENSE.txt)
 * and GPL (GPL-LICENSE.txt) licenses.
 *
 * Last revised: 31/01/2012
 *
 */

/* Default/Master classes 

Example markup format (for horizontal scroller)
Note all DIVs are generated and should not be hard-coded

<div class="your-custom-class simply-scroll-container">
	<div class="simply-scroll-btn simply-scroll-btn-left"></div>
	<div class="simply-scroll-btn simply-scroll-btn-right"></div>
	<div class="simply-scroll-clip">
		<ul class="simply-scroll-list">
			<li>...</li>
			...
		</ul>
	</div>
</div>


*/

.simply-scroll-container { /* Container DIV - automatically generated */
	position: relative;
}

	.simply-scroll-clip { /* Clip DIV - automatically generated */
		position: relative;
		overflow: hidden;
	}

	.simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
		overflow: hidden;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
		.simply-scroll-list li {
			padding: 0;
			margin: 0;
			list-style: none;
		}
	
		.simply-scroll-list li img {
			border: none;
			display: block;
		}
	
	.simply-scroll-btn {
		position: absolute;
		background-image: url(buttons.png);
		width: 42px;
		height: 44px;
		z-index:3;
		cursor: pointer;
	}
	
	.simply-scroll-btn-left {
		left: 6px;
		bottom: 6px;
		background-position: 0 -44px;
	}
	.simply-scroll-btn-left.disabled {
		background-position: 0 0 !important;
	}
	.simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus {
		background-position: 0 -88px;
	}
	
	.simply-scroll-btn-right {
		right: 6px;
		bottom: 6px;
		background-position: -84px -44px;
	}
	.simply-scroll-btn-right.disabled {
		background-position: -84px 0...

JavaScript

(function($) {
	$(function() { //on DOM ready 
    		$("#scroller").simplyScroll();
	});
 })(jQuery);

$('img').hover(function(evt) {
    $imageOverDiv = $('#imageOverDiv')
    
    var $this = $(this);
    var offset = $this.offset();
    var width = $this.width();
    var height = $this.height();
    
    var centerX = offset.left + width / 2;
    var centerY = offset.top + height / 2;
    
    
      $imageOverDiv.css({
        top: centerY,
        left: centerX
      }).show();
    
    $imageOverDiv.html('<img class="img-polaroid" src="' + $(this).attr('src') + '" />');
});

$('img').mouseout(function(evt) {
    $imageOverDiv = $('#imageOverDiv')
      $imageOverDiv.hide();
    });