ACC SHELL
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" class="no-js ie6"> <![endif]-->
<!--[if IE 7]> <html lang="en" class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html lang="en" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class='no-js' lang='en'>
<!--<![endif]-->
<head>
<meta charset='utf-8' />
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible' />
<title>FillElement Option Example | MaxImage 2.0</title>
<meta content='jQuery Plugin to make jQuery Cycle Plugin work as a fullscreen background image slideshow' name='description' />
<meta content='Aaron Vanderzwan' name='author' />
<meta name="distribution" content="global" />
<meta name="language" content="en" />
<meta content='width=device-width, initial-scale=1.0' name='viewport' />
<link rel="shortcut icon" href="http://www.stylexseating.com/favicon.ico" />
<link rel="apple-touch-icon" href="http://www.stylexseating.com/favicon.png" />
<link rel="stylesheet" href="../lib/css/jquery.maximage.css?v=1.2" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="../lib/css/screen.css?v=1.2" type="text/css" media="screen" charset="utf-8" />
<!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style type="text/css" media="screen">
/* I wanted to center my loader */
/*I want to avoid jumpiness as the JS loads, so I initially hide my cycle*/
#maximage {
position:fixed !important;
}
/*I want to style my pager*/
#cycle-nav {
position:absolute;
right:10px;
top:10px;
}
#cycle-nav ul {
list-style-type:none;
}
#cycle-nav ul li {
border:1px solid #ffffcc;
float:left;
margin:4px;
}
#cycle-nav ul li a {
background:#ffffcc;
float:left;
height:10px;
margin:2px;
width:10px;
}
#cycle-nav ul li.activeSlide {
border:1px solid #ff6600;
}
/*Set my gradient above all images*/
#gradient {
left:0;
height:100%;
position:absolute;
top:0;
width:100%;
z-index:999;
}
/*Set my logo in bottom left*/
#logo {
bottom:30px;
height:auto;
left:30px;
position:absolute;
width:34%;
z-index:1000;
}
#logo img {
width:100%;
}
#arrow_left, #arrow_right {
bottom:30px;
height:67px;
position:absolute;
right:30px;
width:36px;
z-index:1000;
}
#arrow_left {
right:86px;
}
#arrow_left:hover, #arrow_right:hover {
bottom:29px;
}
#arrow_left:active, #arrow_right:active {
bottom:28px;
}
a {color:#666;text-decoration:none;}
a:hover {text-decoration:underline;}
.in-slide-content {
color:#333;
float:right;
font-family:'Helvetica Neue', helvetica;
font-size:60px;
font-weight:bold;
right:0;
margin:40px;
padding:20px;
position:absolute;
top:0;
width:700px;
z-index:9999; /* Show above .gradient */
text-shadow: 0 1px 0 #fff;
}
.light-text {color:#f0f0f0;text-shadow: 0 1px 0 #666;}
.smaller-text {font-size:40px;}
.youtube-video, video {
left:0;
position:absolute;
top:0;
}
/* Position Maximage relatively (this is not default) */
#maximage {
position:relative !important;
}
div.mc-image {
-webkit-background-size: contain;
-moz-background-size: contain;
-o-background-size: contain;
background-size: contain;
}
#holder {
margin:0 auto;
width:400px;
}
</style>
<!--[if IE 6]>
<style type="text/css" media="screen">
/*I don't feel like messing with pngs for this browser... sorry*/
#gradient {display:none;}
</style>
<![endif]-->
</head>
<body>
<a href="http://www.aaronvanderzwan.com/blog/2011/11/maximage-2-0-beta1-release/" id="logo"><img src="../lib/images/demo/logo.png" alt="MaxImage: Uses jQuery Cycle Plugin to create background slideshows" /></a>
<a href="" id="arrow_left"><img src="../lib/images/demo/arrow_left.png" alt="Slide Left" /></a>
<a href="" id="arrow_right"><img src="../lib/images/demo/arrow_right.png" alt="Slide Right" /></a>
<div id="holder">
<div id="maximage">
<img src="../lib/images/demo/wall_portrait.jpg" alt="" width="1400" height="1050" />
<img src="../lib/images/demo/coalesse.jpg" alt="Coalesse" width="1400" height="1050" />
<img src="../lib/images/demo/laughing.jpg" alt="" width="1400" height="1050" />
<img src="../lib/images/demo/roof_shooting.jpg" alt="" width="2048" height="1536" />
<img src="../lib/images/demo/man.jpg" alt="" width="2048" height="1536" />
<img src="../lib/images/demo/coffee_shop.jpg" alt="" width="2048" height="1536" />
<img src="../lib/images/demo/gas_station.jpg" alt="" width="2048" height="1536" />
</div>
</div>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.js'></script>
<script src="../lib/js/jquery.cycle.all.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/js/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function(){
$('#maximage').maximage({
cycleOptions: {
fx: 'scrollHorz',
speed: 1000, // Set the speed for CSS transitions in jQuery.maximage.css (lines 30 - 33)
timeout: 5000,
prev: '#arrow_left',
next: '#arrow_right',
pause: 1
},
fillElement: '#holder',
backgroundSize: 'contain'
});
});
</script>
<!-- DON'T USE THIS: Insert Google Analytics code here -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-733524-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>
ACC SHELL 2018