der.find('.prev').addClass('disabled'); } function enableNavRight () { navR = true; $ps_slider.find('.next').removeClass('disabled'); } function enableNavLeft () { navL = true; $ps_slider.find('.prev').removeClass('disabled'); } var $ps_container = $('#ps_container'); var $ps_overlay = $('#ps_overlay'); var $ps_close = $('#ps_close'); /** * when we click on an album, * we load with AJAX the list of pictures for that album. * we randomly rotate them except the last one, which is * the one the User sees first. We also resize and center each image. */ $ps_albums.children('div').bind('click',function(){ var $elem = $(this); var album_name = 'album' + parseInt($elem.index() + 1); var $loading = $('
',{className:'loading'}); $elem.append($loading); $ps_container.find('img').remove(); $.get('photostack.php', {album_name:album_name} , function(data) { var items_count = data.length; for(var i = 0; i < items_count; ++i){ var item_source = data[i]; var cnt = 0; $('').load(function(){ var $image = $(this); ++cnt; resizeCenterImage($image); $ps_container.append($image); var r = Math.floor(Math.random()*41)-20; if(cnt < items_count){ $image.css({ '-moz-transform' :'rotate('+r+'deg)', '-webkit-transform' :'rotate('+r+'deg)', 'transform' :'rotate('+r+'deg)' }); } if(cnt == items_count){ $loading.remove(); $ps_container.show(); $ps_close.show(); $ps_overlay.show(); } }).attr('src',item_source); } },'json'); }); /** * when hovering each one of the images, * we show the button to navigate through them */ $ps_container.live('mouseenter',function(){ $('#ps_next_photo').show(); }).live('mouseleave',function(){ $('#ps_next_photo').hide(); }); /** * navigate through the images: * the last one (the visible one) becomes the first one. * we also rotate 0 degrees the new visible picture */ $('#ps_next_photo').bind('click',function(){ var $current = $ps_container.find('img:last'); var r = Math.floor(Math.random()*41)-20; var currentPositions = { marginLeft : $current.css('margin-left'), marginTop : $current.css('margin-top') } var $new_current = $current.prev(); $current.animate({ 'marginLeft':'250px', 'marginTop':'-385px' },250,function(){ $(this).insertBefore($ps_container.find('img:first')) .css({ '-moz-transform' :'rotate('+r+'deg)', '-webkit-transform' :'rotate('+r+'deg)', 'transform' :'rotate('+r+'deg)' }) .animate({ 'marginLeft':currentPositions.marginLeft, 'marginTop' :currentPositions.marginTop },250,function(){ $new_current.css({ '-moz-transform' :'rotate(0deg)', '-webkit-transform' :'rotate(0deg)', 'transform' :'rotate(0deg)' }); }); }); }); /** * close the images view, and go back to albums */ $('#ps_close').bind('click',function(){ $ps_container.hide(); $ps_close.hide(); $ps_overlay.fadeOut(400); }); /** * resize and center the images */ function resizeCenterImage($image){ var theImage = new Image(); theImage.src = $image.attr("src"); var imgwidth = theImage.width; var imgheight = theImage.height; var containerwidth = 460; var containerheight = 330; if(imgwidth > containerwidth){ var newwidth = containerwidth; var ratio = imgwidth / containerwidth; var newheight = imgheight / ratio; if(newheight > containerheight){ var newnewheight = containerheight; var newratio = newheight/containerheight; var newnewwidth =newwidth/newratio; theImage.width = newnewwidth; theImage.height= newnewheight; } else{ theImage.width = newwidth; theImage.height= newheight; } } else if(imgheight > containerheight){ var newheight = containerheight; var ratio = imgheight / containerheight; var newwidth = imgwidth / ratio; if(newwidth > containerwidth){ var newnewwidth = containerwidth; var newratio = newwidth/containerwidth; var newnewheight =newheight/newratio; theImage.height = newnewheight; theImage.width= newnewwidth; } else{ theImage.width = newwidth; theImage.height= newheight; } } $image.css({ 'width' :theImage.width, 'height' :theImage.height, 'margin-top' :-(theImage.height/2)-10+'px', 'margin-left' :-(theImage.width/2)-10+'px' }); } });