<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Fire</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" />
<link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="theme/supersized.shutter.min.js"></script>
<script type="text/javascript">
jQuery(function($){
$.supersized({
slideshow : 1, autoplay : 1, start_slide : 1,
stop_loop : 0,
random : 0,
slide_interval : 3000,
transition : 6, transition_speed : 10000, new_window : 1, pause_hover : 0, keyboard_nav : 1, performance : 1, image_protect : 1,
min_width : 0, min_height : 0, vertical_center : 1, horizontal_center : 1, fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
fit_portrait : 1, fit_landscape : 0,
slide_links : 'blank',
thumb_links : 1,
thumbnail_navigation : 0,
slides : [ // Slideshow Images
{image : "img/1.jpg", title : 'Zone-1', thumb : 'img/11.jpg'},
{image : 'img/2.jpg', title : 'Zone-2', thumb : 'img/22.jpg'},
{image : 'img/3.jpg', title : 'Zone-3', thumb : 'img/33.jpg'},
{image : 'img/4.jpg', title : 'Zone-4', thumb : 'img/44.jpg'},
{image : 'img/5.jpg', title : 'Zone-5', thumb : 'img/55.jpg'},
{image : 'img/6.jpg', title : 'Zone-6', thumb : 'img/66.jpg'},
{image : 'img/7.jpg', title : 'Zone-7', thumb : 'img/77.jpg'},
{image : 'img/8.jpg', title : 'Zone-8', thumb : 'img/88.jpg'},
{image : 'img/9.jpg', title : 'Zone-9', thumb : 'img/99.jpg'}
],
// Theme Options
progress_bar : 1, // Timer for each slide
mouse_scrub : 0
});
</script>
</head>
<style type="text/css">
ul#demo-block{ margin:0 15px 15px 15px; }
ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('img/bg-black.png'); font:11px Helvetica, Arial, sans-serif; }
ul#demo-block li a{ color:#eee; font-weight:bold; }
#gallery img{border:2px solid white;width: 96px;}
.activeborder img{border:2px solid #333 !important;}
#image
{
width: 590px;
}
</style>
<body>
<ul id="demo-block">
</ul>
<!--End of styles-->
<!--Thumbnail Navigation-->
<div id="prevthumb"></div>
<div id="nextthumb"></div>
<!--Arrow Navigation-->
<a id="prevslide" class="load-item"></a>
<a id="nextslide" class="load-item"></a>
<div id="thumb-tray" class="load-item">
<div id="thumb-back"></div>
<div id="thumb-forward"></div>
</div>
<!--Time Bar-->
<div id="progress-back" class="load-item">
<div id="progress-bar"></div>
<!--Control Bar-->
<div id="controls-wrapper" class="load-item">
<div id="controls">
<a id="play-button"><img id="pauseplay" src="img/pause.png"/></a>
<!--Slide counter-->
<div id="slidecounter">
<span class="slidenumber"></span> / <span class="totalslides"></span>
<!--Slide captions displayed here-->
<div id="slidecaption"></div>
<!--Thumb Tray button-->
<a id="tray-button"><img id="tray-arrow" src="img/button-tray-up.png"/></a>
<!--Navigation-->
<ul id="slide-list"></ul>
</body>
</html>