Responsive image container height.
Hi all
I have a demo here - http://www.ttmt.org.uk/gallery/
It’s a responsive thumbnails carousel and image slideshow.
The thumbnails load underneath the main image before the slideshow starts.
All the images have the same dimensions so I have set the min-height of the main image container
to the height of the images so the thumbnails load in the correct position.
My problem is when the window is sized the main image’s height changes but the thumbnails stay in
the same position.
I would like the thumbnails to start in the correct position below the main image and then move up with the main image when it’s height changes.
If I set the image container to max-height the thumbnails start in the wrong position but follow the height of the main images when the window is resized.
http://www.ttmt.org.uk/gallery-2/
How can I load the thumbnails in the correct position and move them when the window is resized.
<!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;
min-height:606px;
}
#bigImg img{
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;
border: 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="" alt="" />
</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>
