index2.html

﻿<!DOCTYPE html>
<html>
	<head>
		<title>iView&trade; v2.0</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="css/styles.css" />		<link rel="stylesheet" href="css/iview.css" />		<link rel="stylesheet" href="css/skin 2/style.css" />
		<script src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/raphael-min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.js"></script>
		<script src="js/iview.js"></script>
		<script>
			$(document).ready(function(){
				$('#iview').iView({
					pauseTime: 7000,
					pauseOnHover: true,
					directionNav: true,
					directionNavHide: false,
					directionNavHoverOpacity: 0,
					controlNav: false,
					nextLabel: "Nächste",
					previousLabel: "Vorherige",
					playLabel: "Spielen",
					pauseLabel: "Pause",
					timer: "360Bar",
					timerPadding: 3,
					timerColor: "#0F0"
				});
				$('#iview2').iView({
					pauseTime: 7000,
					pauseOnHover: true,
					directionNav: true,
					directionNavHide: false,
					controlNav: true,
					controlNavNextPrev: false,
					controlNavTooltip: false,
					nextLabel: "Próximo",
					previousLabel: "Anterior",
					playLabel: "Jugada",
					pauseLabel: "Pausa",
					timer: "360Bar",
					timerBg: "#EEE",
					timerColor: "#000",
					timerDiameter: 40,
					timerPadding: 4,
					timerStroke: 8,
					timerPosition: "bottom-right"
				});
			});
		</script>
	</head>

	<body>

<div id="cont">
		<div id="header">
			<div class="container">
				<h1><a href="<?=$siteurl?>">iView&trade;</a></h1>
      
				<div id="nav">
					<ul>
						<li><a href="index.html">Regular</a></li>
						<li class="active"><a href="index2.html">Multiple</a></li>
						<li><a href="index3.html">Regular with API</a></li>
						<li><a href="index4.html">Responsive</a></li>
						<li><a href="index5.html">Banner</a></li>
					</ul>
				</div>
			</div>
		</div>


	<div class="container">
		<div id="iview">
			<div data-iview:image="photos/photo6.jpg">
				<div class="iview-caption caption1" data-x="300" data-y="300" data-transition="expandLeft">EASY TO CONFIGURE AND CUSTOMIZE + COMPLETE WITH A CUSTOM API</div>
			</div>

			<div data-iview:image="photos/photo7.jpg">
				<div class="iview-caption video-caption" data-x="50" data-y="50" data-transition="wipeUp"><iframe src="http://player.vimeo.com/video/11475955?byline=1&amp;portrait=0" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
				<div class="iview-caption caption4" data-x="600" data-y="140" data-transition="wipeRight">Video</div>
				<div class="iview-caption caption5" data-x="740" data-y="145" data-transition="wipeLeft">Support</div>
				<div class="iview-caption caption3" data-x="600" data-y="200" data-width="235" data-height="40" data-transition="wipeLeft">You can easily add <b>Vimeo</b> & <b>Youtube Videos</b> to your <b>Slides</b> & <b>Captions</b></div>
			</div>

			<div data-iview:image="photos/photo8.jpg">
				<div class="iview-caption caption2" data-x="300" data-y="300" data-transition="wipeRight">OPTIONAL AUTO-HIDE CONTROLS + OPTIONAL ROLLOVER SLIDESHOW PAUSE</div>
			</div>

			<div data-iview:image="photos/photo9.jpg">
				<div class="iview-caption" data-x="100" data-y="300" data-transition="wipeLeft">A SMOOTH AND SEXY CROSS-BROWSER SLIDER FOR YOUR IMAGES & VIDEOS</div>
			</div>

			<div data-iview:image="photos/photo10.jpg">
				<div class="iview-caption caption3" data-x="100" data-y="300" data-transition="wipeLeft">FEATURING ANIMATED CAPTIONS WITH MANY TRANSITION EFFECTS</div>
			</div>
		</div>
		<div id="iview2">
			<div data-iview:image="photos/photo11.jpg">
				<div class="iview-caption caption1" data-x="100" data-y="300" data-transition="fade">FINE TUNED, SLEEK & SMOOTH, THIS SLIDER WILL IMPRESS YOUR VISITORS</div>
			</div>

			<div data-iview:image="photos/photo12.jpg">
				<div class="iview-caption caption2" data-x="50" data-y="320" data-transition="wipeRight">SUPPORTS ANIMATED CAPTIONS, VIDEO & IFRAME, SINGLE PAGE MULTI-USE</div>
			</div>

			<div data-iview:image="photos/photo13.jpg">
				<div class="iview-caption caption3" data-x="350" data-y="300" data-transition="wipeLeft">GORGEOUS ANIMATED TIMERS WITH HIGH CUSTOMIZABLE OPTIONS</div>
			</div>

			<div data-iview:image="photos/photo14.jpg"></div>
		</div>
	</div>


	<div class="copy">Made by <a href="http://iprodev.com/">Hemn Chawroka</a>.<br>Copyright &copy 2012. All rights reserved.</div>
</div>

<div id="background-image">
	<img src="img/bckg.jpg" width="1820" height="1024" />
</div>
<script type="text/javascript" src="js/jquery.fullscreen.js"></script>
<script type="text/javascript">
	$(document).ready(function () {
		$("#background-image").fullscreenBackground();
	});
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-30854466-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
	</body>
</html>