html - Jquery element positioning and more -
hey guys, i'm pretty editing time thought i'd try new jquery. i'm trying create "3d" card page (similar this: http://activeden.net/item/xml-3d-video-showcase/83740?clickthrough_id=&redirect_back=true&ref=45) can't position elements , think codes wrong.
here's js:
$(document).ready(function() { //perform actions when dom ready var z = 0; //for setting initial z-index's var inanimation = false; //flag testing if in animation var imgloaded = 0; //for checking if images loaded $('.img').each(function() { z++; $(this).css('z-index', z); imgloaded++; }); function swapfirstlast(isfirst) { if(inanimation) return false; //if swapping pictures return else inanimation = true; //set flag process image var processzindex, direction, newzindex, indecrease; //change previous or next image if(isfirst) { processzindex = z; newzindex = 1; indecrease = 1; } else { processzindex = 1; newzindex = z; indecrease = -1; } //set variables "next" , "previous" action $('.img').each(function() { //process each image if($(this).css('z-index') == processzindex) { //if image need process $(this).animate({ opacity: 0,top: $(this).height() + 'px' }, 'slow', function() { $(this).css('z-index', newzindex) //set new z-index .animate({top : '0' }, 'slow', function() { inanimation = false; //reset flag $(this).animate({ opacity: 1 }, 500); }); }); } else { //not image need process, in/de-crease z-index $(this).animate({top : '0' }, 'slow', function() { //make sure wait swapping z-index whe $(this).css('z-index', parseint($(this).css('z-index')) + indecrease); //in/de-crease z-index 1 }); } }); return false; //don't follow clicked link } $('#next a').click(function() { return swapfirstlast(true); //swap first image last position }); $('#prev a').click(function() { return swapfirstlast(false); //swap last image first position }); }); and here's html:
<html> <head> <style type="text/css"> ul { list-style: none; margin: 200px;} #pictures { position: relative; height: 408px;} .img { position: absolute; top: 10; left: 0; padding: 10px; background: #eee; border: 1px solid #fff; -webkit-transform: translate(0px, 0px) skew(0deg, 5deg); } .desc { max-height: 30px; text-align: center; padding: 10px 10px 0 10px; } li { border: 5px solid #c4c8cc; -moz-box-shadow: 3px 3px 10px #888; -webkit-box-shadow: 3px 3px 10px #888; padding: 200px; } </style> </head> </html> <div id="gallery"> <ul id="pictures"> <li class="img"> <div class="desc">hello world</div> </li> <li class="img"> <div class="desc">hello world</div> </li> </ul> </div> sorry mess, i'm in hurry done - appreciated :d
@keiran, close. pulled content on jsbin. not how want final thing look. seems functional.
http://jsbin.com/awule4/5/edit#preview
hope helps.
bob
Comments
Post a Comment