I've created a gallery but I am having some problems with getting it to tranistion properly.
The gallery has a row of thumbnails, and when you click on a thumbnail the lager appears.
they are both using css transforms to animate them.
click on the thumbnail they should both move up (translateY) the thumb disappearing, the larger image appearing(translateY).
I can get the thumbnails to work, but I can only get the initial lager image to work correctly.
I've been trying to figure out how two use two divs to transition them in and out. on a click the clicked image will move up while the other moves down.
I placed my code below. Any suggestions will be appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>gallery</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var hld_one;
var hld_two;
$(function() {
$("a").click(function() {
if ($('#holder_one').html()=='')
{
$('#holder_one').html('<img src="' + $(this).attr('datafld') + '" width="890" height="430">');
$(".sm_display").removeClass("animate_small");
$('#showcase #holder_one').addClass('animate_showcase_up');
$("#"+$(this).parents("div:first").attr('id')).toggleClass("animate_small");
hld_one="up"
hld_two='down'
return;
}
if (hld_two='down')
{
$('#holder_two').html('<img src="' + $(this).attr('datafld') + '" width="890" height="430">');
$('#holder_two').css('z-index:1');
$('#holder_one').css('z-index:0');
$(".sm_display").removeClass("animate_small");
$('#holder_one').removeClass('animate_showcase_up');
$('#holder_one').addClass('animate_showcase_down');
$('#holder_two').removeClass('animate_showcase_down');
$('#holder_two').removeClass('animate_showcase_up');
$("#"+$(this).parents("div:first").attr('id')).toggleClass("animate_small");
}
/*
var currnt_picID = $(this).parents("div:first").attr('id');
$('#showcase #holder_one').html('<img src="' + $(this).attr('datafld') + '" width="890" height="430">');
$('#showcase #holder_one').css('z-index:1');
$('#showcase #holder_two').css('z-index:0');
$(".sm_display").removeClass("animate_small" );
$('#showcase #holder_one').addClass('animate_showcase_up');
$("#"+$(this).parents("div:first").attr('id' )).toggleClass("animate_small");
var frnt_html = $('#front').html();
var back_html = $('#back').html();
if (frnt_html==""){alert('empty')}
$(".sm_display").removeClass("animate_small");
$("#"+$(this).parents("div:first").attr('id')).to ggleClass("animate_small");
$('#showcase #front').html('<img src="' + $(this).attr('datafld') + '" width="890" height="430">');
$('#showcase #front').toggleClass('animate_showcase_up');
*/
});
});
</script>
<style type="text/css">
{
margin:0; padding:0;
}
div, div, img
{
margin:0; padding:0;
}
#display_container
{
margin:auto;
position:relative;
width:900px;
background-color:gray;
padding: 15px;
}
#showcase
{
margin: 0 auto;
width:890px;
height:430px;
margin-bottom:15px;
background-color:black;
border: solid 1px white;
}
#holder_one
{
background-color:red;
width:890px;
height:430px;
float:left;
position:relative;
z-index: 1;
top:435px;
left:700px;
-webkit-transition:All 2s cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
#holder_two
{
background-color:blue;
width:890px;
height:430px;
position:relative;
z-index:0;
top:435px;
-webkit-transition:All 2s cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
#gallery
{
margin: 0 auto;
padding:5px 0;
width:890px;
height:100px;
border: solid 1px white;
overflow: hidden;
z-index:1;
clear: both;
}
.sm_display
{
display:inline-block;
margin:0 5px;
width: 162px;
height:100px;
border: solid 1px black;
opacity:.5;
-webkit-transition:All 2s cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
.sm_display:hover
{
opacity:1;
}
.animate_small
{
-webkit-transform: translateY(-120px);
}
.animate_showcase_up
{
-webkit-transform: translateY(-435px);
}
animate_showcase_down
{
-webkit-transform: translateY(435px);
opacity:0;
}
</style>
</head>
<body>
<div id='display_container'>
<div id='showcase'>
<div id='holder_one' class=''></div>
<div id='holder_two' class=''></div>
</div>
<div id='gallery'>
<div class="sm_display" id='one'><a datafld="color.TIF"><img src="color.TIF" width=" 162" height="100"></a></div>
<div class="sm_display" id='two'><a datafld="deco.jpg"><img src="deco.jpg" width=" 162" height="100"></a></div>
<div class="sm_display" id='three'><a datafld="jill.jpg"><img src="jill.jpg" width=" 162" height="100"></a></div>
<div class="sm_display" id='four'><a datafld="vince.jpg"><img src="vince.jpg" width=" 162" height="100"></a></div>
<div class="sm_display" id='five'><a datafld="jillvince.jpg"><img src="jillvince.jpg" width=" 162" height="100"></a></div>
</div>
</div>
</body>
</html>
