Smooth Div Scroll

A fiddle with the basic setup for the jQuery plugin Smooth Div Scroll.

HTML

<script src="http://www.smoothdivscroll.com/js/jquery.mousewheel.min.js"></script>
<script src="http://www.smoothdivscroll.com/js/jquery-ui-1.8.23.custom.min.js"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.kinetic.js"></script>
<script src="http://www.smoothdivscroll.com/js/jquery.smoothdivscroll-1.3-min.js"></script>
<ul class="submenu_1" id="filter">
                                    <li><a href="">Alle</a></li>                                
                                    <li><a href="">Architektur</a></li>
									<li><a href="">Exterieur</a></li> 
									<li><a href="">Interieur</a></li> 									
                   				</ul>
<br />
<div id="makeMeScrollable">
    <img src="http://www.smoothdivscroll.com/images/demo/field.jpg" alt="Field" class="Architektur Exterieur" />
    <img src="http://www.smoothdivscroll.com/images/demo/gnome.jpg" alt="Gnome" class="Architektur Interieur" />
    <img src="http://www.smoothdivscroll.com/images/demo/pencils.jpg" alt="Pencils" class="Architektur Interieur" />
    <img src="http://www.smoothdivscroll.com/images/demo/golf.jpg" alt="Golf" class="Architektur Exterieur" />
    <img src="http://www.smoothdivscroll.com/images/demo/river.jpg" alt="River" class="Architektur Exterieur" />
    <img src="http://www.smoothdivscroll.com/images/demo/train.jpg" alt="Train" class="Architektur Exterieur" />
    <img src="http://www.smoothdivscroll.com/images/demo/leaf.jpg" alt="Leaf" class="Architektur Interieur" />
    <img src="http://www.smoothdivscroll.com/images/demo/dog.jpg" alt="Dog" class="Architektur Interieur" />
</div>

CSS

@import url(http://www.smoothdivscroll.com/css/smoothDivScroll.css);

#makeMeScrollable
{
    width:100%;
    height: 330px;
    position: relative;
    overflow: hidden;
}
        
#makeMeScrollable div.scrollableArea img {
    position: relative;
    float: left;
    margin: 0;
    padding: 0;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

JavaScript

//Scroll-----------------------
$(document).ready(function () {
	// None of the options are set
	$("div#makeMeScrollable").smoothDivScroll({
		autoScrollingMode: "onStart",
		manualContinuousScrolling: true,
		touchScrolling: true,
		scrollToEasingFunction: "easeOutCirc",
	});
});

//Filter-----------------------
$(document).ready(function() {
	$('ul#filter a').click(function() {
		$(this).css('outline','none');
		$('ul#filter .current').removeClass('current');
		$(this).parent().addClass('current');
		
		var filterVal = $(this).text().replace(' ','-');
				
		if(filterVal == 'alle') {
			$('#makeMeScrollable img.hidden').fadeIn('slow').removeClass('hidden');
		} else {
			
			$('#makeMeScrollable img').each(function() {
				if(!$(this).hasClass(filterVal)) {
					$(this).fadeOut('slow').addClass('hidden');
				} else {
					$(this).fadeIn('slow').removeClass('hidden');
						
				}				
			});					
		}		
		return false;
	});	
});