I am facing an issue with aligning the thumbs horizontally as they are currently being displayed one on top of the other. My requirement is to have them spaced 5px apart.
To achieve this, I need to use absolute positioning. This will allow me to control the layout so that when a thumb is clicked, it enlarges and the ones to its left disappear to the left while those to its right move to the right.
Here is the HTML code:
<div class="portItem">
<div class="itemContent-wrap">
<div class="itemContent">
<div class="container">
<div class="thumbWrap">
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
<div class="thumb"></div>
</div>
</div>
</div>
</div>
</div>
And here is the CSS code:
.thumb {
height: 200px;
width: 450px;
position: absolute;
display: inline-block;
background: #D0E182;
margin-top: 25px;
margin-right: 5px;
transition: all 1s ease-in-out;
top: 0;
left: 0;
}
For JavaScript functionality, I have the following code:
$(document).ready(function(){
$('.portItem').each(function() {
$('.thumb', this).each(function(i) {
$('.thumb').css('left',40*i);
}).appendTo('.body');
});
});
You can view the working example in this Fiddle: http://jsfiddle.net/nTHDk/14/
Thank you for your assistance!