Getting further with my Flash Light modifications and decided I don't like the sliding transition for the particular website I'm working on.
These transitions are used on a page that has a full screen background slideshow, such as the homepage of the demo:
http://www.kriesi.at/themes/flashlight/
During this transition the sidebar and content of the page are animated to "slide" off the left of the screen in a rapid movement.
Rather than this, I'd prefer that these elements "fade out". In addition, I'd like to keep the pixel overlay (since I'm using lower resolution images as my background images for quicker loading times).
I've gotten half way there (getting them to fade out). The issue is I can't figure out how to have them fade back in!
Here's how I got them to fade out below, I'm hoping that someone else can help me get them fading back in properly.
The functions I needed to edit are in the /flashlight/js/avia_fullscreen_slider.js file
In this file I found some minimized JS code, and then a function below.
On line 125 I see the beginning of the hideContent function.
On lines 141 and 142 I see:
sidebar1.animate(animateThis, duration, transition1);
main_mini.animate(animateThis2, duration, transition1, function(){ main_mini.css({zIndex:0}); });
I changed both of these to :
sidebar1.fadeOut();
main_mini.fadeOut();
Then on 161 & 162 I see these lines:
if(jQuery.support.opacity) { overlay.animate({opacity:0});}else{overlay.css({display:'none'});}
main.animate(animateThis, duration, transition1, function(){ main.css({zIndex:0}); animating = false; });
The first one is the line that fades out the pixel overlay that I want to keep, and the 2nd one animates the main content area.
So I delete 161 and change 162 to read:
main.fadeOut();
A little further below I see:
sidebar2.animate(animateThis, duration, transition1);
Which I change to:
sidebar2.fadeOut();
At this point I save the file and test my progress. And it's exactly what I'd want so far - the sidebar and content areas fade out. The problem is that now I need to get them to fade back in!
Below the hideContent function I see the start of showContent. So now I assume I'd use "fadeIn" to essentially reverse what I've done above.
So here's that the showContent function looks like:
showContent: function()
{
if(!animating)
{
catch_clicks = false;
animating = true;
var animateThis = {left:-windowwWidth};
sidebar2.animate({left:originalPos.sb_pos2}, duration, transition, function()
{
sidebar2.attr('style','');
});
setTimeout(function()
{
main.css({zIndex:10}).animate({left:originalPos.main_pos}, duration, transition);
},
durationBetween);
linkBack.animate({bottom:-80}, 300);
thumbnails.animate({bottom:-80}, 300, function()
{
thumbnails.css({display:'none'})
linkBack.css({display:'none'})
});
link.fadeIn();
imagecount.fadeOut();
setTimeout(function()
{
if(jQuery.support.opacity) { overlay.animate({opacity:1}); } else {overlay.css({display:'block'});}
main_mini.animate({right:originalPos.main_mini_pos}, duration, transition1, function(){ main_mini.css({zIndex:0}); });
sidebar1.animate({left:originalPos.sb_pos1}, duration, transition, function()
{
animating = false;
sidebar1.attr('style','');
});
},
durationBetween*2);
}
return false;
}
So I'm trying to change it to this - and it's not fading my content BACK IN.
showContent: function()
{
if(!animating)
{
catch_clicks = false;
animating = true;
var animateThis = {left:-windowwWidth};
sidebar2.fadeIn();
setTimeout(function()
{
main.fadeIn();
},
durationBetween);
linkBack.animate({bottom:-80}, 300);
thumbnails.animate({bottom:-80}, 300, function()
{
thumbnails.css({display:'none'})
linkBack.css({display:'none'})
});
link.fadeIn();
imagecount.fadeOut();
setTimeout(function()
{
main_mini.fadeIn();
sidebar1.fadeIn();
},
durationBetween*2);
}
return false;
}
};
So I've clearly missed something. Anyone care to give me some pointers here? I'm definitely not a javascript expert.
Create a new thread and tell me what problems you are encountering and what you want to know. 
There is no step 3 :) 
