Here is a fiddle with a solution. Click on an image (colored block) to open myCanvas
and populate it with the selected image. Click anywhere in myCanvas
to hide it and select another image.
HTML:
<div id="wrapper">
<div class="images_box">
<a><img style="background: red;" /></a>
<a><img style="background: blue;" /></a>
<a><img style="background: green;" /></a>
<a><img style="background: black;" /></a>
<a><img style="background: pink;" /></a>
</div>
<div class="myCanvas"></div>
</div>
CSS:
* {
padding: 0px;
margin: 0px;
}
#wrapper {
position: relative;
width: 80%;
margin-right: auto;
margin-left: auto;
height: 300px;
/*background: #123;*/
}
.images_box {
width: 100%;
height: 60px;
}
img {
display: inline-block;
height: 50px;
width: 50px;
margin: 0px;
padding: 5px;
}
.myCanvas {
display: none;
width: 100%;
height: 300px;
position: absolute;
top: 0px;
left: 0px;
background: #999;
}
JavaScript:
$(document).ready(function () {
$('a').click(function () {
$('.myCanvas').fadeIn();
$('.myCanvas').html($(this).html());
$('.myCanvas').children().css('display', 'block');
$('.myCanvas').children().css({
'margin-left': 'auto',
'margin-right': 'auto'
});
var topMargin = 125;
$('.myCanvas').children().css('margin-top', topMargin);
});
$('.myCanvas').click(function () {
$('.myCanvas').fadeOut();
});
});
It takes the image (copies the html to myCanvas
) and then centers it.