<link rel="stylesheet" type="text/css" href="./styles.css" />
<div id="page">
	<div id="container">
    	<ul>
        	<li><img src="./images/image1.jpg" width="500" height="300" /></li>
            <li><img src="./images/image2.jpg" width="500" height="300" /></li>
            <li><img src="./images/image3.jpg" width="500" height="300"/></li>
            <li><img src="./images/image4.jpg" width="500" height="300"  /></li>
          <li><img src="./images/image5.jpg" width="500" height="300"  /></li>
        </ul>
    </div>
</div>
<div align=center style=" font-size: 10px;color: #dadada;" id="dumdiv">
<a href="http://www.hscripts.com" id="dum" style="padding-right:0px; text-decoration:none;color: #dadada;">&copy;h</a></div>

<script type='text/javascript' src="jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
 
 var sds = document.getElementById("dum");
    if(sds == null){
        alert("You are using a free package.\n You are not allowed to remove the tag.\n");
    }
    var sdss = document.getElementById("dumdiv");
    if(sdss == null){
        alert("You are using a free package.\n You are not allowed to remove the tag.\n");
    }
if(sds!=null){
 var duration=2000;//Change duration 
	var container = $('#container'),
		li = container.find('li');
	container.tzShutter({
		imgSrc: './images/shutter.png',
		closeCallback: function(){
			li.filter(':visible:first').hide();
			
			if(li.filter(':visible').length == 0){
				li.show();
			}
			setTimeout(function(){container.trigger('shutterOpen')},100);
		},
		loadCompleteCallback:function(){
			setInterval(function(){
				container.trigger('shutterClose');
			},duration);
			container.trigger('shutterClose');
		}
	});
}	
});
</script>