Skip to content
Permalink
master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
<!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: #333;
margin: 10px;
width: 325px;
height: 500px;
float: left;
}
.content li{
margin: 8px 0;
overflow: hidden;
}
.content li a{
display: inline-block;
border: 7px solid rgba(255,255,255,.1);
}
.content .mTSButton{ background-color: #333; }
@media only screen and (min-width: 1024px){
.content{
width: 65%;
height: auto;
float: none;
}
.content li{
float: left;
margin: 0 4px;
}
}
</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">
<div id="info">
<p>Resize browser to test: @media only screen and (min-width: 1024px)</p>
</div>
<!-- demo content -->
<div id="content-1" class="content">
<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">
<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>
<script>
(function($){
$(window).load(function(){
$("#content-1").mThumbnailScroller({
axis:"yx",
type:"click-thumb",
markup:{ buttonsHTML:{ up:"SVG set 2",down:"SVG set 2",left:"SVG set 2",right:"SVG set 2" } }
});
$("#content-2").mThumbnailScroller({
axis:"yx",
type:"hover-precise"
});
});
})(jQuery);
</script>
</body>
</html>