i thought that was going to work but inbetween the image loading the thumbnails jump upto the top again.
http://www.ttmt.org.uk/gallery-4/
Code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Title of the document</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
text-align:center;
}
#spinner,
.arrow{
display:none;
}
#controls{
opacity:0;
}
#spinner{
position:absolute;
top:10px;
left:50%;
}
section#wrap{
max-width:915px;
border-left:40px solid #fff;
border-right:40px solid #fff;
margin:0 auto;
}
#bigImg{
margin:70px 0 0px 0;
width:100%;
background:#fff;
}
#bigImg img{
width:915px;
max-width:100%;
height:auto;
text-align:center;
}
#controls{
margin:3px 0;
/*border-top:1px dotted #eee;*/
}
#controls ul{
list-style:none;
}
#controls ul li{
display:inline-block;
height:25px;
width:25px;
text-indent:-999em;
background:url('images/controls.png') 0 0 no-repeat;
}
#controls ul li:hover{
cursor:pointer;
}
#controls ul li#back{
background-position:0px 0px;
}
#controls ul li#back:hover{
background-position:0px -25px;
}
#controls ul li#stop{
background-position:-25px 0px;
}
#controls ul li#stop:hover{
background-position:-25px -25px;
}
#controls ul li#play{
display:none;
background-position:-50px 0px;
}
#controls ul li#play:hover{
background-position:-50px -25px;
}
#controls ul li#forward{
background-position:-75px 0px;
}
#controls ul li#forward:hover{
background-position:-75px -25px;
}
#thumbWrap{
max-width:100%;
background:#fff;
margin:0 25px;
position:relative;
}
.thumbs{
overflow:hidden;
white-space: nowrap;
margin:0 5px;
}
.thumbs ul{
position:relative;
float:left;
}
.thumbs ul li{
display: inline-block;
}
.thumbs ul li a{
display:block;
float:left;
}
.thumbs ul li a img{
display:none;
opacity:.6;
}
.thumbs ul li a img:hover{
opacity:1;
}
.arrow{
font-size:1.5em;
padding:0 5px;
color:#aaa;
position:absolute;
margin:5px 0 0 0;
}
.arrow:hover{
cursor:pointer;
color:blue;
}
.left{
top:0;
left:-30px;
}
.right{
right:-30px;
top:0;
}
@media only screen and (max-width:400px){
section#wrap{
border-left:5px solid #fff;
border-right:5px solid #fff;
margin:0 auto;
}
#bigImg,
#controls{
display:none;
}
.arrow{
color:#fff;
position:static;
display:none;
}
#thumbWrap{
max-width:100%;
background:#fff;
margin:0;
position:relative;
1border: 1px solid #999;
}
.thumbs{
overflow:auto;
white-space: normal;
margin:0 5px;
}
.thumbs ul{
position:static;
float:none;
}
.thumbs ul li{
display:block;
max-width:100%;
}
.thumbs ul li a{
display:block;
float:none;
}
.thumbs ul li a img{
width:380px;
display:none;
opacity:.6;
}
.thumbs ul li a img:hover{
opacity:1;
}
}
</style>
</head>
<body>
<section id="wrap">
<img id="spinner" src="images/ajax-loader.gif" alt="loader" />
<div id="imgWrap">
<div id="bigImg">
<img src="images/01.jpg" alt="" width="915" height="600" />
</div>
</div><!-- #imgWrap -->
<div id="controls">
<ul>
<li id="back">Back</li>
<li id="stop">Stop</li>
<li id="play">Play</li>
<li id="forward">Forward</li>
</ul>
</div>
<div id="thumbWrap">
<a class="arrow left">←</a>
<div class="thumbs">
<ul>
<li><a href="images/01.jpg" id="0"><img src="images/01_th.jpg" /></a></li>
<li><a href="images/02.jpg" id="1"><img src="images/02_th.jpg" /></a></li>
<li><a href="images/03.jpg" id="2"><img src="images/03_th.jpg" /></a></li>
<li><a href="images/04.jpg" id="3"><img src="images/04_th.jpg" /></a></li>
<li><a href="images/05.jpg" id="4"><img src="images/05_th.jpg" /></a></li>
<li><a href="images/06.jpg" id="5"><img src="images/06_th.jpg" /></a></li>
<li><a href="images/07.jpg" id="6"><img src="images/07_th.jpg" /></a></li>
<li><a href="images/08.jpg" id="7"><img src="images/08_th.jpg" /></a></li>
<li><a href="images/09.jpg" id="8"><img src="images/09_th.jpg" /></a></li>
<li><a href="images/10.jpg" id="9"><img src="images/10_th.jpg" /></a></li>
<li><a href="images/11.jpg" id="10"><img src="images/11_th.jpg" /></a></li>
<li><a href="images/12.jpg" id="11"><img src="images/12_th.jpg" /></a></li>
<li><a href="images/13.jpg" id="12"><img src="images/13_th.jpg" /></a></li>
<li><a href="images/14.jpg" id="13"><img src="images/14_th.jpg" /></a></li>
<li><a href="images/15.jpg" id="14"><img src="images/15_th.jpg" /></a></li>
</ul>
</div>
<a class="arrow right">→</a>
</div><!-- #thumbWrap-->
</section>
<script src="js/imagesLoaded.js"></script>
<script src="js/test.js"></script>
</body>
</html>
Reply With Quote
Originally Posted by ttmt
Bookmarks