OK So I'm trying to get my portfolio up and working. The problem I'm
having right now is some glitchy code that I'm using for the porfolio.
Right now it displays 9 thumbnails inside of a container. Then once
you click on a thumbnail, they all fade out to a loading bar. Once the
portfolio and picture are loaded (via json), the loading bar fades out
and the portfolio stuff fades in.
The problem is that since the website's height is set to auto, when
everything fades out to the loading bar, the website animates to be
really small. I don't want this. I want it to stay the same height it
was when it was clicked, and then once everythings loaded it animates
to get bigger to show all of the information. No height change when
the loading bar appears.
Here's what I've been using:
$(function() {
var barLeft = (909 - 220) / 2,
barTop = (460 - 19) / 2;
$('.portfolio-piece').click(function() {
$('.portfolio-piece').animate({opacity: 0}, 500).children().animate
({opacity: 0}, 500, function() {
$('#main-portfolio').html('<div id="portfolio-loading"><img
src="images/ajax-loader.gif" alt="Loading" /></div>');
$('#portfolio-loading').css({opacity: 0, top: barTop, left:
barLeft}).animate({opacity: 1}, 500);
$.getJSON('json.txt', null, function(data) {
$('#portfolio-loading').animate({opacity: 0}, 500, function() {
$('#main-portfolio').html('<div id="piece-image"><img src="' +
data.image + '" /><table><tbody><tr><th>Name</th><td>' + data.name +
'</td></tr><th>Technologies</th><td>' + data.technologies + '</td></
tr><tr><th>About</th><td>' + data.about + '</td></tr></tbody></table></
div>').css("opacity", 0).animate({opacity: 1}, 250);
$('#main-portfolio').animate({height: targetHeight}, 250);
});
});
});
return false;
});
});
