<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<title>touch event models</title>

<link rel="stylesheet" type="text/css" href="/public/js/jsor-jcarousel/skins/tango/skincollection.css" media="all" />
<link rel="stylesheet" type="text/css" href="/public/css/gallery2012.css" media="all" />
<link rel="stylesheet" type="text/css" href="/public/js/jquery.mobile-1.1.0/jquery.mobile-1.1.0.min.css" media="all" />
<link rel="stylesheet" type="text/css" href="/public/js/swipe/style.css" media="all" />


<script type="text/javascript" src="/public/js/jquery.js"></script>
<script type="text/javascript" src="/public/js/jquery.mobile.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="/public/js/Smooth-Div-Scroll/js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="/public/js/Smooth-Div-Scroll/js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="/public/js/Smooth-Div-Scroll/js/jquery.smoothDivScroll-1.2.js"></script>


<style type="text/css">
body{
	text-align: center;
}

div.scrollWrapper, div.scrollableArea{
	height: auto;
}

div.scrollableArea{
	margin-left: 0px;
}

#makeMeScrollable{
	width: 95%;
	padding-right: 0px;
}

.content{
	margin-top: 0px;
}

.swipe img{
	max-width: 250px;
	max-height: 80%;
}

#makeMeScrollable img{
	width: 50px;
	height: 50px;
}
</style>


<script type="text/javascript">
	var $j=jQuery.noConflict();

jQuery(document).ready(function() {
	$j('#makeMeScrollable').smoothDivScroll({
		visibleHotSpotBackgrounds: "always",
		manualContinuousScrolling: false
	});
	
	
});
</script>
</head>

<body>

<div class="wrapper">
<div class="content">
	
<div id='slider3' class='swipe'>
	<ul>
	<?$j=false;?>
	<?foreach($kepek as $kep):?>
		<?if( !is_dir($utvonal.$kep) ):?>
		<?if( $j==false ):?>
		 <li style='display:block'><div><img src="/<?=$utvonal?><?=$kep?>" alt="" /></div></li>
		 <?$j=true;?>
		<?else:?>
		 <li style='display:none'><div><img src="/<?=$utvonal?><?=$kep?>" alt="" /></div></li>
		<?endif;?>
		<?$j++;?>
		<?endif;?>
	<?endforeach;?>
	</ul>
</div>
	
</div>

<div class="footer">
    <footer>
	<nav>
    <div id="makeMeScrollable">
	<?$i=0;?>
	<?foreach($kepek as $kep):?>
		<?if( !is_dir($utvonal.$kep) ):?>
			<a href="#" onclick='slider4.slide(<?=$i?>);return false;'>
				<?if( file_exists( $utvonal."thumbs/".$kep ) ):?>
				<img src="/<?=$utvonal?>thumbs/<?=$kep?>" alt="" />
				<?else:?>
				<img src="/<?=$utvonal?><?=$kep?>" alt="" />
				<?endif;?>
			</a>
			<?$i++;?>
		<?endif;?>
	<?endforeach;?>
	</div>
	</nav>
    </footer>
</div>

<script type="text/javascript" src="/public/js/swipe/swipe.js"></script>
<script>
var slider4 = new Swipe(document.getElementById('slider3'));
</script>


</body>
</html>