I'm working on fixing up www.farawayflyfishing.com, which I used to learn CSS and JS a while back. Anyway, I'm moving most of the JS stuff to jQuery, and am using the jQuery Cycle plugin to do the main banner transitioning.
Here is my problem: There are constant elements in the images I am fading that I do not want to change. The previous JS library I used to do this had those elements staying constant, i.e. alpha 1.
However, jQuery cycle fades the constant elements and I am trying to get it to stop. Somehow, I need to have the alpha always equal to 1 for those parts.
I'm guessing it is something to do with the animationIn
and animationOut
.
Thanks!
EDIT: So if you go to www.farawayflyfishing.com and check out the main banner, you will see the logo fade in and out, where it should be constant. The previous JS lib that did this kept it constant, i.e. alpha 1.0. This JS lib will fade it out then fade it back in again.
Here is the code I'm using to initialize it. What it does is download all of the images in the slideshow then start it.
$(document).ready(function() {
var newSlides = ['fly-fishing-patagonia.jpg',
'fly-fishing-argentina.jpg',
'atlantic-steelhead-patagonia.jpg',
'giant-trout-patagonia.jpg',
'golden-dorado-fly-fishing.jpg',
'golden-dorado-argentina.jpg',
'patagonia-fishing.jpg',
'fishing-argentina.jpg',
'patagonia-trout-fishing.jpg',
'tierra-del-fuego-sea-run-brown-trout.jpg',
'sea-run-brown-trout.jpg',
'patagonia-fishing-trip.jpg'];
var numSlides = newSlides.length;
var IMAGE_DIR = '/images/components/headers/';
var loadedSlides = 0;
var $ss = $('.slideshow');
for (var i in newSlides)
{
var img = new Image();
img.src = IMAGE_DIR + newSlides[i];
$(img).bind('load', function() {
if (++loadedSlides === numSlides)
{
for (var j in newSlides)
{
$ss.append('<img src="'+IMAGE_DIR+newSlides[j]+'" />');
}
$ss.cycle({
fx: 'fade'
});
}
});
}
});