Permalink
Find file
c6f650c Oct 9, 2014
166 lines (154 sloc) 6.64 KB
<!DOCTYPE html>
<!--[if IE 8 ]><html lang="en" class="ie8"><![endif]-->
<!--[if IE 9 ]><html lang="en" class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>jQuery thumbnail/image scroller demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- stylesheet for demo and examples -->
<link rel="stylesheet" href="style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<!-- plugin stylesheet -->
<link rel="stylesheet" href="../jquery.mThumbnailScroller.css">
<!-- demo CSS -->
<style>
.content{
overflow: auto;
position: relative;
padding: 10px;
background: #444;
margin: 20px auto;
width: 75%;
height: auto;
}
.content li{ margin: 0 4px; }
.content li a{
display: block;
border: 7px solid rgba(255,255,255,.1);
}
#content-1{
padding-left: 50px;
padding-right: 50px;
background-color: transparent;
}
#content-1 .mTSButtonIcon{ fill: #aaa; }
#content-1 .mTSButton .mTSButtonIcon{ opacity: .5; }
#content-1 .mTSButton:hover .mTSButtonIcon{ opacity: 1; }
#content-3{
width: 277px;
height: 500px;
margin-top: 40px;
margin-bottom: 40px;
padding: 0;
background-color: #292929;
}
#content-3 li{ margin: 8px 0; }
#content-3 li a{ border: none; text-align: center; }
#content-3 li img{ border: 14px solid #333; }
</style>
</head>
<body>
<header>
<h1><a href="http://manos.malihu.gr/jquery-thumbnail-scroller" class="logo">jQuery thumbnail/image scroller</a></h1>
<hr />
</header>
<div id="demo">
<section id="examples" class="light">
<!-- demo content -->
<div id="content-1" class="content mThumbnailScroller" data-mts-type="click-thumb" data-mts-theme="buttons-out">
<ul>
<li><a href="#"><img src="thumbnails/img1.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img2.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img3.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img4.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img5.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img6.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img7.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img8.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img9.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img10.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img11.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img12.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img13.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img14.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img15.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img16.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img17.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img18.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img19.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img20.jpg" /></a></li>
</ul>
</div>
<!-- -//- -->
<!-- demo content -->
<div id="content-2" class="content mThumbnailScroller" data-mts-theme="hover-full">
<ul>
<li><a href="#"><img src="thumbnails/img1.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img2.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img3.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img4.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img5.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img6.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img7.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img8.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img9.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img10.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img11.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img12.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img13.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img14.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img15.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img16.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img17.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img18.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img19.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img20.jpg" /></a></li>
</ul>
</div>
<!-- -//- -->
<!-- demo content -->
<div id="content-3" class="content mThumbnailScroller" data-mts-axis="y">
<ul>
<li><a href="#"><img src="thumbnails/img1.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img2.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img3.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img4.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img5.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img6.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img7.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img8.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img9.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img10.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img11.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img12.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img13.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img14.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img15.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img16.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img17.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img18.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img19.jpg" /></a></li>
<li><a href="#"><img src="thumbnails/img20.jpg" /></a></li>
</ul>
</div>
<!-- -//- -->
</section>
</div>
<footer>
<hr />
<p><a href="http://manos.malihu.gr/jquery-thumbnail-scroller">Plugin home</a> <a href="http://opensource.org/licenses/MIT">MIT License</a></p>
</footer>
<!-- Google CDN jQuery with fallback to local -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="../js/minified/jquery-1.11.0.min.js"><\/script>')</script>
<!-- plugin script -->
<script src="../jquery.mThumbnailScroller.js"></script>
</body>
</html>