jackyliang/Owl Carousel URL Hash Auto Update

## Owl Carousel URL Hash Auto Update
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <?php require_once("const.php"); ?>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Title Goes Here</title>
    <link rel="stylesheet" type="text/css" media="all" href="style.css">
    <link rel="stylesheet" type="text/css" media="all" href="owl-carousel/owl.carousel.css">
    <script src="jquery-1.11.2.js" type="text/javascript" charset="utf-8"></script>
    <script src="owl-carousel/owl.carousel.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="container">
    <div id="header">
        <img src="/images/banners/banner.png" alt="2015 Contest">
    </div>
    <div id="contestant-carousel">
        <br /><br /><br />
        <a href="landing.php" style="color:white;background-color:#B59400;width:60px;padding:10px;text-decoration: none;margin-left:70px;font-size:20pt">返回上页</a>
    <br /><br /><br /><br />
        <div id="poll-images" class="owl-carousel">
            <?php
                for($counter = 1; $counter <= 14; $counter++) {
                    echo "<div class='item' data-hash='$counter'><a href='" . HTTP_SERVER . "vote.php?contestant_id=$counter'><img src='/images/contestants_mobile/$counter.jpg' alt='$counter'></a></div>";
                }
            ?>
        </div>
    </div>
</div>
</body>
</html>

<script>
    $(document).ready(function() {
        var owl = $(".owl-carousel");

        owl.owlCarousel({
            items: 1,
            loop:false,
            center:true,
            margin:10,
            info:true,
            lazyLoad:false,
            URLhashListener:true,
            autoplayHoverPause:true,
            startPosition: 'URLHash'
        });

        // Listen to owl events:
        owl.on('changed.owl.carousel', function(event) {
            var currentItem = event.item.index;
            window.location.hash = currentItem + 1;
        })
    });
</script>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<?php require_once("const.php"); ?>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Title Goes Here</title>
	<link rel="stylesheet" type="text/css" media="all" href="style.css">
	<link rel="stylesheet" type="text/css" media="all" href="owl-carousel/owl.carousel.css">
	<script src="jquery-1.11.2.js" type="text/javascript" charset="utf-8"></script>
	<script src="owl-carousel/owl.carousel.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
	<div id="container">
	<div id="header">
	<img src="/images/banners/banner.png" alt="2015 Contest">
	</div>
	<div id="contestant-carousel">
	<br /><br /><br />
	<a href="landing.php" style="color:white;background-color:#B59400;width:60px;padding:10px;text-decoration: none;margin-left:70px;font-size:20pt">返回上页</a>
	<br /><br /><br /><br />
	<div id="poll-images" class="owl-carousel">
	<?php
	for($counter = 1; $counter <= 14; $counter++) {
	echo "<div class='item' data-hash='$counter'><a href='" . HTTP_SERVER . "vote.php?contestant_id=$counter'><img src='/images/contestants_mobile/$counter.jpg' alt='$counter'></a></div>";
	}
	?>
	</div>
	</div>
	</div>
	</body>
	</html>

	<script>
	$(document).ready(function() {
	var owl = $(".owl-carousel");

	owl.owlCarousel({
	items: 1,
	loop:false,
	center:true,
	margin:10,
	info:true,
	lazyLoad:false,
	URLhashListener:true,
	autoplayHoverPause:true,
	startPosition: 'URLHash'
	});

	// Listen to owl events:
	owl.on('changed.owl.carousel', function(event) {
	var currentItem = event.item.index;
	window.location.hash = currentItem + 1;
	})
	});
	</script>