Website templates
269
interio/catalogue.html
Normal file
@@ -0,0 +1,269 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
|
||||
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
|
||||
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
|
||||
<script src="js/jcarousellite_1.0.1.js" type="text/javascript"></script>
|
||||
<script src="js/jquery.galleriffic.js" type="text/javascript"></script>
|
||||
<script src="js/jquery.opacityrollover.js" type="text/javascript"></script>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
$(".jCarouselLite").jCarouselLite({
|
||||
btnNext: ".next",
|
||||
btnPrev: ".prev",
|
||||
speed: 400,
|
||||
vertical: false,
|
||||
circular: true,
|
||||
easing:'easeOutQuart',
|
||||
visible: 4,
|
||||
start: 0,
|
||||
scroll: 1
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<!--[if lt IE 7]>
|
||||
<div style=' clear: both; text-align:center; position: relative;'>
|
||||
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
|
||||
</div>
|
||||
<![endif]-->
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="js/html5.js"></script>
|
||||
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body id="page3">
|
||||
<!--==============================header=================================-->
|
||||
<header>
|
||||
<div class="row-1">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="grid_12">
|
||||
<nav>
|
||||
<ul class="menu">
|
||||
<li><a href="index.html">About Us</a></li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a class="active" href="catalogue.html">Catalogue</a></li>
|
||||
<li><a href="pricing.html">Pricing</a></li>
|
||||
<li><a href="contacts.html">Contacts</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-2">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="grid_9">
|
||||
<h1>
|
||||
<a class="logo" href="index.html">Int<strong>e</strong>rior</a>
|
||||
<span>Design</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="grid_3">
|
||||
<form id="search-form" method="post" enctype="multipart/form-data">
|
||||
<fieldset>
|
||||
<div class="search-field">
|
||||
<input name="search" type="text" />
|
||||
<a class="search-button" href="#" onClick="document.getElementById('search-form').submit()"><span>search</span></a>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header><div class="ic">More Website Templates @ TemplateMonster.com - August22nd 2011!</div>
|
||||
|
||||
<!-- content -->
|
||||
<section id="content">
|
||||
<div class="bg-top">
|
||||
<div class="bg-top-2">
|
||||
<div class="bg">
|
||||
<div class="bg-top-shadow">
|
||||
<div class="main">
|
||||
<div class="gallery p3">
|
||||
<div class="wrapper indent-bot">
|
||||
<div id="gallery" class="content">
|
||||
<div class="wrapper">
|
||||
<div class="slideshow-container">
|
||||
<div id="slideshow" class="slideshow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="thumbs" class="navigation">
|
||||
<ul class="thumbs noscript">
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img1.jpg" title=""> <img src="images/thumb-1.jpg" alt="" /><span></span> </a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img2.jpg" title=""> <img src="images/thumb-2.jpg" alt="" /> <span></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img3.jpg" title=""> <img src="images/thumb-3.jpg" alt="" /> <span></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img4.jpg" title=""> <img src="images/thumb-4.jpg" alt="" /> <span></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img5.jpg" title=""> <img src="images/thumb-5.jpg" alt="" /> <span></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img6.jpg" title=""> <img src="images/thumb-6.jpg" alt="" /> <span></span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner-2">
|
||||
<div class="wrapper">
|
||||
<span class="title t2 img-indent3">2011</span>
|
||||
<div class="extra-wrap indent-top2">
|
||||
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam volup tatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel">
|
||||
<h3 class="color-1 p2">Projects Archive</h3>
|
||||
<a class="prev" href="#">Prev</a>
|
||||
<a class="next" href="#">Next</a>
|
||||
<div class="jCarouselLite">
|
||||
<ul id="carousel">
|
||||
<li><a href="#"><img src="images/page3-img1.jpg" alt="" /><span>2011</span></a></li>
|
||||
<li><a href="#"><img src="images/page3-img2.jpg" alt="" /><span>2010</span></a></li>
|
||||
<li><a href="#"><img src="images/page3-img3.jpg" alt="" /><span>2009</span></a></li>
|
||||
<li><a href="#"><img src="images/page3-img4.jpg" alt="" /><span>2008</span></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-bot">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<article class="grid_4">
|
||||
<div class="indent-right2">
|
||||
<h3 class="prev-indent-bot">Publications</h3>
|
||||
<p class="color-4 prev-indent-bot">At vero eos et accusamus et iusto odio dignissi tum deleniti atque corrupti quos</p>
|
||||
<p>Dolores et quas molestias excepturi sint occae cati cupiditate non provident, similique sunt in culpa qui officia deserunt.</p>
|
||||
<a class="button" href="#">View More</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="grid_4">
|
||||
<h3 class="p2">Art of Placement</h3>
|
||||
<div class="wrapper">
|
||||
<figure class="img-indent frame2"><img src="images/page3-img5.jpg" alt="" /></figure>
|
||||
<div class="extra-wrap">
|
||||
<p class="img-indent-bot">At vero eos eaccusa mus etusto odio tium voluptatum deleniti atque corrupti quos dolores et quas.</p>
|
||||
<a class="button" href="#">View More</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="grid_4">
|
||||
<h3 class="prev-indent-bot2">External Links</h3>
|
||||
<ul class="list-2">
|
||||
<li><a href="#">Totam rem aperiam eaque ipsa quae abillo</a></li>
|
||||
<li><a href="#">Inventore veritatis quasi architecto beatae vitae</a></li>
|
||||
<li><a href="#">Nemo enim ipsam voluptatem quia</a></li>
|
||||
<li><a href="#">Voluptas sit aspernatur aut odit aut fugit</a></li>
|
||||
<li><a href="#">Sed quia consequuntur magni dolores eos</a></li>
|
||||
<li class="last-item"><a href="#">Ratione voluptatem sequi nesciunt</a></li>
|
||||
</ul>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==============================footer=================================-->
|
||||
<footer>
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<div class="grid_4">
|
||||
<div>Interior Design © 2011 <a class="link color-3" href="#">Privacy Policy</a></div>
|
||||
<div><a rel="nofollow" target="_blank" href="http://www.templatemonster.com/">Website Template</a> by TemplateMonster.com | <a rel="nofollow" target="_blank" href="http://www.html5xcss3.com/">html5xcss3.com</a></div>
|
||||
<!-- {%FOOTER_LINK} -->
|
||||
</div>
|
||||
<div class="grid_4">
|
||||
<span class="phone-numb"><span>+1(800)</span> 123-1234</span>
|
||||
</div>
|
||||
<div class="grid_4">
|
||||
<ul class="list-services">
|
||||
<li><a href="#"></a></li>
|
||||
<li><a class="item-2" href="#"></a></li>
|
||||
<li><a class="item-3" href="#"></a></li>
|
||||
<li><a class="item-4" href="#"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="text/javascript">
|
||||
$(window).load(function() {
|
||||
// We only want these styles applied when javascript is enabled
|
||||
$('div.navigation').css({'width' : '320px', 'float' : 'right'});
|
||||
$('div.content').css('display', 'block');
|
||||
|
||||
// Initially set opacity on thumbs and add
|
||||
// additional styling for hover effect on thumbs
|
||||
var onMouseOutOpacity = 0.5;
|
||||
$('#thumbs ul.thumbs li span').opacityrollover({
|
||||
mouseOutOpacity: onMouseOutOpacity,
|
||||
mouseOverOpacity: 0.0,
|
||||
fadeSpeed: 'fast',
|
||||
exemptionSelector: '.selected'
|
||||
});
|
||||
|
||||
// Initialize Advanced Galleriffic Gallery
|
||||
var gallery = $('#thumbs').galleriffic({
|
||||
delay: 7000,
|
||||
numThumbs: 12,
|
||||
preloadAhead: 6,
|
||||
enableTopPager: false,
|
||||
enableBottomPager: false,
|
||||
imageContainerSel: '#slideshow',
|
||||
controlsContainerSel: '',
|
||||
captionContainerSel: '',
|
||||
loadingContainerSel: '',
|
||||
renderSSControls: true,
|
||||
renderNavControls: true,
|
||||
playLinkText: 'Play Slideshow',
|
||||
pauseLinkText: 'Pause Slideshow',
|
||||
prevLinkText: 'Prev',
|
||||
nextLinkText: 'Next',
|
||||
nextPageLinkText: 'Next',
|
||||
prevPageLinkText: 'Prev',
|
||||
enableHistory: true,
|
||||
autoStart: 7000,
|
||||
syncTransitions: true,
|
||||
defaultTransitionDuration: 900,
|
||||
onSlideChange: function(prevIndex, nextIndex) {
|
||||
// 'this' refers to the gallery, which is an extension of $('#thumbs')
|
||||
this.find('ul.thumbs li span')
|
||||
.css({opacity:0.5})
|
||||
},
|
||||
onPageTransitionOut: function(callback) {
|
||||
this.find('ul.thumbs li span').css({display:'block'});
|
||||
},
|
||||
onPageTransitionIn: function() {
|
||||
this.find('ul.thumbs li span').css({display:'none'});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
153
interio/contacts.html
Normal file
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
|
||||
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
|
||||
<!--[if lt IE 7]>
|
||||
<div style=' clear: both; text-align:center; position: relative;'>
|
||||
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
|
||||
</div>
|
||||
<![endif]-->
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="js/html5.js"></script>
|
||||
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body id="page5">
|
||||
<!--==============================header=================================-->
|
||||
<header>
|
||||
<div class="row-1">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="grid_12">
|
||||
<nav>
|
||||
<ul class="menu">
|
||||
<li><a href="index.html">About Us</a></li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a href="catalogue.html">Catalogue</a></li>
|
||||
<li><a href="pricing.html">Pricing</a></li>
|
||||
<li><a class="active" href="contacts.html">Contacts</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-2">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="grid_9">
|
||||
<h1>
|
||||
<a class="logo" href="index.html">Int<strong>e</strong>rior</a>
|
||||
<span>Design</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="grid_3">
|
||||
<form id="search-form" method="post" enctype="multipart/form-data">
|
||||
<fieldset>
|
||||
<div class="search-field">
|
||||
<input name="search" type="text" />
|
||||
<a class="search-button" href="#" onClick="document.getElementById('search-form').submit()"><span>search</span></a>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header><div class="ic">More Website Templates @ TemplateMonster.com - August22nd 2011!</div>
|
||||
|
||||
<!-- content -->
|
||||
<section id="content">
|
||||
<div class="bg-top">
|
||||
<div class="bg-top-2">
|
||||
<div class="bg">
|
||||
<div class="bg-top-shadow">
|
||||
<div class="main">
|
||||
<div class="box">
|
||||
<div class="padding">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<div class="grid_12">
|
||||
<div class="indent-left">
|
||||
<h3 class="p2">Contact Form</h3>
|
||||
<form id="contact-form" method="post" enctype="multipart/form-data">
|
||||
<fieldset>
|
||||
<label><span class="text-form">Name:</span><input name="p1" type="text" /></label>
|
||||
<label><span class="text-form">Email:</span><input name="p2" type="text" /></label>
|
||||
<label><span class="text-form">Phone:</span><input name="p3" type="text" /></label>
|
||||
<div class="wrapper"><div class="text-form">Message:</div><textarea></textarea></div>
|
||||
<div class="buttons">
|
||||
<a class="button" href="#" onClick="document.getElementById('contact-form').reset()">Clear</a>
|
||||
<a class="button" href="#" onClick="document.getElementById('contact-form').submit()">Send</a>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-bot">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<article class="grid_3">
|
||||
<h3 class="prev-indent-bot">Our Address</h3>
|
||||
<dl>
|
||||
<dt class="indent-bot">8901 Marmora Road,<br>Glasgow, D04 89GR.</dt>
|
||||
<dd><span>Freephone:</span> +1 800 559 6580</dd>
|
||||
<dd><span>Telephone:</span> +1 959 603 6035</dd>
|
||||
<dd><span>FAX:</span> +1 504 889 9898</dd>
|
||||
<dd><strong>E-mail:</strong> <a href="#">mail@demolink.org</a></dd>
|
||||
</dl>
|
||||
</article>
|
||||
<article class="grid_9">
|
||||
<h3 class="prev-indent-bot">Miscellaneous Info</h3>
|
||||
<strong>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</strong> sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus.
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==============================footer=================================-->
|
||||
<footer>
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<div class="grid_4">
|
||||
<div>Interior Design © 2011 <a class="link color-3" href="#">Privacy Policy</a></div>
|
||||
<div><a rel="nofollow" target="_blank" href="http://www.templatemonster.com/">Website Template</a> by TemplateMonster.com | <a rel="nofollow" target="_blank" href="http://www.html5xcss3.com/">html5xcss3.com</a></div>
|
||||
<!-- {%FOOTER_LINK} -->
|
||||
</div>
|
||||
<div class="grid_4">
|
||||
<span class="phone-numb"><span>+1(800)</span> 123-1234</span>
|
||||
</div>
|
||||
<div class="grid_4">
|
||||
<ul class="list-services">
|
||||
<li><a href="#"></a></li>
|
||||
<li><a class="item-2" href="#"></a></li>
|
||||
<li><a class="item-3" href="#"></a></li>
|
||||
<li><a class="item-4" href="#"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
338
interio/css/grid.css
Normal file
@@ -0,0 +1,338 @@
|
||||
/*
|
||||
Variable Grid System.
|
||||
Learn more ~ http://www.spry-soft.com/grids/
|
||||
Based on 960 Grid System - http://960.gs/
|
||||
|
||||
Licensed under GPL and MIT.
|
||||
*/
|
||||
|
||||
|
||||
/* Containers
|
||||
----------------------------------------------------------------------------------------------------*/
|
||||
.container_12 {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 960px;
|
||||
}
|
||||
|
||||
/* Grid >> Global
|
||||
----------------------------------------------------------------------------------------------------*/
|
||||
|
||||
.grid_1,
|
||||
.grid_2,
|
||||
.grid_3,
|
||||
.grid_4,
|
||||
.grid_5,
|
||||
.grid_6,
|
||||
.grid_7,
|
||||
.grid_8,
|
||||
.grid_9,
|
||||
.grid_10,
|
||||
.grid_11,
|
||||
.grid_12 {
|
||||
display:inline;
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-left: 10px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
/* Grid >> Children (Alpha ~ First, Omega ~ Last)
|
||||
----------------------------------------------------------------------------------------------------*/
|
||||
|
||||
.alpha {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.omega {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/* Grid >> 12 Columns
|
||||
----------------------------------------------------------------------------------------------------*/
|
||||
|
||||
.container_12 .grid_1 {
|
||||
width:60px;
|
||||
}
|
||||
|
||||
.container_12 .grid_2 {
|
||||
width:140px;
|
||||
}
|
||||
|
||||
.container_12 .grid_3 {
|
||||
width:220px;
|
||||
}
|
||||
|
||||
.container_12 .grid_4 {
|
||||
width:300px;
|
||||
}
|
||||
|
||||
.container_12 .grid_5 {
|
||||
width:380px;
|
||||
}
|
||||
|
||||
.container_12 .grid_6 {
|
||||
width:460px;
|
||||
}
|
||||
|
||||
.container_12 .grid_7 {
|
||||
width:540px;
|
||||
}
|
||||
|
||||
.container_12 .grid_8 {
|
||||
width:620px;
|
||||
}
|
||||
|
||||
.container_12 .grid_9 {
|
||||
width:700px;
|
||||
}
|
||||
|
||||
.container_12 .grid_10 {
|
||||
width:780px;
|
||||
}
|
||||
|
||||
.container_12 .grid_11 {
|
||||
width:860px;
|
||||
}
|
||||
|
||||
.container_12 .grid_12 {
|
||||
width:940px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Prefix Extra Space >> 12 Columns
|
||||
----------------------------------------------------------------------------------------------------*/
|
||||
|
||||
.container_12 .prefix_1 {
|
||||
padding-left:80px;
|
||||
}
|
||||
|
||||
.container_12 .prefix_2 {
|
||||
padding-left:160px;
|
||||
}
|
||||
|
||||
.container_12 .prefix_3 {
|
||||
padding-left:240px;
|
||||
}
|
||||
|
||||
.container_12 .prefix_4 {
|
||||
padding-left:320px;
|
||||
}
|
||||
|
||||
.container_12 .prefix_5 {
|
||||
padding-left:400px;
|
||||
}
|
||||
|
||||
.container_12 .prefix_6 {
|
||||
padding-left:480px;
|
||||
}
|
||||
|
||||
.container_12 .prefix_7 {
|
||||
padding-left:560px;
|
||||
}
|
||||
|
||||
.container_12 .prefix_8 {
|
||||
padding-left:640px;
|
||||
}
|
||||
|
||||
.container_12 .prefix_9 {
|
||||
padding-left:720px;
|
||||
}
|
||||
|
||||
.container_12 .prefix_10 {
|
||||
padding-left:800px;
|
||||
}
|
||||
|
||||
.container_12 .prefix_11 {
|
||||
padding-left:880px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Suffix Extra Space >> 12 Columns
|
||||
----------------------------------------------------------------------------------------------------*/
|
||||
|
||||
.container_12 .suffix_1 {
|
||||
padding-right:80px;
|
||||
}
|
||||
|
||||
.container_12 .suffix_2 {
|
||||
padding-right:160px;
|
||||
}
|
||||
|
||||
.container_12 .suffix_3 {
|
||||
padding-right:240px;
|
||||
}
|
||||
|
||||
.container_12 .suffix_4 {
|
||||
padding-right:320px;
|
||||
}
|
||||
|
||||
.container_12 .suffix_5 {
|
||||
padding-right:400px;
|
||||
}
|
||||
|
||||
.container_12 .suffix_6 {
|
||||
padding-right:480px;
|
||||
}
|
||||
|
||||
.container_12 .suffix_7 {
|
||||
padding-right:560px;
|
||||
}
|
||||
|
||||
.container_12 .suffix_8 {
|
||||
padding-right:640px;
|
||||
}
|
||||
|
||||
.container_12 .suffix_9 {
|
||||
padding-right:720px;
|
||||
}
|
||||
|
||||
.container_12 .suffix_10 {
|
||||
padding-right:800px;
|
||||
}
|
||||
|
||||
.container_12 .suffix_11 {
|
||||
padding-right:880px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Push Space >> 12 Columns
|
||||
----------------------------------------------------------------------------------------------------*/
|
||||
|
||||
.container_12 .push_1 {
|
||||
left:80px;
|
||||
}
|
||||
|
||||
.container_12 .push_2 {
|
||||
left:160px;
|
||||
}
|
||||
|
||||
.container_12 .push_3 {
|
||||
left:240px;
|
||||
}
|
||||
|
||||
.container_12 .push_4 {
|
||||
left:320px;
|
||||
}
|
||||
|
||||
.container_12 .push_5 {
|
||||
left:400px;
|
||||
}
|
||||
|
||||
.container_12 .push_6 {
|
||||
left:480px;
|
||||
}
|
||||
|
||||
.container_12 .push_7 {
|
||||
left:560px;
|
||||
}
|
||||
|
||||
.container_12 .push_8 {
|
||||
left:640px;
|
||||
}
|
||||
|
||||
.container_12 .push_9 {
|
||||
left:720px;
|
||||
}
|
||||
|
||||
.container_12 .push_10 {
|
||||
left:800px;
|
||||
}
|
||||
|
||||
.container_12 .push_11 {
|
||||
left:880px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Pull Space >> 12 Columns
|
||||
----------------------------------------------------------------------------------------------------*/
|
||||
|
||||
.container_12 .pull_1 {
|
||||
left:-80px;
|
||||
}
|
||||
|
||||
.container_12 .pull_2 {
|
||||
left:-160px;
|
||||
}
|
||||
|
||||
.container_12 .pull_3 {
|
||||
left:-240px;
|
||||
}
|
||||
|
||||
.container_12 .pull_4 {
|
||||
left:-320px;
|
||||
}
|
||||
|
||||
.container_12 .pull_5 {
|
||||
left:-400px;
|
||||
}
|
||||
|
||||
.container_12 .pull_6 {
|
||||
left:-480px;
|
||||
}
|
||||
|
||||
.container_12 .pull_7 {
|
||||
left:-560px;
|
||||
}
|
||||
|
||||
.container_12 .pull_8 {
|
||||
left:-640px;
|
||||
}
|
||||
|
||||
.container_12 .pull_9 {
|
||||
left:-720px;
|
||||
}
|
||||
|
||||
.container_12 .pull_10 {
|
||||
left:-800px;
|
||||
}
|
||||
|
||||
.container_12 .pull_11 {
|
||||
left:-880px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* Clear Floated Elements
|
||||
----------------------------------------------------------------------------------------------------*/
|
||||
|
||||
/* http://sonspring.com/journal/clearing-floats */
|
||||
|
||||
.clear {
|
||||
clear: both;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */
|
||||
|
||||
.clearfix:after {
|
||||
clear: both;
|
||||
content: ' ';
|
||||
display: block;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
visibility: hidden;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
* html .clearfix {
|
||||
height: 1%;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
display: block;
|
||||
}
|
||||
7
interio/css/ie.css
Normal file
@@ -0,0 +1,7 @@
|
||||
.gallery {behavior: url(js/PIE.htc); position:relative;}
|
||||
.box {behavior: url(js/PIE.htc); position:relative;}
|
||||
.frame {behavior: url(js/PIE.htc); position:relative;}
|
||||
#subscribe-form .subscribe-field {behavior: url(js/PIE.htc); position:relative;}
|
||||
|
||||
*+html .title {padding:0 21px 0 0;}
|
||||
*+html .title.t2 {padding:0 37px 0 0;}
|
||||
46
interio/css/reset.css
Normal file
@@ -0,0 +1,46 @@
|
||||
a, abbr, acronym, address, applet, article, aside, audio,
|
||||
b, blockquote, big, body,
|
||||
center, canvas, caption, cite, code, command,
|
||||
datalist, dd, del, details, dfn, dl, div, dt,
|
||||
em, embed,
|
||||
fieldset, figcaption, figure, font, footer, form,
|
||||
h1, h2, h3, h4, h5, h6, header, hgroup, html,
|
||||
i, iframe, img, ins,
|
||||
kbd,
|
||||
keygen,
|
||||
label, legend, li,
|
||||
meter,
|
||||
nav,
|
||||
object, ol, output,
|
||||
p, pre, progress,
|
||||
q,
|
||||
s, samp, section, small, span, source, strike, strong, sub, sup,
|
||||
table, tbody, tfoot, thead, th, tr, tdvideo, tt,
|
||||
u, ul,
|
||||
var{
|
||||
background: transparent;
|
||||
border: 0 none;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
vertical-align: top; }
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
table, table td {
|
||||
padding:0;
|
||||
border:none;
|
||||
border-collapse:collapse;
|
||||
}
|
||||
img {
|
||||
vertical-align:top;
|
||||
}
|
||||
embed {
|
||||
vertical-align:top;
|
||||
}
|
||||
202
interio/css/style.css
Normal file
@@ -0,0 +1,202 @@
|
||||
/* Getting the new tags to behave */
|
||||
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video {display:block}
|
||||
mark, rp, rt, ruby, summary, time {display:inline}
|
||||
/* Global properties ======================================================== */
|
||||
html {width:100%}
|
||||
body {font-family:Arial, Helvetica, sans-serif;font-size:100%;color:#262626;min-width:980px;background:#fff}
|
||||
.ic, .ic a {border:0;float:right;background:#fff;color:#f00;width:50%;line-height:10px;font-size:10px;margin:-220% 0 0 0;overflow:hidden;padding:0}
|
||||
.bg-top-shadow {width:100%; background:url(../images/bg-top-shadow.png) center bottom repeat-x; padding:40px 0 52px}
|
||||
#page3 .bg-top-shadow {padding:40px 0 35px}
|
||||
#page4 .bg-top-shadow {padding:40px 0 60px}
|
||||
#page5 .bg-top-shadow {padding:40px 0 62px}
|
||||
.bg-top {width:100%; background:url(../images/bg-top-tail.jpg) center top repeat-x}
|
||||
.bg-top-2 {width:100%; background:url(../images/bg-top-tail2.jpg) center top repeat-y}
|
||||
.bg {width:100%; background:url(../images/bg-top.jpg) center top no-repeat}
|
||||
.bg-bot {width:100%; background:url(../images/bg-bot-tail.gif) center top repeat-x #fff; padding:30px 0 55px}
|
||||
#page3 .bg-bot, #page4 .bg-bot {padding:30px 0 49px}
|
||||
.main {width:980px;padding:0;margin:0 auto;font-size:0.8125em;line-height:1.6153em}
|
||||
a {color:#ff9601; outline:none}
|
||||
a:hover {text-decoration:none}
|
||||
.col-1, .col-2 {float:left}
|
||||
.wrapper {width:100%; overflow:hidden; position:relative}
|
||||
.extra-wrap {overflow:hidden}
|
||||
p {margin-bottom:18px}
|
||||
.p0 {margin-bottom:0px}
|
||||
.p1 {margin-bottom:8px}
|
||||
.p2 {margin-bottom:15px}
|
||||
.p3 {margin-bottom:30px}
|
||||
.p4 {margin-bottom:40px}
|
||||
.p5 {margin-bottom:50px}
|
||||
.reg {text-transform:uppercase}
|
||||
.fleft {float:left}
|
||||
.fright {float:right}
|
||||
.alignright {text-align:right}
|
||||
.aligncenter {text-align:center}
|
||||
.it {font-style:italic}
|
||||
.letter {letter-spacing:-1px}
|
||||
.color-1 {color:#fff}
|
||||
.color-2 {color:#000}
|
||||
.color-3 {color:#262626}
|
||||
.color-4 {color:#ff9601}
|
||||
.frame {padding:10px;background:#fff;box-shadow: 3px 5px 8px rgba(0,0,0,0.70);-moz-box-shadow: 3px 5px 8px rgba(0,0,0,0.70);-webkit-box-shadow: 3px 5px 8px rgba(0,0,0,0.70)}
|
||||
.frame2 {padding:9px;background:#fff;border:1px solid #e5e5e5}
|
||||
/*********************************boxes**********************************/
|
||||
.margin-bot {margin-bottom:35px}
|
||||
.spacing {margin-right:35px}
|
||||
.indent-top {padding-top:13px}
|
||||
.indent-top2 {padding-top:4px}
|
||||
.indent-right {padding-right:30px}
|
||||
.indent-right2 {padding-right:10px}
|
||||
.indent-left {padding-left:30px}
|
||||
.indent {padding:0 10px 0 30px}
|
||||
.indent2 {padding-left:50px}
|
||||
.indent3 {padding:0 15px}
|
||||
.indent-bot {margin-bottom:20px}
|
||||
.indent-bot2 {margin-bottom:30px}
|
||||
.indent-bot3 {margin-bottom:45px}
|
||||
.inner {padding:0 55px 0 28px}
|
||||
.inner-2 {padding:0 45px 0 42px}
|
||||
.img-indent-bot {margin-bottom:25px}
|
||||
.img-indent {float:left; margin:0 22px 8px 0}
|
||||
.img-indent2 {float:left; margin:0 30px 0px 0}
|
||||
.img-indent3 {float:left; margin:0 23px 0px 0}
|
||||
.img-indent-r {float:right; margin:0 0px 0px 40px}
|
||||
.prev-indent-bot {margin-bottom:10px}
|
||||
.prev-indent-bot2 {margin-bottom:5px}
|
||||
.buttons a:hover {cursor:pointer}
|
||||
.menu li a, .list-1 li a, .list-2 li a, .link, .button, .logo {text-decoration:none}
|
||||
/*********************************header*************************************/
|
||||
header {width:100%;position:relative;z-index:2}
|
||||
.row-1 {width:100%;height:71px;background:url(../images/row1-top-tail.gif) left top repeat-x}
|
||||
.row-2 {width:100%;min-height:101px;background:url(../images/row2-tail.gif) left top repeat-x #fff}
|
||||
h1 {padding:15px 0 0 0;position:relative;font-weight:normal;text-transform:uppercase;margin-left:-4px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif}
|
||||
h1 span {display:inline-block; font-size:28px; line-height:1.2em; color:#949494; letter-spacing:-1px; padding:29px 0 0 4px}
|
||||
.logo {display:inline-block;font-size:60px;line-height:1.2em;;color:#262626;cursor:pointer;letter-spacing:-3px}
|
||||
.logo strong {color:#ff9601; font-weight:normal}
|
||||
/***** menu *****/
|
||||
.menu {padding:0;width:100%}
|
||||
.menu li {float:left;position:relative}
|
||||
.menu li:first-child {background:url(../images/menu-a-tail.gif) 0 -71px no-repeat}
|
||||
.menu li a {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;display:block;width:188px;font-size:21px;line-height:1.238em;padding:21px 0 24px 0;color:#262626;text-align:center;text-transform:uppercase;background:url(../images/menu-a-tail.gif) right -71px no-repeat;letter-spacing:-1px}
|
||||
.menu li a:hover,
|
||||
.menu li a.active {color:#fff;background-position:left top;background-repeat:repeat-x;background-color:#000}
|
||||
/***** search form *****/
|
||||
#search-form {padding:35px 0px 0 37px}
|
||||
#search-form fieldset {position:relative; width:100%; display:block; overflow:hidden}
|
||||
#search-form .search-field {width:181px;height:29px;background:url(../images/search-input-tail.gif) 0 0 repeat-x;border:1px solid #d7d7d7}
|
||||
#search-form input {width:137px;font-size:13px;line-height:1.23em;padding:6px 10px 7px;font-family:Arial, Helvetica, sans-serif;background:none;border:none;margin:0;outline:none}
|
||||
#search-form .search-button {display:block;width:17px;height:16px;text-indent:-5000px;background:url(../images/search-icon.gif) 0 0 no-repeat;position:absolute;right:8px;top:7px}
|
||||
/*********************************content*************************************/
|
||||
#content {width:100%;padding:0;position:relative;z-index:1}
|
||||
.gallery {padding:20px 0 26px 20px;background:#fff;box-shadow: 0px 5px 8px rgba(0,0,0,0.70);-moz-box-shadow: 0px 5px 8px rgba(0,0,0,0.70);-webkit-box-shadow: 0px 5px 8px rgba(0,0,0,0.70)}
|
||||
.padding {padding:30px 0px 38px}
|
||||
/* -- gallery begin --*/
|
||||
div.content {/* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
|
||||
display: none;width: 620px;height: 403px;margin: 0;padding: 0px;float: left;overflow: hidden}
|
||||
div.content img {position: relative;z-index: 2}
|
||||
div.content a, div.navigation a {text-decoration: none;display:block;position:relative;cursor:pointer}
|
||||
div.content a img, div.navigation a img {position:relative; z-index:1}
|
||||
div.content a span, div.navigation a span {display:block; width:140px; height:121px; background:#000; position:absolute; left:0; top:0; z-index:2}
|
||||
div.content a span.selected,
|
||||
div.navigation a span.selected {display:none !important}
|
||||
div.content a:focus, div.content a:hover, div.content a:active {text-decoration: underline}
|
||||
div.controls {}
|
||||
div.controls a {padding: 0px}
|
||||
div.ss-controls {float: left;display:none}
|
||||
div.nav-controls {position:absolute;left:0px;width:596px;bottom:0px;z-index: 1}
|
||||
div.nav-controls a.prev {background:url(../images/prev.gif) no-repeat 0 0;width:39px;height:39px;text-indent:-5000px;position:absolute;bottom:2px;left:0;z-index:11}
|
||||
div.nav-controls a.prev:hover {background:url(../images/prev-h.gif) no-repeat 0 0}
|
||||
div.nav-controls a.next {background:url(../images/next.gif) no-repeat 0 0;width:39px;height:39px;text-indent:-5000px;position:absolute;bottom:2px;right:0;z-index:11}
|
||||
div.nav-controls a.next:hover {background:url(../images/next-h.gif) no-repeat 0 0}
|
||||
div.slideshow-container {position: relative;height: 403px; /* This should be set to be at least the height of the largest image in the slideshow */z-index:1}
|
||||
div.loader {position: absolute;top: 0;left: 0;background-image:url(images/loader.gif);background-repeat: no-repeat;background-position: center;width: 592px;height: 470px; /* This should be set to be at least the height of the largest image in the slideshow */}
|
||||
div.slideshow {}
|
||||
div.slideshow span.image-wrapper {display: block;width: 620px;height: 403px;position:absolute;left:0;top:0}
|
||||
div.slideshow a.advance-link {display: block;width: 620px;height: 403px; /* This should be set to be at least the height of the largest image in the slideshow */ padding: 0;margin: 0}
|
||||
div.slideshow a.advance-link img {padding:0;margin:0;display:block;position:absolute;left:0;top:0}
|
||||
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {text-decoration: none}
|
||||
div.slideshow img {}
|
||||
div.download {float: right}
|
||||
div.caption-container {position: absolute;top: 0;left: 0;width: 596px;height: 151px}
|
||||
span.image-caption {display: block;position: absolute;width: 596px;height: 151px;top: 0;left: 0;z-index:10}
|
||||
div.caption {width: 536px;height: 128px;padding: 23px 30px 0 30px;line-height: 18px;font-size: 13px;color: #fff}
|
||||
div.caption h5{line-height: 18px;font-size: 13px;color: #fd003f;text-transform:uppercase;font-weight:bold;text-decoration:none}
|
||||
div.caption h6{line-height: 18px;font-size: 13px;color: #fff;font-weight:normal;margin: 0 0 18px 0}
|
||||
div.image-title {}
|
||||
div.image-desc {}
|
||||
div.navigation {}
|
||||
div#thumbs {width: 320px;height:403px;overflow: hidden;padding: 0px 0px 0 0}
|
||||
ul.thumbs {float: right;margin-left:0;padding: 0;width:320px;height:auto;overflow:visible}
|
||||
ul.thumbs li {height: 121px;float:left;margin: 0 20px 20px 0;overflow: hidden;padding: 0;vertical-align:top}
|
||||
ul.thumbs li img {border: none}
|
||||
a.thumb:focus {outline: none}
|
||||
div.pagination {clear: both;text-align:center;position:relative;z-index:10}
|
||||
div.top.pagination {display:none}
|
||||
div.navigation div.bottom { display:none}
|
||||
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {padding:0 4px;font-weight:bold;color:#fff}
|
||||
div.pagination a:hover {text-decoration: none;color:#ffeaa8}
|
||||
div.pagination span.current {color:#ffeaa8}
|
||||
div.pagination span.ellipsis {border: none;padding: 5px 0 3px 2px}
|
||||
/* -- gallery end --*/
|
||||
.quote {padding-left:30px;background:url(../images/quote.png) 0 3px no-repeat;position:relative}
|
||||
.spacer-1 {width:100%;background:url(../images/pic-1.gif) 217px 0 repeat-y}
|
||||
h3 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:36px;line-height:1.2em;margin:0 0 22px 0;color:#262626;font-weight:normal;letter-spacing:-2px}
|
||||
h6 {color:#ff9601}
|
||||
.title {display:inline-block;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:49px;line-height:71px;text-transform:uppercase;letter-spacing:-3px;color:#ff9601;padding:0 25px 0 0;background:url(../images/pic-2.gif) right 0 repeat-y}
|
||||
.title.t2 {font-size:60px; line-height:1.3em; padding:0 40px 0 0; background:url(../images/pic-3.gif) right 0 no-repeat}
|
||||
.tdate-1 {display:block;font-weight:bold}
|
||||
.border-bot {width:100%;padding-bottom:20px;background:url(../images/pic-1.gif) 0 bottom repeat-x}
|
||||
.box {width:100%;background:#fff;box-shadow: 0px 5px 8px rgba(0,0,0,0.70);-moz-box-shadow: 0px 5px 8px rgba(0,0,0,0.70);-webkit-box-shadow: 0px 5px 8px rgba(0,0,0,0.70)}
|
||||
.button {display:inline-block;padding:10px 20px 11px;color:#fff;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:18px;line-height:1.22em;background:url(../images/button-tail.gif) 0 0 repeat-x #000;text-transform:uppercase;letter-spacing:-1px}
|
||||
.button:hover {background:#ff9601}
|
||||
.list-1 li {display:inline-block;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:21px;line-height:26px;padding:0 0 10px 12px;background:url(../images/marker.png) 0 12px no-repeat;letter-spacing:-1px}
|
||||
.list-1 li.last {padding:0 0 0 12px}
|
||||
.list-1 li a:hover {color:#fff}
|
||||
.list-2 li {line-height:1.23em;padding:8px 0;background:url(../images/pic-1.gif) 0 bottom repeat-x}
|
||||
.list-2 li a {display:inline-block; color:#262626; padding-left:10px; background:url(../images/marker-2.gif) 0 6px no-repeat}
|
||||
.list-2 li a:hover {color:#ff9601}
|
||||
.list-2 .last-item {background:none}
|
||||
.price-list li {width: 100%;overflow: hidden;vertical-align: top;line-height: 1.23em;padding:7px 0 9px;color: #262626;background:url(../images/pic-1.gif) 0 bottom repeat-x}
|
||||
.price-list li.last {background:none}
|
||||
.price-list li strong {background: url(../images/pic-4.gif) 0% 12px repeat-x; display: block; overflow: hidden}
|
||||
.price-list li span {float: right; color: #262626}
|
||||
.price-list li a {float: left; text-decoration: none; color: #262626; padding-left:10px; background:url(../images/marker-2.gif) 0 5px no-repeat}
|
||||
.price-list li a:hover {color:#ff9601}
|
||||
.link:hover {text-decoration:underline}
|
||||
.link-1 {display:inline-block;font-size:14px;padding-right:8px;background:url(../images/marker-3.gif) right 8px no-repeat}
|
||||
.link-1:hover {color:#fff}
|
||||
.text-1 {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:21px;line-height:30px;color:#ff9601;display:block;letter-spacing:-1px}
|
||||
.price {display:inline-block;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;font-size:35px;line-height:1.2em;letter-spacing:-2px}
|
||||
dl span {float:left; width:93px}
|
||||
dl strong {float:left; width:80px; font-weight:normal}
|
||||
/***** carousel-style *****/
|
||||
.carousel {margin: 0 auto;width:940px;height:229px;overflow:hidden;position:relative}
|
||||
.carousel .next {display:block;height:22px;width:11px;position:absolute;right:0px;top:14px;background:url(../images/carousel-control.png) right top no-repeat;text-indent:-5000px}
|
||||
.carousel .prev {display:block;height:22px;width:11px;position:absolute;right:31px;top:14px;background:url(../images/carousel-control.png) left top no-repeat;text-indent:-5000px}
|
||||
.jCarouselLite {left:-12px !important}
|
||||
#carousel li {width:200px !important;height:121px !important;padding:17px 22px 27px;margin-right:-4px;background:url(../images/carousel-li-bg.png) left top no-repeat;position:relative;overflow:hidden}
|
||||
#carousel li a {display:block; position:relative}
|
||||
#carousel li a span {font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; letter-spacing:-2px; display:block; width:78px; height:35px; background:#fff; color:#262626; font-size:35px; line-height:1.2em; position:absolute; left:0; bottom:0; overflow:hidden; z-index:99}
|
||||
/***** subscribe form *****/
|
||||
#subscribe-form {display:block}
|
||||
#subscribe-form .subscribe-field {background:#fbfbfb;border:1px solid #fff;width:288px;height:29px;margin-bottom:20px;box-shadow: 0px 5px 8px rgba(0,0,0,0.70);-moz-box-shadow: 0px 5px 8px rgba(0,0,0,0.70);-webkit-box-shadow: 0px 5px 8px rgba(0,0,0,0.70)}
|
||||
#subscribe-form input {width:268px;font-size:13px;line-height:1.23em;color:#262626;padding:6px 10px;margin:0;font-family:Arial, Helvetica, sans-serif;border:none;background:none;outline:none}
|
||||
/***** Contact form *****/
|
||||
#contact-form {display:block}
|
||||
#contact-form label {display:block;height:40px;overflow:hidden}
|
||||
#contact-form input {float:left;width:406px;font-size:13px;line-height:1.23em;color:#262626;padding:6px 10px;margin:0;font-family:Arial, Helvetica, sans-serif;border:1px solid #d9d9d9;background:#fcfcfc;outline:none}
|
||||
#contact-form textarea {float:left;height:192px;overflow:auto;width:776px;font-size:13px;line-height:1.23em;color:#404040;padding:6px 10px;margin:0;font-family:Arial, Helvetica, sans-serif;border:1px solid #d9d9d9;background:#fcfcfc;outline:none}
|
||||
.text-form {float:left;display:block;font-size:13px;line-height:1.23em;width:81px;color:#262626;font-family:Arial, Helvetica, sans-serif;padding-top:3px}
|
||||
.buttons {padding:18px 30px 0 0; text-align:right}
|
||||
.buttons a {margin-left:10px; padding:10px 42px 11px}
|
||||
/****************************footer************************/
|
||||
footer {width:100%;padding:40px 0 33px;background:url(../images/footer-tail.gif) center top repeat-x #fff}
|
||||
.phone-numb {display:inline-block;font-size:42px;line-height:1.2em;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;letter-spacing:-1px;margin-top:-4px}
|
||||
.phone-numb span {display:inline-block; font-size:28px; color:#949494; padding-top:3px}
|
||||
.list-services {padding:0}
|
||||
.list-services li {float:left; padding:0 0 0 20px}
|
||||
.list-services li:first-child {padding:0}
|
||||
.list-services li a { display:block;width:60px;height:45px;background:url(../images/social-icons.png) left top no-repeat; }
|
||||
.list-services li a.item-2 {background-position:-80px 0}
|
||||
.list-services li a.item-3 {background-position:-160px 0}
|
||||
.list-services li a.item-4 {background-position:-240px 0}
|
||||
BIN
interio/images/bg-bot-tail.gif
Normal file
|
After Width: | Height: | Size: 203 B |
BIN
interio/images/bg-top-shadow.png
Normal file
|
After Width: | Height: | Size: 155 B |
BIN
interio/images/bg-top-tail.jpg
Normal file
|
After Width: | Height: | Size: 8.3 KiB |
BIN
interio/images/bg-top-tail2.jpg
Normal file
|
After Width: | Height: | Size: 42 KiB |
BIN
interio/images/bg-top.jpg
Normal file
|
After Width: | Height: | Size: 540 KiB |
BIN
interio/images/button-tail.gif
Normal file
|
After Width: | Height: | Size: 267 B |
BIN
interio/images/carousel-control.png
Normal file
|
After Width: | Height: | Size: 213 B |
BIN
interio/images/carousel-li-bg.png
Normal file
|
After Width: | Height: | Size: 1.5 KiB |
BIN
interio/images/footer-tail.gif
Normal file
|
After Width: | Height: | Size: 213 B |
BIN
interio/images/gallery-img1.jpg
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
interio/images/gallery-img2.jpg
Normal file
|
After Width: | Height: | Size: 112 KiB |
BIN
interio/images/gallery-img3.jpg
Normal file
|
After Width: | Height: | Size: 117 KiB |
BIN
interio/images/gallery-img4.jpg
Normal file
|
After Width: | Height: | Size: 137 KiB |
BIN
interio/images/gallery-img5.jpg
Normal file
|
After Width: | Height: | Size: 77 KiB |
BIN
interio/images/gallery-img6.jpg
Normal file
|
After Width: | Height: | Size: 132 KiB |
BIN
interio/images/marker-2.gif
Normal file
|
After Width: | Height: | Size: 46 B |
BIN
interio/images/marker.png
Normal file
|
After Width: | Height: | Size: 150 B |
BIN
interio/images/menu-a-tail.gif
Normal file
|
After Width: | Height: | Size: 350 B |
BIN
interio/images/page1-img1.jpg
Normal file
|
After Width: | Height: | Size: 25 KiB |
BIN
interio/images/page1-img2.jpg
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
interio/images/page2-img1.jpg
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
interio/images/page2-img2.jpg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
interio/images/page3-img1.jpg
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
interio/images/page3-img2.jpg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
interio/images/page3-img3.jpg
Normal file
|
After Width: | Height: | Size: 8.3 KiB |
BIN
interio/images/page3-img4.jpg
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
interio/images/page3-img5.jpg
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
interio/images/page4-img1.jpg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
interio/images/page4-img2.jpg
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
interio/images/page4-img3.jpg
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
interio/images/page4-img4.jpg
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
interio/images/page4-img5.jpg
Normal file
|
After Width: | Height: | Size: 14 KiB |
BIN
interio/images/page4-img6.jpg
Normal file
|
After Width: | Height: | Size: 12 KiB |
BIN
interio/images/page4-img7.jpg
Normal file
|
After Width: | Height: | Size: 8.4 KiB |
BIN
interio/images/pic-1.gif
Normal file
|
After Width: | Height: | Size: 43 B |
BIN
interio/images/pic-2.gif
Normal file
|
After Width: | Height: | Size: 43 B |
BIN
interio/images/pic-3.gif
Normal file
|
After Width: | Height: | Size: 176 B |
BIN
interio/images/pic-4.gif
Normal file
|
After Width: | Height: | Size: 43 B |
BIN
interio/images/quote.png
Normal file
|
After Width: | Height: | Size: 332 B |
BIN
interio/images/row1-top-tail.gif
Normal file
|
After Width: | Height: | Size: 113 B |
BIN
interio/images/row2-tail.gif
Normal file
|
After Width: | Height: | Size: 118 B |
BIN
interio/images/search-icon.gif
Normal file
|
After Width: | Height: | Size: 366 B |
BIN
interio/images/search-input-tail.gif
Normal file
|
After Width: | Height: | Size: 55 B |
BIN
interio/images/social-icons.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
interio/images/thumb-1.jpg
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
interio/images/thumb-2.jpg
Normal file
|
After Width: | Height: | Size: 9.8 KiB |
BIN
interio/images/thumb-3.jpg
Normal file
|
After Width: | Height: | Size: 8.0 KiB |
BIN
interio/images/thumb-4.jpg
Normal file
|
After Width: | Height: | Size: 13 KiB |
BIN
interio/images/thumb-5.jpg
Normal file
|
After Width: | Height: | Size: 8.6 KiB |
BIN
interio/images/thumb-6.jpg
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
interio/images/thumb.png
Normal file
|
After Width: | Height: | Size: 328 B |
263
interio/index.html
Normal file
@@ -0,0 +1,263 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
|
||||
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
|
||||
<script src="js/jquery.galleriffic.js" type="text/javascript"></script>
|
||||
<script src="js/jquery.opacityrollover.js" type="text/javascript"></script>
|
||||
<!--[if lt IE 7]>
|
||||
<div style=' clear: both; text-align:center; position: relative;'>
|
||||
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
|
||||
</div>
|
||||
<![endif]-->
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="js/html5.js"></script>
|
||||
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body id="page1">
|
||||
<!--==============================header=================================-->
|
||||
<header>
|
||||
<div class="row-1">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="grid_12">
|
||||
<nav>
|
||||
<ul class="menu">
|
||||
<li><a class="active" href="index.html">About Us</a></li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a href="catalogue.html">Catalogue</a></li>
|
||||
<li><a href="pricing.html">Pricing</a></li>
|
||||
<li><a href="contacts.html">Contacts</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-2">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="grid_9">
|
||||
<h1>
|
||||
<a class="logo" href="index.html">Int<strong>e</strong>rior</a>
|
||||
<span>Design</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="grid_3">
|
||||
<form id="search-form" method="post" enctype="multipart/form-data">
|
||||
<fieldset>
|
||||
<div class="search-field">
|
||||
<input name="search" type="text" />
|
||||
<a class="search-button" href="#" onClick="document.getElementById('search-form').submit()"><span>search</span></a>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header><div class="ic">More Website Templates @ TemplateMonster.com - August22nd 2011!</div>
|
||||
|
||||
<!-- content -->
|
||||
<section id="content">
|
||||
<div class="bg-top">
|
||||
<div class="bg-top-2">
|
||||
<div class="bg">
|
||||
<div class="bg-top-shadow">
|
||||
<div class="main">
|
||||
<div class="gallery p3">
|
||||
<div class="wrapper indent-bot">
|
||||
<div id="gallery" class="content">
|
||||
<div class="wrapper">
|
||||
<div class="slideshow-container">
|
||||
<div id="slideshow" class="slideshow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="thumbs" class="navigation">
|
||||
<ul class="thumbs noscript">
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img1.jpg" title=""> <img src="images/thumb-1.jpg" alt="" /><span></span> </a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img2.jpg" title=""> <img src="images/thumb-2.jpg" alt="" /> <span></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img3.jpg" title=""> <img src="images/thumb-3.jpg" alt="" /> <span></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img4.jpg" title=""> <img src="images/thumb-4.jpg" alt="" /> <span></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img5.jpg" title=""> <img src="images/thumb-5.jpg" alt="" /> <span></span></a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="thumb" href="images/gallery-img6.jpg" title=""> <img src="images/thumb-6.jpg" alt="" /> <span></span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="inner">
|
||||
<div class="wrapper">
|
||||
<span class="title img-indent3">HELLO!</span>
|
||||
<div class="extra-wrap indent-top2">
|
||||
<strong>Interior Design</strong> is one of <a target="_blank" href="http://blog.templatemonster.com/free-website-templates/ ">free website templates</a> created by TemplateMonster.com team. This website template is opti mized for 1024X768 screen resolution. It is also XHTML & CSS valid. It has several pages: <a class="color-3" href="index.html">About</a>, <a class="color-3" href="services.html">Services</a>, <a class="color-3" href="catalogue.html">Catalogue</a>, <a class="color-3" href="pricing.html">Pricing</a>, <a class="color-3" href="contacts.html">Contact Us</a> (note that contact us form – doesn’t work).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<article class="grid_12">
|
||||
<h3 class="color-1">Our Services List</h3>
|
||||
<div class="wrapper">
|
||||
<article class="grid_6 alpha">
|
||||
<figure class="img-indent frame"><img src="images/page1-img1.jpg" alt="" /></figure>
|
||||
<div class="extra-wrap">
|
||||
<div class="indent-top">
|
||||
<ul class="list-1">
|
||||
<li><a href="#">Interior Decorating Services</a></li>
|
||||
<li class="last"><a href="#">Complete Color <br>Analysis</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</article>
|
||||
<article class="grid_6 omega">
|
||||
<figure class="img-indent frame"><img src="images/page1-img2.jpg" alt="" /></figure>
|
||||
<div class="extra-wrap">
|
||||
<div class="indent-top">
|
||||
<ul class="list-1">
|
||||
<li><a href="#">Design Services <br>for Home Construction</a></li>
|
||||
<li class="last"><a href="#">Interior Design Remodeling</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</article>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-bot">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<article class="grid_4">
|
||||
<h3 class="prev-indent-bot">About Us</h3>
|
||||
<p class="prev-indent-bot">This <a target="_blank" href="http://blog.templatemonster.com/2011/08/22/free-website-template-clean-style-interior/ ">Interior Design Template</a> goes with two pack ages: with PSD source files and without them.</p>
|
||||
PSD source files are available for free for the registered members of Templates.com. The basic package (without PSD source) is available for anyone without registration.
|
||||
</article>
|
||||
<article class="grid_4">
|
||||
<h3 class="prev-indent-bot">Testimonials</h3>
|
||||
<div class="quote">
|
||||
<p class="prev-indent-bot">At vero eos et accusamus et iusto odio tium voluptatum deleniti atque corrupti quos<br> dolores et quas molestias excepturi sint occaecati cupiditate.</p>
|
||||
<h5>James Reese</h5>
|
||||
Managing Director
|
||||
</div>
|
||||
</article>
|
||||
<article class="grid_4">
|
||||
<h3 class="prev-indent-bot">What’s New?</h3>
|
||||
<time class="tdate-1" datetime="2011-08-15"><a class="link" href="#">15.08.2011</a></time>
|
||||
<p class="prev-indent-bot">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque.</p>
|
||||
<time class="tdate-1" datetime="2011-08-11"><a class="link" href="#">11.08.2011</a></time>
|
||||
Totam rem aperiam, eaque ipsa quae ab illo inven tore veritatis et quasi architecto.
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==============================footer=================================-->
|
||||
<footer>
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<div class="grid_4">
|
||||
<div>Interior Design © 2011 <a class="link color-3" href="#">Privacy Policy</a></div>
|
||||
<div><a rel="nofollow" target="_blank" href="http://www.templatemonster.com/">Website Template</a> by TemplateMonster.com | <a rel="nofollow" target="_blank" href="http://www.html5xcss3.com/">html5xcss3.com</a></div>
|
||||
<!-- {%FOOTER_LINK} -->
|
||||
</div>
|
||||
<div class="grid_4">
|
||||
<span class="phone-numb"><span>+1(800)</span> 123-1234</span>
|
||||
</div>
|
||||
<div class="grid_4">
|
||||
<ul class="list-services">
|
||||
<li><a href="#"></a></li>
|
||||
<li><a class="item-2" href="#"></a></li>
|
||||
<li><a class="item-3" href="#"></a></li>
|
||||
<li><a class="item-4" href="#"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
<script type="text/javascript">
|
||||
$(window).load(function() {
|
||||
// We only want these styles applied when javascript is enabled
|
||||
$('div.navigation').css({'width' : '320px', 'float' : 'right'});
|
||||
$('div.content').css('display', 'block');
|
||||
|
||||
// Initially set opacity on thumbs and add
|
||||
// additional styling for hover effect on thumbs
|
||||
var onMouseOutOpacity = 0.5;
|
||||
$('#thumbs ul.thumbs li span').opacityrollover({
|
||||
mouseOutOpacity: onMouseOutOpacity,
|
||||
mouseOverOpacity: 0.0,
|
||||
fadeSpeed: 'fast',
|
||||
exemptionSelector: '.selected'
|
||||
});
|
||||
|
||||
// Initialize Advanced Galleriffic Gallery
|
||||
var gallery = $('#thumbs').galleriffic({
|
||||
delay: 7000,
|
||||
numThumbs: 12,
|
||||
preloadAhead: 6,
|
||||
enableTopPager: false,
|
||||
enableBottomPager: false,
|
||||
imageContainerSel: '#slideshow',
|
||||
controlsContainerSel: '',
|
||||
captionContainerSel: '',
|
||||
loadingContainerSel: '',
|
||||
renderSSControls: true,
|
||||
renderNavControls: true,
|
||||
playLinkText: 'Play Slideshow',
|
||||
pauseLinkText: 'Pause Slideshow',
|
||||
prevLinkText: 'Prev',
|
||||
nextLinkText: 'Next',
|
||||
nextPageLinkText: 'Next',
|
||||
prevPageLinkText: 'Prev',
|
||||
enableHistory: true,
|
||||
autoStart: 7000,
|
||||
syncTransitions: true,
|
||||
defaultTransitionDuration: 900,
|
||||
onSlideChange: function(prevIndex, nextIndex) {
|
||||
// 'this' refers to the gallery, which is an extension of $('#thumbs')
|
||||
this.find('ul.thumbs li span')
|
||||
.css({opacity:0.5})
|
||||
},
|
||||
onPageTransitionOut: function(callback) {
|
||||
this.find('ul.thumbs li span').css({display:'block'});
|
||||
},
|
||||
onPageTransitionIn: function() {
|
||||
this.find('ul.thumbs li span').css({display:'none'});
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
34
interio/js/html5.js
Normal file
@@ -0,0 +1,34 @@
|
||||
// Create new HTML5 elements ===================================================
|
||||
// -----------------------------------------------------------------------------
|
||||
// This script should load before any others. We want the new elements to be
|
||||
// parsed before pretty much anything happens.
|
||||
// Plus, IE does not behave otherwise. The cost of being progressive...
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
document.createElement("article");
|
||||
document.createElement("aside");
|
||||
document.createElement("audio");
|
||||
document.createElement("canvas");
|
||||
document.createElement("command");
|
||||
document.createElement("datalist");
|
||||
document.createElement("details");
|
||||
document.createElement("embed");
|
||||
document.createElement("figcaption");
|
||||
document.createElement("figure");
|
||||
document.createElement("footer");
|
||||
document.createElement("header");
|
||||
document.createElement("hgroup");
|
||||
document.createElement("keygen");
|
||||
document.createElement("mark");
|
||||
document.createElement("meter");
|
||||
document.createElement("nav");
|
||||
document.createElement("output");
|
||||
document.createElement("progress");
|
||||
document.createElement("rp");
|
||||
document.createElement("rt");
|
||||
document.createElement("ruby");
|
||||
document.createElement("section");
|
||||
document.createElement("source");
|
||||
document.createElement("summary");
|
||||
document.createElement("time");
|
||||
document.createElement("video");
|
||||
341
interio/js/jcarousellite_1.0.1.js
Normal file
@@ -0,0 +1,341 @@
|
||||
/**
|
||||
* jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget.
|
||||
* @requires jQuery v1.2 or above
|
||||
*
|
||||
* http://gmarwaha.com/jquery/jcarousellite/
|
||||
*
|
||||
* Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com)
|
||||
* Dual licensed under the MIT and GPL licenses:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
* http://www.gnu.org/licenses/gpl.html
|
||||
*
|
||||
* Version: 1.0.1
|
||||
* Note: Requires jquery 1.2 or above from version 1.0.1
|
||||
*/
|
||||
|
||||
/**
|
||||
* Creates a carousel-style navigation widget for images/any-content from a simple HTML markup.
|
||||
*
|
||||
* The HTML markup that is used to build the carousel can be as simple as...
|
||||
*
|
||||
* <div class="carousel">
|
||||
* <ul>
|
||||
* <li><img src="image/1.jpg" alt="1"></li>
|
||||
* <li><img src="image/2.jpg" alt="2"></li>
|
||||
* <li><img src="image/3.jpg" alt="3"></li>
|
||||
* </ul>
|
||||
* </div>
|
||||
*
|
||||
* As you can see, this snippet is nothing but a simple div containing an unordered list of images.
|
||||
* You don't need any special "class" attribute, or a special "css" file for this plugin.
|
||||
* I am using a class attribute just for the sake of explanation here.
|
||||
*
|
||||
* To navigate the elements of the carousel, you need some kind of navigation buttons.
|
||||
* For example, you will need a "previous" button to go backward, and a "next" button to go forward.
|
||||
* This need not be part of the carousel "div" itself. It can be any element in your page.
|
||||
* Lets assume that the following elements in your document can be used as next, and prev buttons...
|
||||
*
|
||||
* <button class="prev"><<</button>
|
||||
* <button class="next">>></button>
|
||||
*
|
||||
* Now, all you need to do is call the carousel component on the div element that represents it, and pass in the
|
||||
* navigation buttons as options.
|
||||
*
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev"
|
||||
* });
|
||||
*
|
||||
* That's it, you would have now converted your raw div, into a magnificient carousel.
|
||||
*
|
||||
* There are quite a few other options that you can use to customize it though.
|
||||
* Each will be explained with an example below.
|
||||
*
|
||||
* @param an options object - You can specify all the options shown below as an options object param.
|
||||
*
|
||||
* @option btnPrev, btnNext : string - no defaults
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev"
|
||||
* });
|
||||
* @desc Creates a basic carousel. Clicking "btnPrev" navigates backwards and "btnNext" navigates forward.
|
||||
*
|
||||
* @option btnGo - array - no defaults
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* btnGo: [".0", ".1", ".2"]
|
||||
* });
|
||||
* @desc If you don't want next and previous buttons for navigation, instead you prefer custom navigation based on
|
||||
* the item number within the carousel, you can use this option. Just supply an array of selectors for each element
|
||||
* in the carousel. The index of the array represents the index of the element. What i mean is, if the
|
||||
* first element in the array is ".0", it means that when the element represented by ".0" is clicked, the carousel
|
||||
* will slide to the first element and so on and so forth. This feature is very powerful. For example, i made a tabbed
|
||||
* interface out of it by making my navigation elements styled like tabs in css. As the carousel is capable of holding
|
||||
* any content, not just images, you can have a very simple tabbed navigation in minutes without using any other plugin.
|
||||
* The best part is that, the tab will "slide" based on the provided effect. :-)
|
||||
*
|
||||
* @option mouseWheel : boolean - default is false
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* mouseWheel: true
|
||||
* });
|
||||
* @desc The carousel can also be navigated using the mouse wheel interface of a scroll mouse instead of using buttons.
|
||||
* To get this feature working, you have to do 2 things. First, you have to include the mouse-wheel plugin from brandon.
|
||||
* Second, you will have to set the option "mouseWheel" to true. That's it, now you will be able to navigate your carousel
|
||||
* using the mouse wheel. Using buttons and mouseWheel or not mutually exclusive. You can still have buttons for navigation
|
||||
* as well. They complement each other. To use both together, just supply the options required for both as shown below.
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* mouseWheel: true
|
||||
* });
|
||||
*
|
||||
* @option auto : number - default is null, meaning autoscroll is disabled by default
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* auto: 800,
|
||||
* speed: 500
|
||||
* });
|
||||
* @desc You can make your carousel auto-navigate itself by specfying a millisecond value in this option.
|
||||
* The value you specify is the amount of time between 2 slides. The default is null, and that disables auto scrolling.
|
||||
* Specify this value and magically your carousel will start auto scrolling.
|
||||
*
|
||||
* @option speed : number - 200 is default
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* speed: 800
|
||||
* });
|
||||
* @desc Specifying a speed will slow-down or speed-up the sliding speed of your carousel. Try it out with
|
||||
* different speeds like 800, 600, 1500 etc. Providing 0, will remove the slide effect.
|
||||
*
|
||||
* @option easing : string - no easing effects by default.
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* easing: "bounceout"
|
||||
* });
|
||||
* @desc You can specify any easing effect. Note: You need easing plugin for that. Once specified,
|
||||
* the carousel will slide based on the provided easing effect.
|
||||
*
|
||||
* @option vertical : boolean - default is false
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* vertical: true
|
||||
* });
|
||||
* @desc Determines the direction of the carousel. true, means the carousel will display vertically. The next and
|
||||
* prev buttons will slide the items vertically as well. The default is false, which means that the carousel will
|
||||
* display horizontally. The next and prev items will slide the items from left-right in this case.
|
||||
*
|
||||
* @option circular : boolean - default is true
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* circular: false
|
||||
* });
|
||||
* @desc Setting it to true enables circular navigation. This means, if you click "next" after you reach the last
|
||||
* element, you will automatically slide to the first element and vice versa. If you set circular to false, then
|
||||
* if you click on the "next" button after you reach the last element, you will stay in the last element itself
|
||||
* and similarly for "previous" button and first element.
|
||||
*
|
||||
* @option visible : number - default is 3
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* visible: 4
|
||||
* });
|
||||
* @desc This specifies the number of items visible at all times within the carousel. The default is 3.
|
||||
* You are even free to experiment with real numbers. Eg: "3.5" will have 3 items fully visible and the
|
||||
* last item half visible. This gives you the effect of showing the user that there are more images to the right.
|
||||
*
|
||||
* @option start : number - default is 0
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* start: 2
|
||||
* });
|
||||
* @desc You can specify from which item the carousel should start. Remember, the first item in the carousel
|
||||
* has a start of 0, and so on.
|
||||
*
|
||||
* @option scrool : number - default is 1
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* scroll: 2
|
||||
* });
|
||||
* @desc The number of items that should scroll/slide when you click the next/prev navigation buttons. By
|
||||
* default, only one item is scrolled, but you may set it to any number. Eg: setting it to "2" will scroll
|
||||
* 2 items when you click the next or previous buttons.
|
||||
*
|
||||
* @option beforeStart, afterEnd : function - callbacks
|
||||
* @example
|
||||
* $(".carousel").jCarouselLite({
|
||||
* btnNext: ".next",
|
||||
* btnPrev: ".prev",
|
||||
* beforeStart: function(a) {
|
||||
* alert("Before animation starts:" + a);
|
||||
* },
|
||||
* afterEnd: function(a) {
|
||||
* alert("After animation ends:" + a);
|
||||
* }
|
||||
* });
|
||||
* @desc If you wanted to do some logic in your page before the slide starts and after the slide ends, you can
|
||||
* register these 2 callbacks. The functions will be passed an argument that represents an array of elements that
|
||||
* are visible at the time of callback.
|
||||
*
|
||||
*
|
||||
* @cat Plugins/Image Gallery
|
||||
* @author Ganeshji Marwaha/ganeshread@gmail.com
|
||||
*/
|
||||
|
||||
(function($) { // Compliant with jquery.noConflict()
|
||||
$.fn.jCarouselLite = function(o) {
|
||||
o = $.extend({
|
||||
btnPrev: null,
|
||||
btnNext: null,
|
||||
btnGo: null,
|
||||
mouseWheel: false,
|
||||
auto: null,
|
||||
|
||||
speed: 200,
|
||||
easing: null,
|
||||
|
||||
vertical: false,
|
||||
circular: true,
|
||||
visible: 3,
|
||||
start: 0,
|
||||
scroll: 1,
|
||||
|
||||
beforeStart: null,
|
||||
afterEnd: null
|
||||
}, o || {});
|
||||
|
||||
return this.each(function() { // Returns the element collection. Chainable.
|
||||
|
||||
var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
|
||||
var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;
|
||||
|
||||
if(o.circular) {
|
||||
ul.prepend(tLi.slice(tl-v-1+1).clone())
|
||||
.append(tLi.slice(0,v).clone());
|
||||
o.start += v;
|
||||
}
|
||||
|
||||
var li = $("li", ul), itemLength = li.size(), curr = o.start;
|
||||
div.css("visibility", "visible");
|
||||
|
||||
li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
|
||||
ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
|
||||
div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});
|
||||
|
||||
var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation
|
||||
var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items)
|
||||
var divSize = liSize * v; // size of entire div(total length for just the visible items)
|
||||
|
||||
li.css({width: li.width(), height: li.height()});
|
||||
ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));
|
||||
|
||||
div.css(sizeCss, divSize+"px"); // Width of the DIV. length of visible images
|
||||
|
||||
if(o.btnPrev)
|
||||
$(o.btnPrev).click(function() {
|
||||
return go(curr-o.scroll);
|
||||
});
|
||||
|
||||
if(o.btnNext)
|
||||
$(o.btnNext).click(function() {
|
||||
return go(curr+o.scroll);
|
||||
});
|
||||
|
||||
if(o.btnGo)
|
||||
$.each(o.btnGo, function(i, val) {
|
||||
$(val).click(function() {
|
||||
return go(o.circular ? o.visible+i : i);
|
||||
});
|
||||
});
|
||||
|
||||
if(o.mouseWheel && div.mousewheel)
|
||||
div.mousewheel(function(e, d) {
|
||||
return d>0 ? go(curr-o.scroll) : go(curr+o.scroll);
|
||||
});
|
||||
|
||||
if(o.auto)
|
||||
setInterval(function() {
|
||||
go(curr+o.scroll);
|
||||
}, o.auto+o.speed);
|
||||
|
||||
function vis() {
|
||||
return li.slice(curr).slice(0,v);
|
||||
};
|
||||
|
||||
function go(to) {
|
||||
if(!running) {
|
||||
|
||||
if(o.beforeStart)
|
||||
o.beforeStart.call(this, vis());
|
||||
|
||||
if(o.circular) { // If circular we are in first or last, then goto the other end
|
||||
if(to<=o.start-v-1) { // If first, then goto last
|
||||
ul.css(animCss, -((itemLength-(v*2))*liSize)+"px");
|
||||
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements.
|
||||
curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll;
|
||||
} else if(to>=itemLength-v+1) { // If last, then goto first
|
||||
ul.css(animCss, -( (v) * liSize ) + "px" );
|
||||
// If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements.
|
||||
curr = to==itemLength-v+1 ? v+1 : v+o.scroll;
|
||||
} else curr = to;
|
||||
} else { // If non-circular and to points to first or last, we just return.
|
||||
if(to<0 || to>itemLength-v) return;
|
||||
else curr = to;
|
||||
} // If neither overrides it, the curr will still be "to" and we can proceed.
|
||||
|
||||
running = true;
|
||||
|
||||
ul.animate(
|
||||
animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing,
|
||||
function() {
|
||||
if(o.afterEnd)
|
||||
o.afterEnd.call(this, vis());
|
||||
running = false;
|
||||
}
|
||||
);
|
||||
// Disable buttons when the carousel reaches the last/first, and enable when not
|
||||
if(!o.circular) {
|
||||
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
|
||||
$( (curr-o.scroll<0 && o.btnPrev)
|
||||
||
|
||||
(curr+o.scroll > itemLength-v && o.btnNext)
|
||||
||
|
||||
[]
|
||||
).addClass("disabled");
|
||||
}
|
||||
|
||||
}
|
||||
return false;
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
function css(el, prop) {
|
||||
return parseInt($.css(el[0], prop)) || 0;
|
||||
};
|
||||
function width(el) {
|
||||
return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
|
||||
};
|
||||
function height(el) {
|
||||
return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
18
interio/js/jquery-1.6.2.min.js
vendored
Normal file
205
interio/js/jquery.easing.1.3.js
Normal file
@@ -0,0 +1,205 @@
|
||||
/*
|
||||
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
|
||||
*
|
||||
* Uses the built in easing capabilities added In jQuery 1.1
|
||||
* to offer multiple easing options
|
||||
*
|
||||
* TERMS OF USE - jQuery Easing
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2008 George McGinley Smith
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution.
|
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
*/
|
||||
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
jQuery.easing['jswing'] = jQuery.easing['swing'];
|
||||
|
||||
jQuery.extend( jQuery.easing,
|
||||
{
|
||||
def: 'easeOutQuad',
|
||||
swing: function (x, t, b, c, d) {
|
||||
//alert(jQuery.easing.default);
|
||||
return jQuery.easing[jQuery.easing.def](x, t, b, c, d);
|
||||
},
|
||||
easeInQuad: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t + b;
|
||||
},
|
||||
easeOutQuad: function (x, t, b, c, d) {
|
||||
return -c *(t/=d)*(t-2) + b;
|
||||
},
|
||||
easeInOutQuad: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t + b;
|
||||
return -c/2 * ((--t)*(t-2) - 1) + b;
|
||||
},
|
||||
easeInCubic: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t + b;
|
||||
},
|
||||
easeOutCubic: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
},
|
||||
easeInOutCubic: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t + 2) + b;
|
||||
},
|
||||
easeInQuart: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t + b;
|
||||
},
|
||||
easeOutQuart: function (x, t, b, c, d) {
|
||||
return -c * ((t=t/d-1)*t*t*t - 1) + b;
|
||||
},
|
||||
easeInOutQuart: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
|
||||
return -c/2 * ((t-=2)*t*t*t - 2) + b;
|
||||
},
|
||||
easeInQuint: function (x, t, b, c, d) {
|
||||
return c*(t/=d)*t*t*t*t + b;
|
||||
},
|
||||
easeOutQuint: function (x, t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t*t*t + 1) + b;
|
||||
},
|
||||
easeInOutQuint: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
|
||||
return c/2*((t-=2)*t*t*t*t + 2) + b;
|
||||
},
|
||||
easeInSine: function (x, t, b, c, d) {
|
||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
|
||||
},
|
||||
easeOutSine: function (x, t, b, c, d) {
|
||||
return c * Math.sin(t/d * (Math.PI/2)) + b;
|
||||
},
|
||||
easeInOutSine: function (x, t, b, c, d) {
|
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
|
||||
},
|
||||
easeInExpo: function (x, t, b, c, d) {
|
||||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
|
||||
},
|
||||
easeOutExpo: function (x, t, b, c, d) {
|
||||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
|
||||
},
|
||||
easeInOutExpo: function (x, t, b, c, d) {
|
||||
if (t==0) return b;
|
||||
if (t==d) return b+c;
|
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
|
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
|
||||
},
|
||||
easeInCirc: function (x, t, b, c, d) {
|
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
|
||||
},
|
||||
easeOutCirc: function (x, t, b, c, d) {
|
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
|
||||
},
|
||||
easeInOutCirc: function (x, t, b, c, d) {
|
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
|
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
|
||||
},
|
||||
easeInElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
},
|
||||
easeOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
|
||||
},
|
||||
easeInOutElastic: function (x, t, b, c, d) {
|
||||
var s=1.70158;var p=0;var a=c;
|
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);
|
||||
if (a < Math.abs(c)) { a=c; var s=p/4; }
|
||||
else var s = p/(2*Math.PI) * Math.asin (c/a);
|
||||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
|
||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
|
||||
},
|
||||
easeInBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*(t/=d)*t*((s+1)*t - s) + b;
|
||||
},
|
||||
easeOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
|
||||
},
|
||||
easeInOutBack: function (x, t, b, c, d, s) {
|
||||
if (s == undefined) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
|
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
|
||||
},
|
||||
easeInBounce: function (x, t, b, c, d) {
|
||||
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
|
||||
},
|
||||
easeOutBounce: function (x, t, b, c, d) {
|
||||
if ((t/=d) < (1/2.75)) {
|
||||
return c*(7.5625*t*t) + b;
|
||||
} else if (t < (2/2.75)) {
|
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
|
||||
} else if (t < (2.5/2.75)) {
|
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
|
||||
} else {
|
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
|
||||
}
|
||||
},
|
||||
easeInOutBounce: function (x, t, b, c, d) {
|
||||
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
|
||||
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
*
|
||||
* TERMS OF USE - EASING EQUATIONS
|
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2001 Robert Penner
|
||||
* All rights reserved.
|
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met:
|
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer.
|
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution.
|
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission.
|
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
|
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
|
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
|
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
|
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
*
|
||||
*/
|
||||
979
interio/js/jquery.galleriffic.js
Normal file
@@ -0,0 +1,979 @@
|
||||
/**
|
||||
* jQuery Galleriffic plugin
|
||||
*
|
||||
* Copyright (c) 2008 Trent Foley (http://trentacular.com)
|
||||
* Licensed under the MIT License:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Much thanks to primary contributer Ponticlaro (http://www.ponticlaro.com)
|
||||
*/
|
||||
;(function($) {
|
||||
// Globally keep track of all images by their unique hash. Each item is an image data object.
|
||||
var allImages = {};
|
||||
var imageCounter = 0;
|
||||
|
||||
// Galleriffic static class
|
||||
$.galleriffic = {
|
||||
version: '2.0.1',
|
||||
|
||||
// Strips invalid characters and any leading # characters
|
||||
normalizeHash: function(hash) {
|
||||
return hash.replace(/^.*#/, '').replace(/\?.*$/, '');
|
||||
},
|
||||
|
||||
getImage: function(hash) {
|
||||
if (!hash)
|
||||
return undefined;
|
||||
|
||||
hash = $.galleriffic.normalizeHash(hash);
|
||||
return allImages[hash];
|
||||
},
|
||||
|
||||
// Global function that looks up an image by its hash and displays the image.
|
||||
// Returns false when an image is not found for the specified hash.
|
||||
// @param {String} hash This is the unique hash value assigned to an image.
|
||||
gotoImage: function(hash) {
|
||||
var imageData = $.galleriffic.getImage(hash);
|
||||
if (!imageData)
|
||||
return false;
|
||||
|
||||
var gallery = imageData.gallery;
|
||||
gallery.gotoImage(imageData);
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
// Removes an image from its respective gallery by its hash.
|
||||
// Returns false when an image is not found for the specified hash or the
|
||||
// specified owner gallery does match the located images gallery.
|
||||
// @param {String} hash This is the unique hash value assigned to an image.
|
||||
// @param {Object} ownerGallery (Optional) When supplied, the located images
|
||||
// gallery is verified to be the same as the specified owning gallery before
|
||||
// performing the remove operation.
|
||||
removeImageByHash: function(hash, ownerGallery) {
|
||||
var imageData = $.galleriffic.getImage(hash);
|
||||
if (!imageData)
|
||||
return false;
|
||||
|
||||
var gallery = imageData.gallery;
|
||||
if (ownerGallery && ownerGallery != gallery)
|
||||
return false;
|
||||
|
||||
return gallery.removeImageByIndex(imageData.index);
|
||||
}
|
||||
};
|
||||
|
||||
var defaults = {
|
||||
delay: 3000,
|
||||
numThumbs: 20,
|
||||
preloadAhead: 40, // Set to -1 to preload all images
|
||||
enableTopPager: false,
|
||||
enableBottomPager: true,
|
||||
maxPagesToShow: 7,
|
||||
imageContainerSel: '',
|
||||
captionContainerSel: '',
|
||||
controlsContainerSel: '',
|
||||
loadingContainerSel: '',
|
||||
renderSSControls: true,
|
||||
renderNavControls: true,
|
||||
playLinkText: 'Play',
|
||||
pauseLinkText: 'Pause',
|
||||
prevLinkText: 'Previous',
|
||||
nextLinkText: 'Next',
|
||||
nextPageLinkText: 'Next ›',
|
||||
prevPageLinkText: '‹ Prev',
|
||||
enableHistory: false,
|
||||
enableKeyboardNavigation: true,
|
||||
autoStart: false,
|
||||
syncTransitions: false,
|
||||
defaultTransitionDuration: 1000,
|
||||
onSlideChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
|
||||
onTransitionOut: undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
|
||||
onTransitionIn: undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
|
||||
onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
|
||||
onPageTransitionIn: undefined, // accepts a delegate like such: function() { ... }
|
||||
onImageAdded: undefined, // accepts a delegate like such: function(imageData, $li) { ... }
|
||||
onImageRemoved: undefined // accepts a delegate like such: function(imageData, $li) { ... }
|
||||
};
|
||||
|
||||
// Primary Galleriffic initialization function that should be called on the thumbnail container.
|
||||
$.fn.galleriffic = function(settings) {
|
||||
// Extend Gallery Object
|
||||
$.extend(this, {
|
||||
// Returns the version of the script
|
||||
version: $.galleriffic.version,
|
||||
|
||||
// Current state of the slideshow
|
||||
isSlideshowRunning: false,
|
||||
slideshowTimeout: undefined,
|
||||
|
||||
// This function is attached to the click event of generated hyperlinks within the gallery
|
||||
clickHandler: function(e, link) {
|
||||
this.pause();
|
||||
|
||||
if (!this.enableHistory) {
|
||||
// The href attribute holds the unique hash for an image
|
||||
var hash = $.galleriffic.normalizeHash($(link).attr('href'));
|
||||
$.galleriffic.gotoImage(hash);
|
||||
e.preventDefault();
|
||||
}
|
||||
},
|
||||
|
||||
// Appends an image to the end of the set of images. Argument listItem can be either a jQuery DOM element or arbitrary html.
|
||||
// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
|
||||
appendImage: function(listItem) {
|
||||
this.addImage(listItem, false, false);
|
||||
return this;
|
||||
},
|
||||
|
||||
// Inserts an image into the set of images. Argument listItem can be either a jQuery DOM element or arbitrary html.
|
||||
// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
|
||||
// @param {Integer} position The index within the gallery where the item shouold be added.
|
||||
insertImage: function(listItem, position) {
|
||||
this.addImage(listItem, false, true, position);
|
||||
return this;
|
||||
},
|
||||
|
||||
// Adds an image to the gallery and optionally inserts/appends it to the DOM (thumbExists)
|
||||
// @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
|
||||
// @param {Boolean} thumbExists Specifies whether the thumbnail already exists in the DOM or if it needs to be added.
|
||||
// @param {Boolean} insert Specifies whether the the image is appended to the end or inserted into the gallery.
|
||||
// @param {Integer} position The index within the gallery where the item shouold be added.
|
||||
addImage: function(listItem, thumbExists, insert, position) {
|
||||
var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem;
|
||||
var $aThumb = $li.find('a.thumb');
|
||||
var slideUrl = $aThumb.attr('href');
|
||||
var title = $aThumb.attr('title');
|
||||
var $caption = $li.find('.caption').remove();
|
||||
var hash = $aThumb.attr('name');
|
||||
|
||||
// Increment the image counter
|
||||
imageCounter++;
|
||||
|
||||
// Autogenerate a hash value if none is present or if it is a duplicate
|
||||
if (!hash || allImages[''+hash]) {
|
||||
hash = imageCounter;
|
||||
}
|
||||
|
||||
// Set position to end when not specified
|
||||
if (!insert)
|
||||
position = this.data.length;
|
||||
|
||||
var imageData = {
|
||||
title:title,
|
||||
slideUrl:slideUrl,
|
||||
caption:$caption,
|
||||
hash:hash,
|
||||
gallery:this,
|
||||
index:position
|
||||
};
|
||||
|
||||
// Add the imageData to this gallery's array of images
|
||||
if (insert) {
|
||||
this.data.splice(position, 0, imageData);
|
||||
|
||||
// Reset index value on all imageData objects
|
||||
this.updateIndices(position);
|
||||
}
|
||||
else {
|
||||
this.data.push(imageData);
|
||||
}
|
||||
|
||||
var gallery = this;
|
||||
|
||||
// Add the element to the DOM
|
||||
if (!thumbExists) {
|
||||
// Update thumbs passing in addition post transition out handler
|
||||
this.updateThumbs(function() {
|
||||
var $thumbsUl = gallery.find('ul.thumbs');
|
||||
if (insert)
|
||||
$thumbsUl.children(':eq('+position+')').before($li);
|
||||
else
|
||||
$thumbsUl.append($li);
|
||||
|
||||
if (gallery.onImageAdded)
|
||||
gallery.onImageAdded(imageData, $li);
|
||||
});
|
||||
}
|
||||
|
||||
// Register the image globally
|
||||
allImages[''+hash] = imageData;
|
||||
|
||||
// Setup attributes and click handler
|
||||
$aThumb.attr('rel', 'history')
|
||||
.attr('href', '#'+hash)
|
||||
.removeAttr('name')
|
||||
.click(function(e) {
|
||||
gallery.clickHandler(e, this);
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Removes an image from the gallery based on its index.
|
||||
// Returns false when the index is out of range.
|
||||
removeImageByIndex: function(index) {
|
||||
if (index < 0 || index >= this.data.length)
|
||||
return false;
|
||||
|
||||
var imageData = this.data[index];
|
||||
if (!imageData)
|
||||
return false;
|
||||
|
||||
this.removeImage(imageData);
|
||||
|
||||
return true;
|
||||
},
|
||||
|
||||
// Convenience method that simply calls the global removeImageByHash method.
|
||||
removeImageByHash: function(hash) {
|
||||
return $.galleriffic.removeImageByHash(hash, this);
|
||||
},
|
||||
|
||||
// Removes an image from the gallery.
|
||||
removeImage: function(imageData) {
|
||||
var index = imageData.index;
|
||||
|
||||
// Remove the image from the gallery data array
|
||||
this.data.splice(index, 1);
|
||||
|
||||
// Remove the global registration
|
||||
delete allImages[''+imageData.hash];
|
||||
|
||||
// Remove the image's list item from the DOM
|
||||
this.updateThumbs(function() {
|
||||
var $li = gallery.find('ul.thumbs')
|
||||
.children(':eq('+index+')')
|
||||
.remove();
|
||||
|
||||
if (gallery.onImageRemoved)
|
||||
gallery.onImageRemoved(imageData, $li);
|
||||
});
|
||||
|
||||
// Update each image objects index value
|
||||
this.updateIndices(index);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Updates the index values of the each of the images in the gallery after the specified index
|
||||
updateIndices: function(startIndex) {
|
||||
for (i = startIndex; i < this.data.length; i++) {
|
||||
this.data[i].index = i;
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Scraped the thumbnail container for thumbs and adds each to the gallery
|
||||
initializeThumbs: function() {
|
||||
this.data = [];
|
||||
var gallery = this;
|
||||
|
||||
this.find('ul.thumbs > li').each(function(i) {
|
||||
gallery.addImage($(this), true, false);
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
isPreloadComplete: false,
|
||||
|
||||
// Initalizes the image preloader
|
||||
preloadInit: function() {
|
||||
if (this.preloadAhead == 0) return this;
|
||||
|
||||
this.preloadStartIndex = this.currentImage.index;
|
||||
var nextIndex = this.getNextIndex(this.preloadStartIndex);
|
||||
return this.preloadRecursive(this.preloadStartIndex, nextIndex);
|
||||
},
|
||||
|
||||
// Changes the location in the gallery the preloader should work
|
||||
// @param {Integer} index The index of the image where the preloader should restart at.
|
||||
preloadRelocate: function(index) {
|
||||
// By changing this startIndex, the current preload script will restart
|
||||
this.preloadStartIndex = index;
|
||||
return this;
|
||||
},
|
||||
|
||||
// Recursive function that performs the image preloading
|
||||
// @param {Integer} startIndex The index of the first image the current preloader started on.
|
||||
// @param {Integer} currentIndex The index of the current image to preload.
|
||||
preloadRecursive: function(startIndex, currentIndex) {
|
||||
// Check if startIndex has been relocated
|
||||
if (startIndex != this.preloadStartIndex) {
|
||||
var nextIndex = this.getNextIndex(this.preloadStartIndex);
|
||||
return this.preloadRecursive(this.preloadStartIndex, nextIndex);
|
||||
}
|
||||
|
||||
var gallery = this;
|
||||
|
||||
// Now check for preloadAhead count
|
||||
var preloadCount = currentIndex - startIndex;
|
||||
if (preloadCount < 0)
|
||||
preloadCount = this.data.length-1-startIndex+currentIndex;
|
||||
if (this.preloadAhead >= 0 && preloadCount > this.preloadAhead) {
|
||||
// Do this in order to keep checking for relocated start index
|
||||
setTimeout(function() { gallery.preloadRecursive(startIndex, currentIndex); }, 500);
|
||||
return this;
|
||||
}
|
||||
|
||||
var imageData = this.data[currentIndex];
|
||||
if (!imageData)
|
||||
return this;
|
||||
|
||||
// If already loaded, continue
|
||||
if (imageData.image)
|
||||
return this.preloadNext(startIndex, currentIndex);
|
||||
|
||||
// Preload the image
|
||||
var image = new Image();
|
||||
|
||||
image.onload = function() {
|
||||
imageData.image = this;
|
||||
gallery.preloadNext(startIndex, currentIndex);
|
||||
};
|
||||
|
||||
image.alt = imageData.title;
|
||||
image.src = imageData.slideUrl;
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Called by preloadRecursive in order to preload the next image after the previous has loaded.
|
||||
// @param {Integer} startIndex The index of the first image the current preloader started on.
|
||||
// @param {Integer} currentIndex The index of the current image to preload.
|
||||
preloadNext: function(startIndex, currentIndex) {
|
||||
var nextIndex = this.getNextIndex(currentIndex);
|
||||
if (nextIndex == startIndex) {
|
||||
this.isPreloadComplete = true;
|
||||
} else {
|
||||
// Use setTimeout to free up thread
|
||||
var gallery = this;
|
||||
setTimeout(function() { gallery.preloadRecursive(startIndex, nextIndex); }, 100);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Safe way to get the next image index relative to the current image.
|
||||
// If the current image is the last, returns 0
|
||||
getNextIndex: function(index) {
|
||||
var nextIndex = index+1;
|
||||
if (nextIndex >= this.data.length)
|
||||
nextIndex = 0;
|
||||
return nextIndex;
|
||||
},
|
||||
|
||||
// Safe way to get the previous image index relative to the current image.
|
||||
// If the current image is the first, return the index of the last image in the gallery.
|
||||
getPrevIndex: function(index) {
|
||||
var prevIndex = index-1;
|
||||
if (prevIndex < 0)
|
||||
prevIndex = this.data.length-1;
|
||||
return prevIndex;
|
||||
},
|
||||
|
||||
// Pauses the slideshow
|
||||
pause: function() {
|
||||
this.isSlideshowRunning = false;
|
||||
if (this.slideshowTimeout) {
|
||||
clearTimeout(this.slideshowTimeout);
|
||||
this.slideshowTimeout = undefined;
|
||||
}
|
||||
|
||||
if (this.$controlsContainer) {
|
||||
this.$controlsContainer
|
||||
.find('div.ss-controls a').removeClass().addClass('play')
|
||||
.attr('title', this.playLinkText)
|
||||
.attr('href', '#play')
|
||||
.html(this.playLinkText);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Plays the slideshow
|
||||
play: function() {
|
||||
this.isSlideshowRunning = true;
|
||||
|
||||
if (this.$controlsContainer) {
|
||||
this.$controlsContainer
|
||||
.find('div.ss-controls a').removeClass().addClass('pause')
|
||||
.attr('title', this.pauseLinkText)
|
||||
.attr('href', '#pause')
|
||||
.html(this.pauseLinkText);
|
||||
}
|
||||
|
||||
if (!this.slideshowTimeout) {
|
||||
var gallery = this;
|
||||
this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Toggles the state of the slideshow (playing/paused)
|
||||
toggleSlideshow: function() {
|
||||
if (this.isSlideshowRunning)
|
||||
this.pause();
|
||||
else
|
||||
this.play();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Advances the slideshow to the next image and delegates navigation to the
|
||||
// history plugin when history is enabled
|
||||
// enableHistory is true
|
||||
ssAdvance: function() {
|
||||
if (this.isSlideshowRunning)
|
||||
this.next(true);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Advances the gallery to the next image.
|
||||
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
|
||||
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
|
||||
next: function(dontPause, bypassHistory) {
|
||||
this.gotoIndex(this.getNextIndex(this.currentImage.index), dontPause, bypassHistory);
|
||||
return this;
|
||||
},
|
||||
|
||||
// Navigates to the previous image in the gallery.
|
||||
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
|
||||
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
|
||||
previous: function(dontPause, bypassHistory) {
|
||||
this.gotoIndex(this.getPrevIndex(this.currentImage.index), dontPause, bypassHistory);
|
||||
return this;
|
||||
},
|
||||
|
||||
// Navigates to the next page in the gallery.
|
||||
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
|
||||
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
|
||||
nextPage: function(dontPause, bypassHistory) {
|
||||
var page = this.getCurrentPage();
|
||||
var lastPage = this.getNumPages() - 1;
|
||||
if (page < lastPage) {
|
||||
var startIndex = page * this.numThumbs;
|
||||
var nextPage = startIndex + this.numThumbs;
|
||||
this.gotoIndex(nextPage, dontPause, bypassHistory);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Navigates to the previous page in the gallery.
|
||||
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
|
||||
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
|
||||
previousPage: function(dontPause, bypassHistory) {
|
||||
var page = this.getCurrentPage();
|
||||
if (page > 0) {
|
||||
var startIndex = page * this.numThumbs;
|
||||
var prevPage = startIndex - this.numThumbs;
|
||||
this.gotoIndex(prevPage, dontPause, bypassHistory);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Navigates to the image at the specified index in the gallery
|
||||
// @param {Integer} index The index of the image in the gallery to display.
|
||||
// @param {Boolean} dontPause Specifies whether to pause the slideshow.
|
||||
// @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
|
||||
gotoIndex: function(index, dontPause, bypassHistory) {
|
||||
if (!dontPause)
|
||||
this.pause();
|
||||
|
||||
if (index < 0) index = 0;
|
||||
else if (index >= this.data.length) index = this.data.length-1;
|
||||
|
||||
var imageData = this.data[index];
|
||||
|
||||
if (!bypassHistory && this.enableHistory)
|
||||
$.historyLoad(String(imageData.hash)); // At the moment, historyLoad only accepts string arguments
|
||||
else
|
||||
this.gotoImage(imageData);
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// This function is garaunteed to be called anytime a gallery slide changes.
|
||||
// @param {Object} imageData An object holding the image metadata of the image to navigate to.
|
||||
gotoImage: function(imageData) {
|
||||
var index = imageData.index;
|
||||
|
||||
if (this.onSlideChange)
|
||||
this.onSlideChange(this.currentImage.index, index);
|
||||
|
||||
this.currentImage = imageData;
|
||||
this.preloadRelocate(index);
|
||||
|
||||
this.refresh();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Returns the default transition duration value. The value is halved when not
|
||||
// performing a synchronized transition.
|
||||
// @param {Boolean} isSync Specifies whether the transitions are synchronized.
|
||||
getDefaultTransitionDuration: function(isSync) {
|
||||
if (isSync)
|
||||
return this.defaultTransitionDuration;
|
||||
return this.defaultTransitionDuration / 2;
|
||||
},
|
||||
|
||||
// Rebuilds the slideshow image and controls and performs transitions
|
||||
refresh: function() {
|
||||
var imageData = this.currentImage;
|
||||
if (!imageData)
|
||||
return this;
|
||||
|
||||
var index = imageData.index;
|
||||
|
||||
// Update Controls
|
||||
if (this.$controlsContainer) {
|
||||
this.$controlsContainer
|
||||
.find('div.nav-controls a.prev').attr('href', '#'+this.data[this.getPrevIndex(index)].hash).end()
|
||||
.find('div.nav-controls a.next').attr('href', '#'+this.data[this.getNextIndex(index)].hash);
|
||||
}
|
||||
|
||||
var previousSlide = this.$imageContainer.find('span.current').addClass('previous').removeClass('current');
|
||||
var previousCaption = 0;
|
||||
|
||||
if (this.$captionContainer) {
|
||||
previousCaption = this.$captionContainer.find('span.current').addClass('previous').removeClass('current');
|
||||
}
|
||||
|
||||
// Perform transitions simultaneously if syncTransitions is true and the next image is already preloaded
|
||||
var isSync = this.syncTransitions && imageData.image;
|
||||
|
||||
// Flag we are transitioning
|
||||
var isTransitioning = true;
|
||||
var gallery = this;
|
||||
|
||||
var transitionOutCallback = function() {
|
||||
// Flag that the transition has completed
|
||||
isTransitioning = false;
|
||||
|
||||
// Remove the old slide
|
||||
previousSlide.remove();
|
||||
|
||||
// Remove old caption
|
||||
if (previousCaption)
|
||||
previousCaption.remove();
|
||||
|
||||
if (!isSync) {
|
||||
if (imageData.image && imageData.hash == gallery.data[gallery.currentImage.index].hash) {
|
||||
gallery.buildImage(imageData, isSync);
|
||||
} else {
|
||||
// Show loading container
|
||||
if (gallery.$loadingContainer) {
|
||||
gallery.$loadingContainer.show();
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (previousSlide.length == 0) {
|
||||
// For the first slide, the previous slide will be empty, so we will call the callback immediately
|
||||
transitionOutCallback();
|
||||
} else {
|
||||
if (this.onTransitionOut) {
|
||||
this.onTransitionOut(previousSlide, previousCaption, isSync, transitionOutCallback);
|
||||
} else {
|
||||
previousSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, transitionOutCallback);
|
||||
if (previousCaption)
|
||||
previousCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
|
||||
}
|
||||
}
|
||||
|
||||
// Go ahead and begin transitioning in of next image
|
||||
if (isSync)
|
||||
this.buildImage(imageData, isSync);
|
||||
|
||||
if (!imageData.image) {
|
||||
var image = new Image();
|
||||
|
||||
// Wire up mainImage onload event
|
||||
image.onload = function() {
|
||||
imageData.image = this;
|
||||
|
||||
// Only build image if the out transition has completed and we are still on the same image hash
|
||||
if (!isTransitioning && imageData.hash == gallery.data[gallery.currentImage.index].hash) {
|
||||
gallery.buildImage(imageData, isSync);
|
||||
}
|
||||
};
|
||||
|
||||
// set alt and src
|
||||
image.alt = imageData.title;
|
||||
image.src = imageData.slideUrl;
|
||||
}
|
||||
|
||||
// This causes the preloader (if still running) to relocate out from the currentIndex
|
||||
this.relocatePreload = true;
|
||||
|
||||
return this.syncThumbs();
|
||||
},
|
||||
|
||||
// Called by the refresh method after the previous image has been transitioned out or at the same time
|
||||
// as the out transition when performing a synchronous transition.
|
||||
// @param {Object} imageData An object holding the image metadata of the image to build.
|
||||
// @param {Boolean} isSync Specifies whether the transitions are synchronized.
|
||||
buildImage: function(imageData, isSync) {
|
||||
var gallery = this;
|
||||
var nextIndex = this.getNextIndex(imageData.index);
|
||||
|
||||
// Construct new hidden span for the image
|
||||
var newSlide = this.$imageContainer
|
||||
.append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'"> </a></span>')
|
||||
.find('span.current').css('opacity', '0');
|
||||
|
||||
newSlide.find('a')
|
||||
.append(imageData.image)
|
||||
.click(function(e) {
|
||||
gallery.clickHandler(e, this);
|
||||
});
|
||||
|
||||
var newCaption = 0;
|
||||
if (this.$captionContainer) {
|
||||
// Construct new hidden caption for the image
|
||||
newCaption = this.$captionContainer
|
||||
.append('<span class="image-caption current"></span>')
|
||||
.find('span.current').css('opacity', '0')
|
||||
.append(imageData.caption);
|
||||
}
|
||||
|
||||
// Hide the loading conatiner
|
||||
if (this.$loadingContainer) {
|
||||
this.$loadingContainer.hide();
|
||||
}
|
||||
|
||||
// Transition in the new image
|
||||
if (this.onTransitionIn) {
|
||||
this.onTransitionIn(newSlide, newCaption, isSync);
|
||||
} else {
|
||||
newSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
|
||||
if (newCaption)
|
||||
newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
|
||||
}
|
||||
|
||||
if (this.isSlideshowRunning) {
|
||||
if (this.slideshowTimeout)
|
||||
clearTimeout(this.slideshowTimeout);
|
||||
|
||||
this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Returns the current page index that should be shown for the currentImage
|
||||
getCurrentPage: function() {
|
||||
return Math.floor(this.currentImage.index / this.numThumbs);
|
||||
},
|
||||
|
||||
// Applies the selected class to the current image's corresponding thumbnail.
|
||||
// Also checks if the current page has changed and updates the displayed page of thumbnails if necessary.
|
||||
syncThumbs: function() {
|
||||
var page = this.getCurrentPage();
|
||||
if (page != this.displayedPage)
|
||||
this.updateThumbs();
|
||||
|
||||
// Remove existing selected class and add selected class to new thumb
|
||||
var $thumbs = this.find('ul.thumbs li a span');
|
||||
$thumbs.filter('.selected').removeClass('selected');
|
||||
$thumbs.eq(this.currentImage.index).addClass('selected');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Performs transitions on the thumbnails container and updates the set of
|
||||
// thumbnails that are to be displayed and the navigation controls.
|
||||
// @param {Delegate} postTransitionOutHandler An optional delegate that is called after
|
||||
// the thumbnails container has transitioned out and before the thumbnails are rebuilt.
|
||||
updateThumbs: function(postTransitionOutHandler) {
|
||||
var gallery = this;
|
||||
var transitionOutCallback = function() {
|
||||
// Call the Post-transition Out Handler
|
||||
if (postTransitionOutHandler)
|
||||
postTransitionOutHandler();
|
||||
|
||||
gallery.rebuildThumbs();
|
||||
|
||||
// Transition In the thumbsContainer
|
||||
if (gallery.onPageTransitionIn)
|
||||
gallery.onPageTransitionIn();
|
||||
else
|
||||
gallery.show();
|
||||
};
|
||||
|
||||
// Transition Out the thumbsContainer
|
||||
if (this.onPageTransitionOut) {
|
||||
this.onPageTransitionOut(transitionOutCallback);
|
||||
} else {
|
||||
this.hide();
|
||||
transitionOutCallback();
|
||||
}
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Updates the set of thumbnails that are to be displayed and the navigation controls.
|
||||
rebuildThumbs: function() {
|
||||
var needsPagination = this.data.length > this.numThumbs;
|
||||
|
||||
// Rebuild top pager
|
||||
if (this.enableTopPager) {
|
||||
var $topPager = this.find('div.top');
|
||||
if ($topPager.length == 0)
|
||||
$topPager = this.prepend('<div class="top pagination"></div>').find('div.top');
|
||||
else
|
||||
$topPager.empty();
|
||||
|
||||
if (needsPagination)
|
||||
this.buildPager($topPager);
|
||||
}
|
||||
|
||||
// Rebuild bottom pager
|
||||
if (this.enableBottomPager) {
|
||||
var $bottomPager = this.find('div.bottom');
|
||||
if ($bottomPager.length == 0)
|
||||
$bottomPager = this.append('<div class="bottom pagination"></div>').find('div.bottom');
|
||||
else
|
||||
$bottomPager.empty();
|
||||
|
||||
if (needsPagination)
|
||||
this.buildPager($bottomPager);
|
||||
}
|
||||
|
||||
var page = this.getCurrentPage();
|
||||
var startIndex = page*this.numThumbs;
|
||||
var stopIndex = startIndex+this.numThumbs-1;
|
||||
if (stopIndex >= this.data.length)
|
||||
stopIndex = this.data.length-1;
|
||||
|
||||
// Show/Hide thumbs
|
||||
var $thumbsUl = this.find('ul.thumbs');
|
||||
$thumbsUl.find('li').each(function(i) {
|
||||
var $li = $(this);
|
||||
if (i >= startIndex && i <= stopIndex) {
|
||||
$li.show();
|
||||
} else {
|
||||
$li.hide();
|
||||
}
|
||||
});
|
||||
|
||||
this.displayedPage = page;
|
||||
|
||||
// Remove the noscript class from the thumbs container ul
|
||||
$thumbsUl.removeClass('noscript');
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Returns the total number of pages required to display all the thumbnails.
|
||||
getNumPages: function() {
|
||||
return Math.ceil(this.data.length/this.numThumbs);
|
||||
},
|
||||
|
||||
// Rebuilds the pager control in the specified matched element.
|
||||
// @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt.
|
||||
buildPager: function(pager) {
|
||||
var gallery = this;
|
||||
var numPages = this.getNumPages();
|
||||
var page = this.getCurrentPage();
|
||||
var startIndex = page * this.numThumbs;
|
||||
var pagesRemaining = this.maxPagesToShow - 1;
|
||||
|
||||
var pageNum = page - Math.floor((this.maxPagesToShow - 1) / 2) + 1;
|
||||
if (pageNum > 0) {
|
||||
var remainingPageCount = numPages - pageNum;
|
||||
if (remainingPageCount < pagesRemaining) {
|
||||
pageNum = pageNum - (pagesRemaining - remainingPageCount);
|
||||
}
|
||||
}
|
||||
|
||||
if (pageNum < 0) {
|
||||
pageNum = 0;
|
||||
}
|
||||
|
||||
// Prev Page Link
|
||||
if (page > 0) {
|
||||
var prevPage = startIndex - this.numThumbs;
|
||||
pager.append('<a rel="history" href="#'+this.data[prevPage].hash+'" title="'+this.prevPageLinkText+'">'+this.prevPageLinkText+'</a>');
|
||||
}
|
||||
|
||||
// Create First Page link if needed
|
||||
if (pageNum > 0) {
|
||||
this.buildPageLink(pager, 0, numPages);
|
||||
if (pageNum > 1)
|
||||
pager.append('<span class="ellipsis">…</span>');
|
||||
|
||||
pagesRemaining--;
|
||||
}
|
||||
|
||||
// Page Index Links
|
||||
while (pagesRemaining > 0) {
|
||||
this.buildPageLink(pager, pageNum, numPages);
|
||||
pagesRemaining--;
|
||||
pageNum++;
|
||||
}
|
||||
|
||||
// Create Last Page link if needed
|
||||
if (pageNum < numPages) {
|
||||
var lastPageNum = numPages - 1;
|
||||
if (pageNum < lastPageNum)
|
||||
pager.append('<span class="ellipsis">…</span>');
|
||||
|
||||
this.buildPageLink(pager, lastPageNum, numPages);
|
||||
}
|
||||
|
||||
// Next Page Link
|
||||
var nextPage = startIndex + this.numThumbs;
|
||||
if (nextPage < this.data.length) {
|
||||
pager.append('<a rel="history" href="#'+this.data[nextPage].hash+'" title="'+this.nextPageLinkText+'">'+this.nextPageLinkText+'</a>');
|
||||
}
|
||||
|
||||
pager.find('a').click(function(e) {
|
||||
gallery.clickHandler(e, this);
|
||||
});
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
// Builds a single page link within a pager. This function is called by buildPager
|
||||
// @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt.
|
||||
// @param {Integer} pageNum The page number of the page link to build.
|
||||
// @param {Integer} numPages The total number of pages required to display all thumbnails.
|
||||
buildPageLink: function(pager, pageNum, numPages) {
|
||||
var pageLabel = pageNum + 1;
|
||||
var currentPage = this.getCurrentPage();
|
||||
if (pageNum == currentPage)
|
||||
pager.append('<span class="current">'+pageLabel+'</span>');
|
||||
else if (pageNum < numPages) {
|
||||
var imageIndex = pageNum*this.numThumbs;
|
||||
pager.append('<a rel="history" href="#'+this.data[imageIndex].hash+'" title="'+pageLabel+'">'+pageLabel+'</a>');
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
});
|
||||
|
||||
// Now initialize the gallery
|
||||
$.extend(this, defaults, settings);
|
||||
|
||||
// Verify the history plugin is available
|
||||
if (this.enableHistory && !$.historyInit)
|
||||
this.enableHistory = false;
|
||||
|
||||
// Select containers
|
||||
if (this.imageContainerSel) this.$imageContainer = $(this.imageContainerSel);
|
||||
if (this.captionContainerSel) this.$captionContainer = $(this.captionContainerSel);
|
||||
if (this.loadingContainerSel) this.$loadingContainer = $(this.loadingContainerSel);
|
||||
|
||||
// Initialize the thumbails
|
||||
this.initializeThumbs();
|
||||
|
||||
if (this.maxPagesToShow < 3)
|
||||
this.maxPagesToShow = 3;
|
||||
|
||||
this.displayedPage = -1;
|
||||
this.currentImage = this.data[0];
|
||||
var gallery = this;
|
||||
|
||||
// Hide the loadingContainer
|
||||
if (this.$loadingContainer)
|
||||
this.$loadingContainer.hide();
|
||||
|
||||
// Setup controls
|
||||
if (this.controlsContainerSel) {
|
||||
this.$controlsContainer = $(this.controlsContainerSel).empty();
|
||||
|
||||
if (this.renderSSControls) {
|
||||
if (this.autoStart) {
|
||||
this.$controlsContainer
|
||||
.append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.pauseLinkText+'">'+this.pauseLinkText+'</a></div>');
|
||||
} else {
|
||||
this.$controlsContainer
|
||||
.append('<div class="ss-controls"><a href="#play" class="play" title="'+this.playLinkText+'">'+this.playLinkText+'</a></div>');
|
||||
}
|
||||
|
||||
this.$controlsContainer.find('div.ss-controls a')
|
||||
.click(function(e) {
|
||||
gallery.toggleSlideshow();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
if (this.renderNavControls) {
|
||||
this.$controlsContainer
|
||||
.append('<div class="nav-controls"><a class="prev" rel="history" title="'+this.prevLinkText+'">'+this.prevLinkText+'</a><a class="next" rel="history" title="'+this.nextLinkText+'">'+this.nextLinkText+'</a></div>')
|
||||
.find('div.nav-controls a')
|
||||
.click(function(e) {
|
||||
gallery.clickHandler(e, this);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
var initFirstImage = !this.enableHistory || !location.hash;
|
||||
if (this.enableHistory && location.hash) {
|
||||
var hash = $.galleriffic.normalizeHash(location.hash);
|
||||
var imageData = allImages[hash];
|
||||
if (!imageData)
|
||||
initFirstImage = true;
|
||||
}
|
||||
|
||||
// Setup gallery to show the first image
|
||||
if (initFirstImage)
|
||||
this.gotoIndex(0, false, true);
|
||||
|
||||
// Setup Keyboard Navigation
|
||||
if (this.enableKeyboardNavigation) {
|
||||
$(document).keydown(function(e) {
|
||||
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
|
||||
switch(key) {
|
||||
case 32: // space
|
||||
gallery.next();
|
||||
e.preventDefault();
|
||||
break;
|
||||
case 33: // Page Up
|
||||
gallery.previousPage();
|
||||
e.preventDefault();
|
||||
break;
|
||||
case 34: // Page Down
|
||||
gallery.nextPage();
|
||||
e.preventDefault();
|
||||
break;
|
||||
case 35: // End
|
||||
gallery.gotoIndex(gallery.data.length-1);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case 36: // Home
|
||||
gallery.gotoIndex(0);
|
||||
e.preventDefault();
|
||||
break;
|
||||
case 37: // left arrow
|
||||
gallery.previous();
|
||||
e.preventDefault();
|
||||
break;
|
||||
case 39: // right arrow
|
||||
gallery.next();
|
||||
e.preventDefault();
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Auto start the slideshow
|
||||
if (this.autoStart)
|
||||
this.play();
|
||||
|
||||
// Kickoff Image Preloader after 1 second
|
||||
setTimeout(function() { gallery.preloadInit(); }, 1000);
|
||||
|
||||
return this;
|
||||
};
|
||||
})(jQuery);
|
||||
42
interio/js/jquery.opacityrollover.js
Normal file
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* jQuery Opacity Rollover plugin
|
||||
*
|
||||
* Copyright (c) 2009 Trent Foley (http://trentacular.com)
|
||||
* Licensed under the MIT License:
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
;(function($) {
|
||||
var defaults = {
|
||||
mouseOutOpacity: 0.7,
|
||||
mouseOverOpacity: 1.0,
|
||||
fadeSpeed: 'fast',
|
||||
exemptionSelector: '.selected'
|
||||
};
|
||||
|
||||
$.fn.opacityrollover = function(settings) {
|
||||
// Initialize the effect
|
||||
$.extend(this, defaults, settings);
|
||||
|
||||
var config = this;
|
||||
|
||||
function fadeTo(element, opacity) {
|
||||
var $target = $(element);
|
||||
|
||||
if (config.exemptionSelector)
|
||||
$target = $target.not(config.exemptionSelector);
|
||||
|
||||
$target.fadeTo(config.fadeSpeed, opacity);
|
||||
}
|
||||
|
||||
this.css('opacity', this.mouseOutOpacity)
|
||||
.hover(
|
||||
function () {
|
||||
fadeTo(this, config.mouseOverOpacity);
|
||||
},
|
||||
function () {
|
||||
fadeTo(this, config.mouseOutOpacity);
|
||||
});
|
||||
|
||||
return this;
|
||||
};
|
||||
})(jQuery);
|
||||
81
interio/js/pie.htc
Normal file
@@ -0,0 +1,81 @@
|
||||
<!--
|
||||
PIE: CSS3 rendering for IE
|
||||
Version 1.0beta4
|
||||
http://css3pie.com
|
||||
Dual-licensed for use under the Apache License Version 2.0 or the General Public License (GPL) Version 2.
|
||||
-->
|
||||
<PUBLIC:COMPONENT lightWeight="true">
|
||||
<PUBLIC:ATTACH EVENT="oncontentready" FOR="element" ONEVENT="init()" />
|
||||
<PUBLIC:ATTACH EVENT="ondocumentready" FOR="element" ONEVENT="init()" />
|
||||
<PUBLIC:ATTACH EVENT="ondetach" FOR="element" ONEVENT="cleanup()" />
|
||||
|
||||
<script type="text/javascript">
|
||||
var doc = element.document;var g=window.PIE;
|
||||
if(!g){g=window.PIE={F:"-pie-",Sa:"Pie",Pa:"pie_",Jb:{TD:1,TH:1}};try{doc.execCommand("BackgroundImageCache",false,true)}catch(L){}g.J=function(){for(var a=4,b=doc.createElement("div"),c=b.getElementsByTagName("i");b.innerHTML="<!--[if gt IE "+ ++a+"]><i></i><![endif]--\>",c[0];);return a}();if(g.J===6)g.F=g.F.replace(/^-/,"");g.Ab=doc.documentMode||g.J;(function(){var a,b=0,c={};g.p={Ga:function(e){if(!a){a=doc.createDocumentFragment();a.namespaces.add("css3vml","urn:schemas-microsoft-com:vml")}return a.createElement("css3vml:"+e)},
|
||||
ta:function(e){return e&&e._pieId||(e._pieId=++b)},fb:function(e){var f,h,j,d,i=arguments;f=1;for(h=i.length;f<h;f++){d=i[f];for(j in d)if(d.hasOwnProperty(j))e[j]=d[j]}return e},Pb:function(e,f,h){var j=c[e],d,i;if(j)Object.prototype.toString.call(j)==="[object Array]"?j.push([f,h]):f.call(h,j);else{i=c[e]=[[f,h]];d=new Image;d.onload=function(){j=c[e]={i:d.width,f:d.height};for(var k=0,m=i.length;k<m;k++)i[k][0].call(i[k][1],j);d.onload=null};d.src=e}}}})();g.ia=function(){this.hb=[];this.Db={}};
|
||||
g.ia.prototype={aa:function(a){var b=g.p.ta(a),c=this.Db,e=this.hb;if(!(b in c)){c[b]=e.length;e.push(a)}},Ma:function(a){a=g.p.ta(a);var b=this.Db;if(a&&a in b){delete this.hb[b[a]];delete b[a]}},Ia:function(){for(var a=this.hb,b=a.length;b--;)a[b]&&a[b]()}};g.ya=new g.ia;g.ya.Tc=function(){var a=this;if(!a.Uc){setInterval(function(){a.Ia()},250);a.Uc=1}};g.G=new g.ia;window.attachEvent("onbeforeunload",function(){g.G.Ia()});g.G.Ea=function(a,b,c){a.attachEvent(b,c);this.aa(function(){a.detachEvent(b,
|
||||
c)})};(function(){function a(){g.za.Ia()}g.za=new g.ia;g.G.Ea(window,"onresize",a)})();(function(){function a(){g.Ra.Ia()}g.Ra=new g.ia;g.G.Ea(window,"onscroll",a);g.za.aa(a)})();(function(){function a(){c=g.Qa.wc()}function b(){if(c){for(var e=0,f=c.length;e<f;e++)g.attach(c[e]);c=0}}var c;g.G.Ea(window,"onbeforeprint",a);g.G.Ea(window,"onafterprint",b)})();g.hd=function(){function a(i){this.V=i}var b=doc.createElement("length-calc"),c=doc.documentElement,e=b.style,f={},h=["mm","cm","in","pt","pc"],
|
||||
j=h.length,d={};e.position="absolute";e.top=e.left="-9999px";for(c.appendChild(b);j--;){b.style.width="100"+h[j];f[h[j]]=b.offsetWidth/100}c.removeChild(b);a.prototype={ib:/(px|em|ex|mm|cm|in|pt|pc|%)$/,vb:function(){var i=this.Lc;if(i===void 0)i=this.Lc=parseFloat(this.V);return i},ab:function(){var i=this.ad;if(!i)i=this.ad=(i=this.V.match(this.ib))&&i[0]||"px";return i},a:function(i,k){var m=this.vb(),l=this.ab();switch(l){case "px":return m;case "%":return m*(typeof k==="function"?k():k)/100;
|
||||
case "em":return m*this.tb(i);case "ex":return m*this.tb(i)/2;default:return m*f[l]}},tb:function(i){var k=i.currentStyle.fontSize;if(k.indexOf("px")>0)return parseFloat(k);else{b.style.width="1em";i.appendChild(b);k=b.offsetWidth;b.parentNode===i&&i.removeChild(b);return k}}};g.k=function(i){return d[i]||(d[i]=new a(i))};return a}();g.Na=function(){function a(f){this.U=f}var b=g.k("50%"),c={top:1,center:1,bottom:1},e={left:1,center:1,right:1};a.prototype={Dc:function(){if(!this.sb){var f=this.U,
|
||||
h=f.length,j=g.u,d=j.ja,i=g.k("0");d=d.fa;i=["left",i,"top",i];if(h===1){f.push(new j.Ta(d,"center"));h++}if(h===2){d&(f[0].h|f[1].h)&&f[0].d in c&&f[1].d in e&&f.push(f.shift());if(f[0].h&d)if(f[0].d==="center")i[1]=b;else i[0]=f[0].d;else if(f[0].Y())i[1]=g.k(f[0].d);if(f[1].h&d)if(f[1].d==="center")i[3]=b;else i[2]=f[1].d;else if(f[1].Y())i[3]=g.k(f[1].d)}this.sb=i}return this.sb},coords:function(f,h,j){var d=this.Dc(),i=d[1].a(f,h);f=d[3].a(f,j);return{x:d[0]==="right"?h-i:i,y:d[2]==="bottom"?
|
||||
j-f:f}}};return a}();g.Rb=function(){function a(b){this.V=b}a.prototype={ib:/[a-z]+$/i,ab:function(){return this.lc||(this.lc=this.V.match(this.ib)[0].toLowerCase())},vc:function(){var b=this.fc,c;if(b===undefined){b=this.ab();c=parseFloat(this.V,10);b=this.fc=b==="deg"?c:b==="rad"?c/Math.PI*180:b==="grad"?c/400*360:b==="turn"?c*360:0}return b}};return a}();g.$b=function(){function a(c){this.V=c}var b={};a.Sc=/\s*rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d+|\d*\.\d+)\s*\)\s*/;a.gb=
|
||||
{aliceblue:"F0F8FF",antiquewhite:"FAEBD7",aqua:"0FF",aquamarine:"7FFFD4",azure:"F0FFFF",beige:"F5F5DC",bisque:"FFE4C4",black:"000",blanchedalmond:"FFEBCD",blue:"00F",blueviolet:"8A2BE2",brown:"A52A2A",burlywood:"DEB887",cadetblue:"5F9EA0",chartreuse:"7FFF00",chocolate:"D2691E",coral:"FF7F50",cornflowerblue:"6495ED",cornsilk:"FFF8DC",crimson:"DC143C",cyan:"0FF",darkblue:"00008B",darkcyan:"008B8B",darkgoldenrod:"B8860B",darkgray:"A9A9A9",darkgreen:"006400",darkkhaki:"BDB76B",darkmagenta:"8B008B",darkolivegreen:"556B2F",
|
||||
darkorange:"FF8C00",darkorchid:"9932CC",darkred:"8B0000",darksalmon:"E9967A",darkseagreen:"8FBC8F",darkslateblue:"483D8B",darkslategray:"2F4F4F",darkturquoise:"00CED1",darkviolet:"9400D3",deeppink:"FF1493",deepskyblue:"00BFFF",dimgray:"696969",dodgerblue:"1E90FF",firebrick:"B22222",floralwhite:"FFFAF0",forestgreen:"228B22",fuchsia:"F0F",gainsboro:"DCDCDC",ghostwhite:"F8F8FF",gold:"FFD700",goldenrod:"DAA520",gray:"808080",green:"008000",greenyellow:"ADFF2F",honeydew:"F0FFF0",hotpink:"FF69B4",indianred:"CD5C5C",
|
||||
indigo:"4B0082",ivory:"FFFFF0",khaki:"F0E68C",lavender:"E6E6FA",lavenderblush:"FFF0F5",lawngreen:"7CFC00",lemonchiffon:"FFFACD",lightblue:"ADD8E6",lightcoral:"F08080",lightcyan:"E0FFFF",lightgoldenrodyellow:"FAFAD2",lightgreen:"90EE90",lightgrey:"D3D3D3",lightpink:"FFB6C1",lightsalmon:"FFA07A",lightseagreen:"20B2AA",lightskyblue:"87CEFA",lightslategray:"789",lightsteelblue:"B0C4DE",lightyellow:"FFFFE0",lime:"0F0",limegreen:"32CD32",linen:"FAF0E6",magenta:"F0F",maroon:"800000",mediumauqamarine:"66CDAA",
|
||||
mediumblue:"0000CD",mediumorchid:"BA55D3",mediumpurple:"9370D8",mediumseagreen:"3CB371",mediumslateblue:"7B68EE",mediumspringgreen:"00FA9A",mediumturquoise:"48D1CC",mediumvioletred:"C71585",midnightblue:"191970",mintcream:"F5FFFA",mistyrose:"FFE4E1",moccasin:"FFE4B5",navajowhite:"FFDEAD",navy:"000080",oldlace:"FDF5E6",olive:"808000",olivedrab:"688E23",orange:"FFA500",orangered:"FF4500",orchid:"DA70D6",palegoldenrod:"EEE8AA",palegreen:"98FB98",paleturquoise:"AFEEEE",palevioletred:"D87093",papayawhip:"FFEFD5",
|
||||
peachpuff:"FFDAB9",peru:"CD853F",pink:"FFC0CB",plum:"DDA0DD",powderblue:"B0E0E6",purple:"800080",red:"F00",rosybrown:"BC8F8F",royalblue:"4169E1",saddlebrown:"8B4513",salmon:"FA8072",sandybrown:"F4A460",seagreen:"2E8B57",seashell:"FFF5EE",sienna:"A0522D",silver:"C0C0C0",skyblue:"87CEEB",slateblue:"6A5ACD",slategray:"708090",snow:"FFFAFA",springgreen:"00FF7F",steelblue:"4682B4",tan:"D2B48C",teal:"008080",thistle:"D8BFD8",tomato:"FF6347",turquoise:"40E0D0",violet:"EE82EE",wheat:"F5DEB3",white:"FFF",
|
||||
whitesmoke:"F5F5F5",yellow:"FF0",yellowgreen:"9ACD32"};a.prototype={parse:function(){if(!this.Ca){var c=this.V,e;if(e=c.match(a.Sc)){this.Ca="rgb("+e[1]+","+e[2]+","+e[3]+")";this.qb=parseFloat(e[4])}else{if((e=c.toLowerCase())in a.gb)c="#"+a.gb[e];this.Ca=c;this.qb=c==="transparent"?0:1}}},O:function(c){this.parse();return this.Ca==="currentColor"?c.currentStyle.color:this.Ca},la:function(){this.parse();return this.qb}};g.pa=function(c){return b[c]||(b[c]=new a(c))};return a}();g.u=function(){function a(c){this.Ha=
|
||||
c;this.ch=0;this.U=[];this.wa=0}var b=a.ja={xa:1,ob:2,ea:4,ac:8,pb:16,fa:32,A:64,ga:128,ha:256,Aa:512,dc:1024,URL:2048};a.Ta=function(c,e){this.h=c;this.d=e};a.Ta.prototype={db:function(){return this.h&b.A||this.h&b.ga&&this.d==="0"},Y:function(){return this.db()||this.h&b.Aa}};a.prototype={dd:/\s/,Mc:/^[\+\-]?(\d*\.)?\d+/,url:/^url\(\s*("([^"]*)"|'([^']*)'|([!#$%&*-~]*))\s*\)/i,zb:/^\-?[_a-z][\w-]*/i,Yc:/^("([^"]*)"|'([^']*)')/,Fc:/^#([\da-f]{6}|[\da-f]{3})/i,bd:{px:b.A,em:b.A,ex:b.A,mm:b.A,cm:b.A,
|
||||
"in":b.A,pt:b.A,pc:b.A,deg:b.xa,rad:b.xa,grad:b.xa},sc:{rgb:1,rgba:1,hsl:1,hsla:1},next:function(c){function e(t,n){t=new a.Ta(t,n);if(!c){k.U.push(t);k.wa++}return t}function f(){k.wa++;return null}var h,j,d,i,k=this;if(this.wa<this.U.length)return this.U[this.wa++];for(;this.dd.test(this.Ha.charAt(this.ch));)this.ch++;if(this.ch>=this.Ha.length)return f();j=this.ch;h=this.Ha.substring(this.ch);d=h.charAt(0);switch(d){case "#":if(i=h.match(this.Fc)){this.ch+=i[0].length;return e(b.ea,i[0])}break;
|
||||
case '"':case "'":if(i=h.match(this.Yc)){this.ch+=i[0].length;return e(b.dc,i[2]||i[3]||"")}break;case "/":case ",":this.ch++;return e(b.ha,d);case "u":if(i=h.match(this.url)){this.ch+=i[0].length;return e(b.URL,i[2]||i[3]||i[4]||"")}}if(i=h.match(this.Mc)){d=i[0];this.ch+=d.length;if(h.charAt(d.length)==="%"){this.ch++;return e(b.Aa,d+"%")}if(i=h.substring(d.length).match(this.zb)){d+=i[0];this.ch+=i[0].length;return e(this.bd[i[0].toLowerCase()]||b.ac,d)}return e(b.ga,d)}if(i=h.match(this.zb)){d=
|
||||
i[0];this.ch+=d.length;if(d.toLowerCase()in g.$b.gb||d==="currentColor")return e(b.ea,d);if(h.charAt(d.length)==="("){this.ch++;if(d.toLowerCase()in this.sc){h=function(t){return t&&t.h&b.ga};i=function(t){return t&&t.h&(b.ga|b.Aa)};var m=function(t,n){return t&&t.d===n},l=function(){return k.next(1)};if((d.charAt(0)==="r"?i(l()):h(l()))&&m(l(),",")&&i(l())&&m(l(),",")&&i(l())&&(d==="rgb"||d==="hsa"||m(l(),",")&&h(l()))&&m(l(),")"))return e(b.ea,this.Ha.substring(j,this.ch));return f()}return e(b.pb,
|
||||
d)}return e(b.fa,d)}this.ch++;return e(b.ob,d)},z:function(){return this.U[this.wa-- -2]},all:function(){for(;this.next(););return this.U},da:function(c,e){for(var f=[],h,j;h=this.next();){if(c(h)){j=true;this.z();break}f.push(h)}return e&&!j?null:f}};return a}();var M=function(a){this.e=a};M.prototype={K:0,Qc:function(){var a=this.Ua,b;return!a||(b=this.o())&&(a.x!==b.x||a.y!==b.y)},Vc:function(){var a=this.Ua,b;return!a||(b=this.o())&&(a.i!==b.i||a.f!==b.f)},ub:function(){var a=this.e.getBoundingClientRect();
|
||||
return{x:a.left,y:a.top,i:a.right-a.left,f:a.bottom-a.top}},o:function(){return this.K?this.Da||(this.Da=this.ub()):this.ub()},Ec:function(){return!!this.Ua},Ja:function(){++this.K},La:function(){if(!--this.K){if(this.Da)this.Ua=this.Da;this.Da=null}}};(function(){function a(b){var c=g.p.ta(b);return function(){if(this.K){var e=this.rb||(this.rb={});return c in e?e[c]:(e[c]=b.call(this))}else return b.call(this)}}g.s={K:0,$:function(b){function c(e){this.e=e}g.p.fb(c.prototype,g.s,b);c.kc={};return c},
|
||||
m:function(){var b=this.qa(),c=this.constructor.kc;return b?b in c?c[b]:(c[b]=this.ba(b)):null},qa:a(function(){var b=this.e,c=this.constructor,e=b.style;b=b.currentStyle;var f=this.na,h=this.va,j=c.ic||(c.ic=g.F+f);c=c.jc||(c.jc=g.Sa+h.charAt(0).toUpperCase()+h.substring(1));return e[c]||b.getAttribute(j)||e[h]||b.getAttribute(f)}),g:a(function(){return!!this.m()}),D:a(function(){var b=this.qa(),c=b!==this.gc;this.gc=b;return c}),ma:a,Ja:function(){++this.K},La:function(){--this.K||delete this.rb}}})();
|
||||
g.Tb=g.s.$({na:g.F+"background",va:g.Sa+"Background",nc:{scroll:1,fixed:1,local:1},Ka:{"repeat-x":1,"repeat-y":1,repeat:1,"no-repeat":1},Nc:{"padding-box":1,"border-box":1,"content-box":1},rc:{"padding-box":1,"border-box":1},Rc:{top:1,right:1,bottom:1,left:1,center:1},Wc:{contain:1,cover:1},ba:function(a){function b(u){return u.Y()||u.h&i&&u.d in t}function c(u){return u.Y()&&g.k(u.d)||u.d==="auto"&&"auto"}var e=this.e.currentStyle,f,h,j=g.u.ja,d=j.ha,i=j.fa,k=j.ea,m,l,t=this.Rc,n,p,s=null;if(this.$a()){a=
|
||||
new g.u(a);s={M:[]};for(h={};f=a.next();){m=f.h;l=f.d;if(!h.P&&m&j.pb&&l==="linear-gradient"){n={ca:[],P:l};for(p={};f=a.next();){m=f.h;l=f.d;if(m&j.ob&&l===")"){p.color&&n.ca.push(p);n.ca.length>1&&g.p.fb(h,n);break}if(m&k){if(n.Xa||n.bb){f=a.z();if(f.h!==d)break;a.next()}p={color:g.pa(l)};f=a.next();if(f.Y())p.Fb=g.k(f.d);else a.z()}else if(m&j.xa&&!n.Xa&&!p.color&&!n.ca.length)n.Xa=new g.Rb(f.d);else if(b(f)&&!n.bb&&!p.color&&!n.ca.length){a.z();n.bb=new g.Na(a.da(function(u){return!b(u)},false))}else if(m&
|
||||
d&&l===","){if(p.color){n.ca.push(p);p={}}}else break}}else if(!h.P&&m&j.URL){h.Cb=l;h.P="image"}else if(b(f)&&!h.size){a.z();h.Ya=new g.Na(a.da(function(u){return!b(u)},false))}else if(m&i)if(l in this.Ka)h.Bb=l;else if(l in this.Nc){h.kd=l;if(l in this.rc)h.clip=l}else{if(l in this.nc)h.jd=l}else if(m&k&&!s.color)s.color=g.pa(l);else if(m&d)if(l==="/"){f=a.next();m=f.h;l=f.d;if(m&i&&l in this.Wc)h.size=l;else if(l=c(f))h.size={i:l,f:c(a.next())||a.z()&&l}}else{if(l===","&&h.P){s.M.push(h);h={}}}else return null}h.P&&
|
||||
s.M.push(h)}else this.Nb(function(){var u=e.backgroundPositionX,w=e.backgroundPositionY,r=e.backgroundImage,o=e.backgroundColor;s={};if(o!=="transparent")s.color=g.pa(o);if(r!=="none")s.M=[{P:"image",Cb:(new g.u(r)).next().d,Bb:e.backgroundRepeat,Ya:new g.Na((new g.u(u+" "+w)).all())}]});return s&&(s.color||s.M&&s.M[0])?s:null},Nb:function(a){var b=this.e.runtimeStyle,c=b.backgroundImage,e=b.backgroundColor;if(c)b.backgroundImage="";if(e)b.backgroundColor="";a=a.call(this);if(c)b.backgroundImage=
|
||||
c;if(e)b.backgroundColor=e;return a},qa:g.s.ma(function(){return this.$a()||this.Nb(function(){var a=this.e.currentStyle;return a.backgroundColor+" "+a.backgroundImage+" "+a.backgroundRepeat+" "+a.backgroundPositionX+" "+a.backgroundPositionY})}),$a:g.s.ma(function(){var a=this.e;return a.style[this.va]||a.currentStyle.getAttribute(this.na)}),Eb:function(){var a=0;if(g.J<7){a=this.e;a=""+(a.style[g.Sa+"PngFix"]||a.currentStyle.getAttribute(g.F+"png-fix"))==="true"}return a},g:g.s.ma(function(){return(this.$a()||
|
||||
this.Eb())&&!!this.m()})});g.Xb=g.s.$({Ib:["Top","Right","Bottom","Left"],Kc:{thin:"1px",medium:"3px",thick:"5px"},ba:function(){var a={},b={},c={},e=false,f=true,h=true,j=true;this.Ob(function(){for(var d=this.e.currentStyle,i=0,k,m,l,t,n,p,s;i<4;i++){l=this.Ib[i];s=l.charAt(0).toLowerCase();k=b[s]=d["border"+l+"Style"];m=d["border"+l+"Color"];l=d["border"+l+"Width"];if(i>0){if(k!==t)h=false;if(m!==n)f=false;if(l!==p)j=false}t=k;n=m;p=l;c[s]=g.pa(m);l=a[s]=g.k(b[s]==="none"?"0":this.Kc[l]||l);if(l.a(this.e)>
|
||||
0)e=true}});return e?{nb:a,Zc:b,tc:c,ed:j,uc:f,$c:h}:null},qa:g.s.ma(function(){var a=this.e,b=a.currentStyle,c;a.tagName in g.Jb&&a.offsetParent.currentStyle.borderCollapse==="collapse"||this.Ob(function(){c=b.borderWidth+"|"+b.borderStyle+"|"+b.borderColor});return c}),Ob:function(a){var b=this.e.runtimeStyle,c=b.borderWidth,e=b.borderColor;if(c)b.borderWidth="";if(e)b.borderColor="";a=a.call(this);if(c)b.borderWidth=c;if(e)b.borderColor=e;return a}});(function(){g.Oa=g.s.$({na:"border-radius",
|
||||
va:"borderRadius",ba:function(b){var c=null,e,f,h,j,d=false;if(b){f=new g.u(b);var i=function(){for(var k=[],m;(h=f.next())&&h.Y();){j=g.k(h.d);m=j.vb();if(m<0)return null;if(m>0)d=true;k.push(j)}return k.length>0&&k.length<5?{tl:k[0],tr:k[1]||k[0],br:k[2]||k[0],bl:k[3]||k[1]||k[0]}:null};if(b=i()){if(h){if(h.h&g.u.ja.ha&&h.d==="/")e=i()}else e=b;if(d&&b&&e)c={x:b,y:e}}}return c}});var a=g.k("0");a={tl:a,tr:a,br:a,bl:a};g.Oa.Qb={x:a,y:a}})();g.Vb=g.s.$({na:"border-image",va:"borderImage",Ka:{stretch:1,
|
||||
round:1,repeat:1,space:1},ba:function(a){var b=null,c,e,f,h,j,d,i=0,k,m=g.u.ja,l=m.fa,t=m.ga,n=m.A,p=m.Aa;if(a){c=new g.u(a);b={};for(var s=function(r){return r&&r.h&m.ha&&r.d==="/"},u=function(r){return r&&r.h&l&&r.d==="fill"},w=function(){h=c.da(function(r){return!(r.h&(t|p))});if(u(c.next())&&!b.fill)b.fill=true;else c.z();if(s(c.next())){i++;j=c.da(function(){return!(e.h&(t|p|n))&&!(e.h&l&&e.d==="auto")});if(s(c.next())){i++;d=c.da(function(){return!(e.h&(t|n))})}}else c.z()};e=c.next();){a=e.h;
|
||||
f=e.d;if(a&(t|p)&&!h){c.z();w()}else if(u(e)&&!b.fill){b.fill=true;w()}else if(a&l&&this.Ka[f]&&!b.repeat){b.repeat={f:f};if(e=c.next())if(e.h&l&&this.Ka[e.d])b.repeat.kb=e.d;else c.z()}else if(a&m.URL&&!b.src)b.src=f;else return null}if(!b.src||!h||h.length<1||h.length>4||j&&j.length>4||i===1&&j.length<1||d&&d.length>4||i===2&&d.length<1)return null;if(!b.repeat)b.repeat={f:"stretch"};if(!b.repeat.kb)b.repeat.kb=b.repeat.f;a=function(r,o){return{T:o(r[0]),S:o(r[1]||r[0]),L:o(r[2]||r[0]),Q:o(r[3]||
|
||||
r[1]||r[0])}};b.slice=a(h,function(r){return g.k(r.h&t?r.d+"px":r.d)});b.width=j&&j.length>0?a(j,function(r){return r.h&(n|p)?g.k(r.d):r.d}):(k=this.e.currentStyle)&&{T:g.k(k.borderTopWidth),S:g.k(k.borderRightWidth),L:g.k(k.borderBottomWidth),Q:g.k(k.borderLeftWidth)};b.ua=a(d||[0],function(r){return r.h&n?g.k(r.d):r.d})}return b}});g.Zb=g.s.$({na:"box-shadow",va:"boxShadow",ba:function(a){var b,c=g.k,e=g.u.ja,f;if(a){f=new g.u(a);b={ua:[],cb:[]};for(a=function(){for(var h,j,d,i,k,m;h=f.next();){d=
|
||||
h.d;j=h.h;if(j&e.ha&&d===",")break;else if(h.db()&&!k){f.z();k=f.da(function(l){return!l.db()})}else if(j&e.ea&&!i)i=d;else if(j&e.fa&&d==="inset"&&!m)m=true;else return false}h=k&&k.length;if(h>1&&h<5){(m?b.cb:b.ua).push({fd:c(k[0].d),gd:c(k[1].d),blur:c(k[2]?k[2].d:"0"),Xc:c(k[3]?k[3].d:"0"),color:g.pa(i||"currentColor")});return true}return false};a(););}return b&&(b.cb.length||b.ua.length)?b:null}});g.ec=g.s.$({qa:g.s.ma(function(){var a=this.e.currentStyle;return a.visibility+"|"+a.display}),
|
||||
ba:function(){var a=this.e,b=a.runtimeStyle;a=a.currentStyle;var c=b.visibility,e;b.visibility="";e=a.visibility;b.visibility=c;return{cd:e!=="hidden",xc:a.display!=="none"}},g:function(){return false}});g.B={Z:function(a){function b(c,e,f,h){this.e=c;this.q=e;this.j=f;this.parent=h}g.p.fb(b.prototype,g.B,a);return b},eb:false,R:function(){return false},Kb:function(){this.n();this.g()&&this.X()},jb:function(){this.eb=true},Lb:function(){this.g()?this.X():this.n()},Wa:function(a,b){this.Hb(a);for(var c=
|
||||
this.ka||(this.ka=[]),e=a+1,f=c.length,h;e<f;e++)if(h=c[e])break;c[a]=b;this.w().insertBefore(b,h||null)},ra:function(a){var b=this.ka;return b&&b[a]||null},Hb:function(a){var b=this.ra(a),c=this.Ba;if(b&&c){c.removeChild(b);this.ka[a]=null}},sa:function(a,b,c,e){var f=this.Va||(this.Va={}),h=f[a];if(!h){h=f[a]=g.p.Ga("shape");if(b)h.appendChild(h[b]=g.p.Ga(b));if(e){c=this.ra(e);if(!c){this.Wa(e,doc.createElement("group"+e));c=this.ra(e)}}c.appendChild(h);a=h.style;a.position="absolute";a.left=a.top=
|
||||
0;a.behavior="url(#default#VML)"}return h},Za:function(a){var b=this.Va,c=b&&b[a];if(c){c.parentNode.removeChild(c);delete b[a]}return!!c},xb:function(a){var b=this.e,c=this.q.o(),e=c.i,f=c.f,h,j,d,i,k,m;c=a.x.tl.a(b,e);h=a.y.tl.a(b,f);j=a.x.tr.a(b,e);d=a.y.tr.a(b,f);i=a.x.br.a(b,e);k=a.y.br.a(b,f);m=a.x.bl.a(b,e);a=a.y.bl.a(b,f);e=Math.min(e/(c+j),f/(d+k),e/(m+i),f/(h+a));if(e<1){c*=e;h*=e;j*=e;d*=e;i*=e;k*=e;m*=e;a*=e}return{x:{tl:c,tr:j,br:i,bl:m},y:{tl:h,tr:d,br:k,bl:a}}},oa:function(a,b,c){b=
|
||||
b||1;var e,f,h=this.q.o();f=h.i*b;h=h.f*b;var j=this.j.v,d=Math.floor,i=Math.ceil,k=a?a.T*b:0,m=a?a.S*b:0,l=a?a.L*b:0;a=a?a.Q*b:0;var t,n,p,s,u;if(c||j.g()){e=this.xb(c||j.m());c=e.x.tl*b;j=e.y.tl*b;t=e.x.tr*b;n=e.y.tr*b;p=e.x.br*b;s=e.y.br*b;u=e.x.bl*b;b=e.y.bl*b;f="m"+d(a)+","+d(j)+"qy"+d(c)+","+d(k)+"l"+i(f-t)+","+d(k)+"qx"+i(f-m)+","+d(n)+"l"+i(f-m)+","+i(h-s)+"qy"+i(f-p)+","+i(h-l)+"l"+d(u)+","+i(h-l)+"qx"+d(a)+","+i(h-b)+" x e"}else f="m"+d(a)+","+d(k)+"l"+i(f-m)+","+d(k)+"l"+i(f-m)+","+i(h-
|
||||
l)+"l"+d(a)+","+i(h-l)+"xe";return f},w:function(){var a=this.parent.ra(this.C),b;if(!a){a=doc.createElement(this.Fa);b=a.style;b.position="absolute";b.top=b.left=0;this.parent.Wa(this.C,a)}return a},n:function(){this.parent.Hb(this.C);delete this.Va;delete this.ka}};g.cc=g.B.Z({g:function(){var a=this.oc;for(var b in a)if(a.hasOwnProperty(b)&&a[b].g())return true;return false},R:function(){return this.j.lb.D()},jb:function(){if(this.g()){var a=this.wb(),b=a,c;a=a.currentStyle;var e=a.position,f=
|
||||
this.w().style,h=0,j=0;j=this.q.o();if(e==="fixed"&&g.J>6){h=j.x;j=j.y;b=e}else{do b=b.offsetParent;while(b&&b.currentStyle.position==="static");if(b){c=b.getBoundingClientRect();b=b.currentStyle;h=j.x-c.left-(parseFloat(b.borderLeftWidth)||0);j=j.y-c.top-(parseFloat(b.borderTopWidth)||0)}else{b=doc.documentElement;h=j.x+b.scrollLeft-b.clientLeft;j=j.y+b.scrollTop-b.clientTop}b="absolute"}f.position=b;f.left=h;f.top=j;f.zIndex=e==="static"?-1:a.zIndex;this.eb=true}},Lb:function(){},Mb:function(){var a=
|
||||
this.j.lb.m();this.w().style.display=a.cd&&a.xc?"":"none"},Kb:function(){this.g()?this.Mb():this.n()},wb:function(){var a=this.e;return a.tagName in g.Jb?a.offsetParent:a},w:function(){var a=this.Ba,b;if(!a){b=this.wb();a=this.Ba=doc.createElement("css3-container");a.style.direction="ltr";this.Mb();b.parentNode.insertBefore(a,b)}return a},n:function(){var a=this.Ba,b;if(a&&(b=a.parentNode))b.removeChild(a);delete this.Ba;delete this.ka}});g.Sb=g.B.Z({C:2,Fa:"background",R:function(){var a=this.j;
|
||||
return a.H.D()||a.v.D()},g:function(){var a=this.j;return a.N.g()||a.v.g()||a.H.g()||a.W.g()&&a.W.m().cb},X:function(){var a=this.q.o();if(a.i&&a.f){this.yc();this.zc()}},yc:function(){var a=this.j.H.m(),b=this.q.o(),c=this.e,e=a&&a.color,f,h;if(e&&e.la()>0){this.yb();a=this.sa("bgColor","fill",this.w(),1);f=b.i;b=b.f;a.stroked=false;a.coordsize=f*2+","+b*2;a.coordorigin="1,1";a.path=this.oa(null,2);h=a.style;h.width=f;h.height=b;a.fill.color=e.O(c);c=e.la();if(c<1)a.fill.opacity=c}else this.Za("bgColor")},
|
||||
zc:function(){var a=this.j.H.m(),b=this.q.o();a=a&&a.M;var c,e,f,h,j;if(a){this.yb();e=b.i;f=b.f;for(j=a.length;j--;){b=a[j];c=this.sa("bgImage"+j,"fill",this.w(),2);c.stroked=false;c.fill.type="tile";c.fillcolor="none";c.coordsize=e*2+","+f*2;c.coordorigin="1,1";c.path=this.oa(0,2);h=c.style;h.width=e;h.height=f;if(b.P==="linear-gradient")this.mc(c,b);else{c.fill.src=b.Cb;this.Pc(c,j)}}}for(j=a?a.length:0;this.Za("bgImage"+j++););},Pc:function(a,b){g.p.Pb(a.fill.src,function(c){var e=a.fill,f=this.e,
|
||||
h=this.q.o(),j=h.i;h=h.f;var d=this.j,i=d.I.m(),k=i&&i.nb;i=k?k.t.a(f):0;var m=k?k.r.a(f):0,l=k?k.b.a(f):0;k=k?k.l.a(f):0;d=d.H.m().M[b];f=d.Ya?d.Ya.coords(f,j-c.i-k-m,h-c.f-i-l):{x:0,y:0};d=d.Bb;l=m=0;var t=j+1,n=h+1,p=g.J===8?0:1;k=Math.round(f.x)+k+0.5;i=Math.round(f.y)+i+0.5;e.position=k/j+","+i/h;if(d&&d!=="repeat"){if(d==="repeat-x"||d==="no-repeat"){m=i+1;n=i+c.f+p}if(d==="repeat-y"||d==="no-repeat"){l=k+1;t=k+c.i+p}a.style.clip="rect("+m+"px,"+t+"px,"+n+"px,"+l+"px)"}},this)},mc:function(a,
|
||||
b){function c(B,C,z,F,H){if(z===0||z===180)return[F,C];else if(z===90||z===270)return[B,H];else{z=Math.tan(-z*t/180);B=z*B-C;C=-1/z;F=C*F-H;H=C-z;return[(F-B)/H,(z*F-C*B)/H]}}function e(){w=m>=90&&m<270?i:0;r=m<180?k:0;o=i-w;x=k-r}function f(){for(;m<0;)m+=360;m%=360}function h(B,C){var z=C[0]-B[0];B=C[1]-B[1];return Math.abs(z===0?B:B===0?z:Math.sqrt(z*z+B*B))}var j=this.e,d=this.q.o(),i=d.i,k=d.f;a=a.fill;var m=b.Xa,l=b.bb;b=b.ca;d=b.length;var t=Math.PI,n,p,s,u,w,r,o,x,q,y,A,D;if(l){l=l.coords(j,
|
||||
i,k);n=l.x;p=l.y}if(m){m=m.vc();f();e();if(!l){n=w;p=r}l=c(n,p,m,o,x);s=l[0];u=l[1]}else if(l){s=i-n;u=k-p}else{n=p=s=0;u=k}l=s-n;q=u-p;if(m===void 0){m=!l?q<0?90:270:!q?l<0?180:0:-Math.atan2(q,l)/t*180;f();e()}l=m%90?Math.atan2(l*i/k,q)/t*180:m+90;l+=180;l%=360;y=h([n,p],[s,u]);s=h([w,r],c(w,r,m,o,x));u=[];p=h([n,p],c(n,p,m,w,r))/s*100;n=[];for(q=0;q<d;q++)n.push(b[q].Fb?b[q].Fb.a(j,y):q===0?0:q===d-1?y:null);for(q=1;q<d;q++){if(n[q]===null){A=n[q-1];y=q;do D=n[++y];while(D===null);n[q]=A+(D-A)/
|
||||
(y-q+1)}n[q]=Math.max(n[q],n[q-1])}for(q=0;q<d;q++)u.push(p+n[q]/s*100+"% "+b[q].color.O(j));a.angle=l;a.type="gradient";a.method="sigma";a.color=b[0].color.O(j);a.color2=b[d-1].color.O(j);a.colors.value=u.join(",")},yb:function(){var a=this.e.runtimeStyle;a.backgroundImage="url(about:blank)";a.backgroundColor="transparent"},n:function(){g.B.n.call(this);var a=this.e.runtimeStyle;a.backgroundImage=a.backgroundColor=""}});g.Wb=g.B.Z({C:4,Fa:"border",qc:{TABLE:1,INPUT:1,TEXTAREA:1,SELECT:1,OPTION:1,
|
||||
IMG:1,HR:1,FIELDSET:1},Jc:{submit:1,button:1,reset:1},R:function(){var a=this.j;return a.I.D()||a.v.D()},g:function(){var a=this.j;return(a.N.g()||a.v.g()||a.H.g())&&a.I.g()},X:function(){var a=this.e,b=this.j.I.m(),c=this.q.o(),e=c.i;c=c.f;var f,h,j,d,i;if(b){this.Hc();b=this.Bc(2);d=0;for(i=b.length;d<i;d++){j=b[d];f=this.sa("borderPiece"+d,j.stroke?"stroke":"fill",this.w());f.coordsize=e*2+","+c*2;f.coordorigin="1,1";f.path=j.path;h=f.style;h.width=e;h.height=c;f.filled=!!j.fill;f.stroked=!!j.stroke;
|
||||
if(j.stroke){f=f.stroke;f.weight=j.mb+"px";f.color=j.color.O(a);f.dashstyle=j.stroke==="dashed"?"2 2":j.stroke==="dotted"?"1 1":"solid";f.linestyle=j.stroke==="double"&&j.mb>2?"ThinThin":"Single"}else f.fill.color=j.fill.O(a)}for(;this.Za("borderPiece"+d++););}},Hc:function(){var a=this.e,b=a.currentStyle,c=a.runtimeStyle,e=a.tagName,f=g.J===6,h;if(f&&e in this.qc||e==="BUTTON"||e==="INPUT"&&a.type in this.Jc){c.borderWidth="";e=this.j.I.Ib;for(h=e.length;h--;){f=e[h];c["padding"+f]="";c["padding"+
|
||||
f]=g.k(b["padding"+f]).a(a)+g.k(b["border"+f+"Width"]).a(a)+(!g.J===8&&h%2?1:0)}c.borderWidth=0}else if(f){if(a.childNodes.length!==1||a.firstChild.tagName!=="ie6-mask"){b=doc.createElement("ie6-mask");e=b.style;e.visibility="visible";for(e.zoom=1;e=a.firstChild;)b.appendChild(e);a.appendChild(b);c.visibility="hidden"}}else c.borderColor="transparent"},Bc:function(a){var b=this.e,c,e,f,h=this.j.I,j=[],d,i,k,m,l=Math.round,t,n,p;if(h.g()){c=h.m();h=c.nb;n=c.Zc;p=c.tc;if(c.ed&&c.$c&&c.uc){if(p.t.la()>
|
||||
0){c=h.t.a(b);k=c/2;j.push({path:this.oa({T:k,S:k,L:k,Q:k},a),stroke:n.t,color:p.t,mb:c})}}else{a=a||1;c=this.q.o();e=c.i;f=c.f;c=l(h.t.a(b));k=l(h.r.a(b));m=l(h.b.a(b));b=l(h.l.a(b));var s={t:c,r:k,b:m,l:b};b=this.j.v;if(b.g())t=this.xb(b.m());d=Math.floor;i=Math.ceil;var u=function(o,x){return t?t[o][x]:0},w=function(o,x,q,y,A,D){var B=u("x",o),C=u("y",o),z=o.charAt(1)==="r";o=o.charAt(0)==="b";return B>0&&C>0?(D?"al":"ae")+(z?i(e-B):d(B))*a+","+(o?i(f-C):d(C))*a+","+(d(B)-x)*a+","+(d(C)-q)*a+","+
|
||||
y*65535+","+2949075*(A?1:-1):(D?"m":"l")+(z?e-x:x)*a+","+(o?f-q:q)*a},r=function(o,x,q,y){var A=o==="t"?d(u("x","tl"))*a+","+i(x)*a:o==="r"?i(e-x)*a+","+d(u("y","tr"))*a:o==="b"?i(e-u("x","br"))*a+","+d(f-x)*a:d(x)*a+","+i(f-u("y","bl"))*a;o=o==="t"?i(e-u("x","tr"))*a+","+i(x)*a:o==="r"?i(e-x)*a+","+i(f-u("y","br"))*a:o==="b"?d(u("x","bl"))*a+","+d(f-x)*a:d(x)*a+","+d(u("y","tl"))*a;return q?(y?"m"+o:"")+"l"+A:(y?"m"+A:"")+"l"+o};b=function(o,x,q,y,A,D){var B=o==="l"||o==="r",C=s[o],z,F;if(C>0&&n[o]!==
|
||||
"none"&&p[o].la()>0){z=s[B?o:x];x=s[B?x:o];F=s[B?o:q];q=s[B?q:o];if(n[o]==="dashed"||n[o]==="dotted"){j.push({path:w(y,z,x,D+45,0,1)+w(y,0,0,D,1,0),fill:p[o]});j.push({path:r(o,C/2,0,1),stroke:n[o],mb:C,color:p[o]});j.push({path:w(A,F,q,D,0,1)+w(A,0,0,D-45,1,0),fill:p[o]})}else j.push({path:w(y,z,x,D+45,0,1)+r(o,C,0,0)+w(A,F,q,D,0,0)+(n[o]==="double"&&C>2?w(A,F-d(F/3),q-d(q/3),D-45,1,0)+r(o,i(C/3*2),1,0)+w(y,z-d(z/3),x-d(x/3),D,1,0)+"x "+w(y,d(z/3),d(x/3),D+45,0,1)+r(o,d(C/3),1,0)+w(A,d(F/3),d(q/
|
||||
3),D,0,0):"")+w(A,0,0,D-45,1,0)+r(o,0,1,0)+w(y,0,0,D,1,0),fill:p[o]})}};b("t","l","r","tl","tr",90);b("r","t","b","tr","br",0);b("b","r","l","br","bl",-90);b("l","b","t","bl","tl",-180)}}return j},n:function(){g.B.n.call(this);this.e.runtimeStyle.borderColor=""}});g.Ub=g.B.Z({C:5,Oc:["t","tr","r","br","b","bl","l","tl","c"],R:function(){return this.j.N.D()},g:function(){return this.j.N.g()},X:function(){this.w();var a=this.j.N.m(),b=this.q.o(),c=this.e,e=this.Gb;g.p.Pb(a.src,function(f){function h(w,
|
||||
r,o,x,q){w=e[w].style;var y=Math.max;w.width=y(r,0);w.height=y(o,0);w.left=x;w.top=q}function j(w,r,o){for(var x=0,q=w.length;x<q;x++)e[w[x]].imagedata[r]=o}var d=b.i,i=b.f,k=a.width,m=k.T.a(c),l=k.S.a(c),t=k.L.a(c);k=k.Q.a(c);var n=a.slice,p=n.T.a(c),s=n.S.a(c),u=n.L.a(c);n=n.Q.a(c);h("tl",k,m,0,0);h("t",d-k-l,m,k,0);h("tr",l,m,d-l,0);h("r",l,i-m-t,d-l,m);h("br",l,t,d-l,i-t);h("b",d-k-l,t,k,i-t);h("bl",k,t,0,i-t);h("l",k,i-m-t,0,m);h("c",d-k-l,i-m-t,k,m);j(["tl","t","tr"],"cropBottom",(f.f-p)/f.f);
|
||||
j(["tl","l","bl"],"cropRight",(f.i-n)/f.i);j(["bl","b","br"],"cropTop",(f.f-u)/f.f);j(["tr","r","br"],"cropLeft",(f.i-s)/f.i);if(a.repeat.kb==="stretch"){j(["l","r","c"],"cropTop",p/f.f);j(["l","r","c"],"cropBottom",u/f.f)}if(a.repeat.f==="stretch"){j(["t","b","c"],"cropLeft",n/f.i);j(["t","b","c"],"cropRight",s/f.i)}e.c.style.display=a.fill?"":"none"},this)},w:function(){var a=this.parent.ra(this.C),b,c,e,f=this.Oc,h=f.length;if(!a){a=doc.createElement("border-image");b=a.style;b.position="absolute";
|
||||
this.Gb={};for(e=0;e<h;e++){c=this.Gb[f[e]]=g.p.Ga("rect");c.appendChild(g.p.Ga("imagedata"));b=c.style;b.behavior="url(#default#VML)";b.position="absolute";b.top=b.left=0;c.imagedata.src=this.j.N.m().src;c.stroked=false;c.filled=false;a.appendChild(c)}this.parent.Wa(this.C,a)}return a}});g.Yb=g.B.Z({C:1,Fa:"outset-box-shadow",R:function(){var a=this.j;return a.W.D()||a.v.D()},g:function(){var a=this.j.W;return a.g()&&a.m().ua[0]},X:function(){function a(z,F,H,K,J,v,E){z=b.sa("shadow"+z+F,"fill",
|
||||
e,j-z);F=z.fill;z.coordsize=m*2+","+l*2;z.coordorigin="1,1";z.stroked=false;z.filled=true;F.color=J.O(c);if(v){F.type="gradienttitle";F.color2=F.color;F.opacity=0}z.path=E;u=z.style;u.left=H;u.top=K;u.width=m;u.height=l;return z}var b=this,c=this.e,e=this.w(),f=this.j,h=f.W.m().ua;f=f.v.m();var j=h.length,d=j,i,k=this.q.o(),m=k.i,l=k.f;k=g.J===8?1:0;for(var t=["tl","tr","br","bl"],n,p,s,u,w,r,o,x,q,y,A,D,B,C;d--;){p=h[d];w=p.fd.a(c);r=p.gd.a(c);i=p.Xc.a(c);o=p.blur.a(c);p=p.color;x=-i-o;if(!f&&o)f=
|
||||
g.Oa.Qb;x=this.oa({T:x,S:x,L:x,Q:x},2,f);if(o){q=(i+o)*2+m;y=(i+o)*2+l;A=o*2/q;D=o*2/y;if(o-i>m/2||o-i>l/2)for(i=4;i--;){n=t[i];B=n.charAt(0)==="b";C=n.charAt(1)==="r";n=a(d,n,w,r,p,o,x);s=n.fill;s.focusposition=(C?1-A:A)+","+(B?1-D:D);s.focussize="0,0";n.style.clip="rect("+((B?y/2:0)+k)+"px,"+(C?q:q/2)+"px,"+(B?y:y/2)+"px,"+((C?q/2:0)+k)+"px)"}else{n=a(d,"",w,r,p,o,x);s=n.fill;s.focusposition=A+","+D;s.focussize=1-A*2+","+(1-D*2)}}else{n=a(d,"",w,r,p,o,x);w=p.la();if(w<1)n.fill.opacity=w}}}});g.bc=
|
||||
g.B.Z({C:6,Fa:"imgEl",R:function(){var a=this.j;return this.e.src!==this.hc||a.v.D()},g:function(){var a=this.j;return a.v.g()||a.H.Eb()},X:function(){this.hc=j;this.Gc();var a=this.sa("img","fill",this.w()),b=a.fill,c=this.q.o(),e=c.i;c=c.f;var f=this.j.I.m();f=f&&f.nb;var h=this.e,j=h.src,d=Math.round;a.stroked=false;b.type="frame";b.src=j;b.position=(e?0.5/e:0)+","+(c?0.5/c:0);a.coordsize=e*2+","+c*2;a.coordorigin="1,1";a.path=this.oa(f?{T:d(f.t.a(h)),S:d(f.r.a(h)),L:d(f.b.a(h)),Q:d(f.l.a(h))}:
|
||||
0,2);a=a.style;a.width=e;a.height=c},Gc:function(){this.e.runtimeStyle.filter="alpha(opacity=0)"},n:function(){g.B.n.call(this);this.e.runtimeStyle.filter=""}});g.Qa=function(){function a(d){function i(){if(!z){var v,E,G=d.currentStyle,I=G.getAttribute(c)==="true";J=G.getAttribute(e);J=g.Ab===8?J!=="false":J==="true";if(!C){C=1;d.runtimeStyle.zoom=1;G=d;for(var O=1;G=G.previousSibling;)if(G.nodeType===1){O=0;break}if(O)d.className+=" "+g.Pa+"first-child"}y.Ja();if(I&&(E=y.o())&&(v=doc.documentElement||
|
||||
doc.body)&&(E.y>v.clientHeight||E.x>v.clientWidth||E.y+E.f<0||E.x+E.i<0)){if(!H){H=1;g.Ra.aa(i)}}else{z=1;H=C=0;g.Ra.Ma(i);A={H:new g.Tb(d),I:new g.Xb(d),N:new g.Vb(d),v:new g.Oa(d),W:new g.Zb(d),lb:new g.ec(d)};D=[A.H,A.I,A.N,A.v,A.W,A.lb];v=new g.cc(d,y,A);E=[new g.Yb(d,y,A,v),new g.Sb(d,y,A,v),new g.Wb(d,y,A,v),new g.Ub(d,y,A,v)];d.tagName==="IMG"&&E.push(new g.bc(d,y,A,v));v.oc=E;q=[v].concat(E);if(v=d.currentStyle.getAttribute(g.F+"watch-ancestors")){B=[];v=parseInt(v,10);E=0;for(I=d.parentNode;I&&
|
||||
(v==="NaN"||E++<v);){B.push(I);I.attachEvent("onpropertychange",u);I.attachEvent("onmouseenter",p);I.attachEvent("onmouseleave",s);I=I.parentNode}}if(J){g.ya.aa(m);g.ya.Tc()}m(1)}if(!F){F=1;d.attachEvent("onmove",k);d.attachEvent("onresize",k);d.attachEvent("onpropertychange",l);d.attachEvent("onmouseenter",p);d.attachEvent("onmouseleave",s);g.za.aa(k);g.G.aa(o)}y.La()}}function k(){y&&y.Ec()&&m()}function m(v){if(!K)if(z){var E,G;w();if(v||y.Qc()){E=0;for(G=q.length;E<G;E++)q[E].jb()}if(v||y.Vc()){E=
|
||||
0;for(G=q.length;E<G;E++)q[E].Lb()}r()}else C||i()}function l(){var v,E,G;v=event;if(!K&&!(v&&v.propertyName in j))if(z){w();v=0;for(E=q.length;v<E;v++){G=q[v];G.eb||G.jb();G.R()&&G.Kb()}r()}else C||i()}function t(){if(d)d.className+=f}function n(){if(d)d.className=d.className.replace(h,"")}function p(){setTimeout(t,0)}function s(){setTimeout(n,0)}function u(){var v=event.propertyName;if(v==="className"||v==="id")l()}function w(){y.Ja();for(var v=D.length;v--;)D[v].Ja()}function r(){for(var v=D.length;v--;)D[v].La();
|
||||
y.La()}function o(){if(F){if(B)for(var v=0,E=B.length,G;v<E;v++){G=B[v];G.detachEvent("onpropertychange",u);G.detachEvent("onmouseenter",p);G.detachEvent("onmouseleave",s)}d.detachEvent("onmove",m);d.detachEvent("onresize",m);d.detachEvent("onpropertychange",l);d.detachEvent("onmouseenter",p);d.detachEvent("onmouseleave",s);g.G.Ma(o);F=0}}function x(){if(!K){var v,E;o();K=1;if(q){v=0;for(E=q.length;v<E;v++)q[v].n()}J&&g.ya.Ma(m);g.za.Ma(m);q=y=A=D=B=d=null}}var q,y=new M(d),A,D,B,C,z,F,H,K,J;this.Ic=
|
||||
i;this.update=m;this.n=x;this.Ac=d}var b={},c=g.F+"lazy-init",e=g.F+"poll",f=" "+g.Pa+"hover",h=new RegExp("\\b"+g.Pa+"hover\\b","g"),j={background:1,bgColor:1,display:1};a.Cc=function(d){var i=g.p.ta(d);return b[i]||(b[i]=new a(d))};a.n=function(d){d=g.p.ta(d);var i=b[d];if(i){i.n();delete b[d]}};a.wc=function(){var d=[],i;if(b){for(var k in b)if(b.hasOwnProperty(k)){i=b[k];d.push(i.Ac);i.n()}b={}}return d};return a}();g.attach=function(a){g.Ab<9&&g.Qa.Cc(a).Ic()};g.detach=function(a){g.Qa.n(a)}};
|
||||
var N=window.PIE,P=element;function init(){N&&doc.media!=="print"&&N.attach(P)}function cleanup(){if(N){N.detach(P);N=P=0}}P.readyState==="complete"&&init();
|
||||
</script>
|
||||
</PUBLIC:COMPONENT>
|
||||
19
interio/js/pie.php
Normal file
@@ -0,0 +1,19 @@
|
||||
<?php
|
||||
/*
|
||||
This file is a wrapper, for use in PHP environments, which serves PIE.htc using the
|
||||
correct content-type, so that IE will recognize it as a behavior. Simply specify the
|
||||
behavior property to fetch this .php file instead of the .htc directly:
|
||||
|
||||
.myElement {
|
||||
[ ...css3 properties... ]
|
||||
behavior: url(PIE.php);
|
||||
}
|
||||
|
||||
This is only necessary when the web server is not configured to serve .htc files with
|
||||
the text/x-component content-type, and cannot easily be configured to do so (as is the
|
||||
case with some shared hosting providers).
|
||||
*/
|
||||
|
||||
header( 'Content-type: text/x-component' );
|
||||
include( 'PIE.htc' );
|
||||
?>
|
||||
235
interio/pricing.html
Normal file
@@ -0,0 +1,235 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
|
||||
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
|
||||
<!--[if lt IE 7]>
|
||||
<div style=' clear: both; text-align:center; position: relative;'>
|
||||
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
|
||||
</div>
|
||||
<![endif]-->
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="js/html5.js"></script>
|
||||
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body id="page4">
|
||||
<!--==============================header=================================-->
|
||||
<header>
|
||||
<div class="row-1">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="grid_12">
|
||||
<nav>
|
||||
<ul class="menu">
|
||||
<li><a href="index.html">About Us</a></li>
|
||||
<li><a href="services.html">Services</a></li>
|
||||
<li><a href="catalogue.html">Catalogue</a></li>
|
||||
<li><a class="active" href="pricing.html">Pricing</a></li>
|
||||
<li><a href="contacts.html">Contacts</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-2">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="grid_9">
|
||||
<h1>
|
||||
<a class="logo" href="index.html">Int<strong>e</strong>rior</a>
|
||||
<span>Design</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="grid_3">
|
||||
<form id="search-form" method="post" enctype="multipart/form-data">
|
||||
<fieldset>
|
||||
<div class="search-field">
|
||||
<input name="search" type="text" />
|
||||
<a class="search-button" href="#" onClick="document.getElementById('search-form').submit()"><span>search</span></a>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header><div class="ic">More Website Templates @ TemplateMonster.com - August22nd 2011!</div>
|
||||
|
||||
<!-- content -->
|
||||
<section id="content">
|
||||
<div class="bg-top">
|
||||
<div class="bg-top-2">
|
||||
<div class="bg">
|
||||
<div class="bg-top-shadow">
|
||||
<div class="main">
|
||||
<div class="box">
|
||||
<div class="padding">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<div class="grid_12">
|
||||
<div class="indent-left p2">
|
||||
<h3 class="p0">Latest Income</h3>
|
||||
</div>
|
||||
<div class="wrapper p4">
|
||||
<article class="grid_4 alpha">
|
||||
<div class="indent-left">
|
||||
<figure class="frame2 p2"><img src="images/page4-img1.jpg" alt="" /></figure>
|
||||
<p class="color-4 prev-indent-bot">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
|
||||
<p>Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.</p>
|
||||
<div class="wrapper">
|
||||
<span class="price fleft">$45.99</span>
|
||||
<a class="button fright" href="#">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="grid_4">
|
||||
<div class="indent3">
|
||||
<figure class="frame2 p2"><img src="images/page4-img2.jpg" alt="" /></figure>
|
||||
<p class="color-4 prev-indent-bot">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.</p>
|
||||
<p>Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt eque porro quisquam est, qui dolorem ipsum.</p>
|
||||
<div class="wrapper">
|
||||
<span class="price fleft">$54.99</span>
|
||||
<a class="button fright" href="#">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="grid_4 omega">
|
||||
<div class="indent-right">
|
||||
<figure class="frame2 p2"><img src="images/page4-img3.jpg" alt="" /></figure>
|
||||
<p class="color-4 prev-indent-bot">Feque porro quisquam est, qui dolorem ipsum quia dolor sit consectetur.</p>
|
||||
<p>Adipisci velit, sed quia non numquam eius modi tempora incidu labore et dolore magnam aliquam quaerat voluptatem.</p>
|
||||
<div class="wrapper">
|
||||
<span class="price fleft">$38.99</span>
|
||||
<a class="button fright" href="#">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<article class="grid_4 alpha">
|
||||
<div class="indent-left">
|
||||
<figure class="frame2 p2"><img src="images/page4-img4.jpg" alt="" /></figure>
|
||||
<p class="color-4 prev-indent-bot">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium.</p>
|
||||
<p>Doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta.</p>
|
||||
<div class="wrapper">
|
||||
<span class="price fleft">$45.99</span>
|
||||
<a class="button fright" href="#">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="grid_4">
|
||||
<div class="indent3">
|
||||
<figure class="frame2 p2"><img src="images/page4-img5.jpg" alt="" /></figure>
|
||||
<p class="color-4 prev-indent-bot">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit.</p>
|
||||
<p>Sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt eque porro quisquam est, qui dolorem ipsum.</p>
|
||||
<div class="wrapper">
|
||||
<span class="price fleft">$54.99</span>
|
||||
<a class="button fright" href="#">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
<article class="grid_4 omega">
|
||||
<div class="indent-right">
|
||||
<figure class="frame2 p2"><img src="images/page4-img6.jpg" alt="" /></figure>
|
||||
<p class="color-4 prev-indent-bot">Feque porro quisquam est, qui dolorem ipsum quia dolor sit consectetur.</p>
|
||||
<p>Adipisci velit, sed quia non numquam eius modi tempora incidu labore et dolore magnam aliquam quaerat voluptatem.</p>
|
||||
<div class="wrapper">
|
||||
<span class="price fleft">$38.99</span>
|
||||
<a class="button fright" href="#">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-bot">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<article class="grid_4">
|
||||
<h3 class="p2">New Furniture</h3>
|
||||
<div class="wrapper">
|
||||
<figure class="img-indent frame2"><img src="images/page4-img7.jpg" alt="" /></figure>
|
||||
<p class="prev-indent-bot color-4">At vero eos eaccusa mus etusto odio.</p>
|
||||
<p class="prev-indent-bot">Tium voluptatum del eniti atque corrupti quos dolores.</p>
|
||||
<a class="button" href="#">View More</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="grid_8">
|
||||
<h3 class="prev-indent-bot2">Our Pricing</h3>
|
||||
<div class="wrapper">
|
||||
<div class="grid_4 alpha">
|
||||
<div class="indent-right2">
|
||||
<ul class="price-list">
|
||||
<li><span>$6700.00</span><a href="#">Totam rem aperiam eaque</a><strong> </strong></li>
|
||||
<li><span>$4370.00</span><a href="#">Inventore veritatis quasi</a><strong> </strong></li>
|
||||
<li><span>$5780.00</span><a href="#">Nemo enim ipsam voluptatem</a><strong> </strong></li>
|
||||
<li><span>$2300.00</span><a href="#">Voluptas sit aspernatur aut</a><strong> </strong></li>
|
||||
<li><span>$3650.00</span><a href="#">Sed quia consequuntur magni</a><strong> </strong></li>
|
||||
<li class="last"><span>$7900.00</span><a href="#">Ratione voluptatem sequi</a><strong> </strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid_4 omega">
|
||||
<div class="indent-right2">
|
||||
<ul class="price-list">
|
||||
<li><span>$6700.00</span><a href="#">Totam rem aperiam eaque</a><strong> </strong></li>
|
||||
<li><span>$4370.00</span><a href="#">Inventore veritatis quasi</a><strong> </strong></li>
|
||||
<li><span>$5780.00</span><a href="#">Nemo enim ipsam voluptatem</a><strong> </strong></li>
|
||||
<li><span>$2300.00</span><a href="#">Voluptas sit aspernatur aut</a><strong> </strong></li>
|
||||
<li><span>$3650.00</span><a href="#">Sed quia consequuntur magni</a><strong> </strong></li>
|
||||
<li class="last"><span>$7900.00</span><a href="#">Ratione voluptatem sequi</a><strong> </strong></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==============================footer=================================-->
|
||||
<footer>
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<div class="grid_4">
|
||||
<div>Interior Design © 2011 <a class="link color-3" href="#">Privacy Policy</a></div>
|
||||
<div><a rel="nofollow" target="_blank" href="http://www.templatemonster.com/">Website Template</a> by TemplateMonster.com</div>
|
||||
<!-- {%FOOTER_LINK} -->
|
||||
</div>
|
||||
<div class="grid_4">
|
||||
<span class="phone-numb"><span>+1(800)</span> 123-1234</span>
|
||||
</div>
|
||||
<div class="grid_4">
|
||||
<ul class="list-services">
|
||||
<li><a href="#"></a></li>
|
||||
<li><a class="item-2" href="#"></a></li>
|
||||
<li><a class="item-3" href="#"></a></li>
|
||||
<li><a class="item-4" href="#"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
5
interio/readme.md
Normal file
@@ -0,0 +1,5 @@
|
||||
## Project Description
|
||||
|
||||
* [live example](https://learning-zone.github.io/website-templates/interio/)
|
||||
|
||||

|
||||
40
interio/readme.txt
Normal file
@@ -0,0 +1,40 @@
|
||||
======================================================================
|
||||
|
||||
Website Template Name: Interior Design
|
||||
Website Template URI: http://www.templatemonster.com/free-templates/free-website-template-clean-style-interior-design.php
|
||||
Version: 1
|
||||
Author: TemplateMonster.com Team
|
||||
Author URI: http://www.templatemonster.com/
|
||||
|
||||
======================================================================
|
||||
|
||||
|
||||
+++ Be sure to visit TemplateMonster.com for more website templates +++
|
||||
|
||||
|
||||
+++ License +++
|
||||
|
||||
Spa Salon website template is 100% FREE! We kindly ask you to
|
||||
leave the footer links intact. Thank you so much! :)
|
||||
|
||||
|
||||
|
||||
+++ INSTALLATION & EDITING +++
|
||||
|
||||
- Copy all the files from the 'site' directory to the appropriate (usually 'www' or 'public_html') directory on your hosting. That's it.
|
||||
- This template may be edited with any HTML editor. If you do not know where to get one, you may consider trying NotePad++. It can be downloaded at notepad-plus.sourceforge.net and it's free.
|
||||
|
||||
|
||||
|
||||
+++ HOW TO PUT YOUR OWN LOGO+++
|
||||
|
||||
You need to replace logo.png (it is located in site>images>logo.png) with your own .png file.
|
||||
|
||||
|
||||
+++ IMPORTANT NOTICE +++
|
||||
|
||||
TemplateMonster doesn't provide support services on free templates - including this one. We only provide support for the products that are being purchased from TemplateMonster.
|
||||
Our free templates are produced according to the latest web standards and we’ve been trying to make the process of working with them as easy as possible, so for people with minimum web develpment
|
||||
experience it should be easy to work with them.
|
||||
|
||||
|
||||
201
interio/services.html
Normal file
@@ -0,0 +1,201 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title></title>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
|
||||
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
|
||||
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
|
||||
<!--[if lt IE 7]>
|
||||
<div style=' clear: both; text-align:center; position: relative;'>
|
||||
<a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a>
|
||||
</div>
|
||||
<![endif]-->
|
||||
<!--[if lt IE 9]>
|
||||
<script type="text/javascript" src="js/html5.js"></script>
|
||||
<link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body id="page2">
|
||||
<!--==============================header=================================-->
|
||||
<header>
|
||||
<div class="row-1">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="grid_12">
|
||||
<nav>
|
||||
<ul class="menu">
|
||||
<li><a href="index.html">About Us</a></li>
|
||||
<li><a class="active" href="services.html">Services</a></li>
|
||||
<li><a href="catalogue.html">Catalogue</a></li>
|
||||
<li><a href="pricing.html">Pricing</a></li>
|
||||
<li><a href="contacts.html">Contacts</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row-2">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="grid_9">
|
||||
<h1>
|
||||
<a class="logo" href="index.html">Int<strong>e</strong>rior</a>
|
||||
<span>Design</span>
|
||||
</h1>
|
||||
</div>
|
||||
<div class="grid_3">
|
||||
<form id="search-form" method="post" enctype="multipart/form-data">
|
||||
<fieldset>
|
||||
<div class="search-field">
|
||||
<input name="search" type="text" />
|
||||
<a class="search-button" href="#" onClick="document.getElementById('search-form').submit()"><span>search</span></a>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header><div class="ic">More Website Templates @ TemplateMonster.com - August22nd 2011!</div>
|
||||
<!-- content -->
|
||||
<section id="content">
|
||||
<div class="bg-top">
|
||||
<div class="bg-top-2">
|
||||
<div class="bg">
|
||||
<div class="bg-top-shadow">
|
||||
<div class="main">
|
||||
<div class="box p3">
|
||||
<div class="padding">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<div class="grid_12">
|
||||
<div class="wrapper">
|
||||
<article class="grid_4 alpha">
|
||||
<div class="indent">
|
||||
<h3 class="prev-indent-bot2">Interior Services</h3>
|
||||
<ul class="list-2">
|
||||
<li><a href="#">Sed ut perspiciatis unde omnis </a></li>
|
||||
<li><a href="#">Fiste natus error volutem accusantium</a></li>
|
||||
<li><a href="#">Doloremque laudantium totam rem</a></li>
|
||||
<li><a href="#">Eaque ipsa quae illo inventore veritatis</a></li>
|
||||
<li><a href="#">Quasi architecto beatae vitae dicta</a></li>
|
||||
<li><a href="#">Nemo enim ipsam voluptatem</a></li>
|
||||
<li><a href="#">Wuia voluptas sit aspernatur odit aut</a></li>
|
||||
<li><a href="#">Consequuntur magni dolores qui</a></li>
|
||||
<li><a href="#">Ratione voluptatem sequi nesciunt</a></li>
|
||||
<li class="last-item"><a href="#">Neque porro quisquam est qui</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
<article class="grid_8 omega">
|
||||
<div class="indent-right">
|
||||
<h3 class="p2">Company Profile</h3>
|
||||
<div class="wrapper prev-indent-bot2">
|
||||
<figure class="img-indent2 frame2"><img src="images/page2-img1.jpg" alt="" /></figure>
|
||||
<div class="extra-wrap">
|
||||
<h6 class="prev-indent-bot">At vero eos et accusamus et iusto odio dignissimos ducims qui blanditiis praesentium. </h6>
|
||||
Voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
|
||||
</div>
|
||||
</div>
|
||||
<p>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae taque earum rerum.</p>
|
||||
<a class="button" href="#">Read More</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<article class="grid_4">
|
||||
<h3 class="color-1 p2">Consultation</h3>
|
||||
<span class="text-1">Lorem ipsum dolor sit amet, con sectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore dolore magna aliqua enim <br>ad minim veniam.</span>
|
||||
</article>
|
||||
<article class="grid_4">
|
||||
<h3 class="color-1 p2">Our Mission</h3>
|
||||
<span class="text-1">Duis aute irure dolor in reprehen derit in voluptate velit esse cillum dolore eu fugiat nulla xcepteur sint occaecat cupidatat non proident, sunt in culpa qui officia.</span>
|
||||
</article>
|
||||
<article class="grid_4">
|
||||
<h3 class="color-1 indent-bot">Consultation</h3>
|
||||
<form id="subscribe-form" method="post" enctype="multipart/form-data">
|
||||
<fieldset>
|
||||
<div class="subscribe-field">
|
||||
<input type="text" />
|
||||
</div>
|
||||
<a class="button" href="#" onClick="document.getElementById('subscribe-form').submit()">Subscribe</a>
|
||||
</fieldset>
|
||||
</form>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-bot">
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<article class="grid_4">
|
||||
<div class="indent-right2">
|
||||
<h3 class="prev-indent-bot2">Space Planning</h3>
|
||||
<ul class="list-2">
|
||||
<li><a href="#">Totam rem aperiam eaque ipsa quae abillo</a></li>
|
||||
<li><a href="#">Inventore veritatis quasi architecto beatae vitae</a></li>
|
||||
<li><a href="#">Nemo enim ipsam voluptatem quia</a></li>
|
||||
<li><a href="#">Voluptas sit aspernatur aut odit aut fugit</a></li>
|
||||
<li class="last-item"><a href="#">Sed quia consequuntur magni dolores eos</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
<article class="grid_8">
|
||||
<h3 class="p2">Selection & Installation</h3>
|
||||
<div class="wrapper">
|
||||
<figure class="img-indent2 frame2"><img src="images/page2-img2.jpg" alt="" /></figure>
|
||||
<div class="extra-wrap">
|
||||
<h6 class="p1">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias.</h6>
|
||||
Excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctioam libero tempore cum soluta.
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!--==============================footer=================================-->
|
||||
<footer>
|
||||
<div class="main">
|
||||
<div class="container_12">
|
||||
<div class="wrapper">
|
||||
<div class="grid_4">
|
||||
<div>Interior Design © 2011 <a class="link color-3" href="#">Privacy Policy</a></div>
|
||||
<div><a rel="nofollow" target="_blank" href="http://www.templatemonster.com/">Website Template</a> by TemplateMonster.com | <a rel="nofollow" target="_blank" href="http://www.html5xcss3.com/">html5xcss3.com</a></div>
|
||||
<!-- {%FOOTER_LINK} -->
|
||||
</div>
|
||||
<div class="grid_4">
|
||||
<span class="phone-numb"><span>+1(800)</span> 123-1234</span>
|
||||
</div>
|
||||
<div class="grid_4">
|
||||
<ul class="list-services">
|
||||
<li><a href="#"></a></li>
|
||||
<li><a class="item-2" href="#"></a></li>
|
||||
<li><a class="item-3" href="#"></a></li>
|
||||
<li><a class="item-4" href="#"></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||