Problem with scaling of dynamic images

[seabreeze3]

I am not a web designer but have hired a web designer to build my website. To put it mildly, it has been at times a difficult relationship.

My start site consists of a lower fixed banner and one at the top of the page. Between these two areas are pictures that should blend from one picture to the next.

The problem: When I use certain browsers or the page is not maximized, a part of the picture in the middle area seemed to get swallowed up by the top and bottom banner regions.

The start site consists of 3 images which fade from one to the next.

Below is a link to a picture of the problem.

imageshack dot us/photo/my-images/36/willkommenampositivenho.jpg/

Below is the script that he is using. Does anyone see the problem? Why does the picture get swallowed up at different resolutions? Sorry, I tried to simply paste the code in this post. But the system told me that I had too many characters, so I used screencapture of the code. Thanks in advance.

Sulking in Germany

imageshack.us/photo/my-images/8/backgroundstretchercode.jpg/
imageshack.us/photo/my-images/713/backgroundstretchercode.jpg/
imageshack.us/photo/my-images/94/backgroundstretchercode.jpg/
imageshack.us/photo/my-images/269/backgroundstretchercode.jpg/
imageshack.us/photo/my-images/807/backgroundstretchercode.jpg/
imageshack.us/photo/my-images/850/backgroundstretchercode.jpg/
imageshack.us/photo/my-images/5/backgroundstretchercode.jpg/
imageshack.us/photo/my-images/856/backgroundstretchercode.jpg/
imageshack.us/photo/my-images/714/backgroundstretchercode.jpg/
imageshack.us/photo/my-images/534/backgroundstretchercode.jpg/
imageshack.us/photo/my-images/638/backgroundstretchercode.jpg/
imageshack.us/photo/my-images/94/backgroundstretchercode.jpg/

 

[seabreeze3]

Pages 1 - 3 of code

Ok..to make it easier I haved post the code as segments for your review.

;(function($){
/* Variables  */
var container = null;
var allLIs = '', containerStr = '';
var element = this;
var _bgStretcherPause = false;
var _bgStretcherAction = false;
var _bgStretcherTm = null;
var random_line = new Array();
var random_temp = new Array();
var r_image = 0;
var swf_mode = false;
var img_options = new Array();

$.fn.bgStretcher = function(settings){

if ($('.bgstretcher-page').length || $('.bgstretcher-area').length) {
if(typeof(console) !== 'undefined' && console != null) console.log('More
 
than one bgStretcher');

}
 

return false;
 
settings = $.extend({}, $.fn.bgStretcher.defaults, settings);
$.fn.bgStretcher.settings = settings;

function _build(body_content){
if(!settings.images.length){ return; }

_genHtml(body_content);

containerStr = '#' + settings.imageContainer;
container = $(containerStr);
allLIs = '#' + settings.imageContainer + ' LI';
$(allLIs).hide().css({'z-index': 1, overflow: 'hidden'});

if(!container.length){ return; }
$(window).resize(function(){
_resize(body_content)
});

_resize(body_content);

 








use with mode random.');

normal.');
 
var stratElement = 0;
/*  Rebuild images for simpleSlide */
if (settings.transitionEffect == 'simpleSlide') {
if (settings.sequenceMode == 'random') {
if(typeof(console) !== 'undefined' && console != null) {
console.log('Effect \'simpleSlide\' don\'t be to console.log('Mode was automaticly set in
 
}
}
$(allLIs).css({'float': 'left', position: 'static'});
 
$(allLIs).show();
if ($.fn.bgStretcher.settings.slideDirection == 'NW' ||
$.fn.bgStretcher.settings.slideDirection == 'NE') {
$.fn.bgStretcher.settings.slideDirection = 'N';
}
if ($.fn.bgStretcher.settings.slideDirection == 'SW' ||
$.fn.bgStretcher.settings.slideDirection == 'SE') {
$.fn.bgStretcher.settings.slideDirection = 'S';
}
if ($.fn.bgStretcher.settings.slideDirection == 'S' ||
$.fn.bgStretcher.settings.slideDirection == 'E') {
settings.sequenceMode = 'back';
$(allLIs).removeClass('bgs-current');
$(allLIs).eq($(allLIs).length -
$.fn.bgStretcher.settings.stratElementIndex - 1).addClass('bgs-current');
if ($.fn.bgStretcher.settings.slideDirection == 'E') {
l = $(containerStr + ' LI').index($(containerStr + '
 
LI.bgs-current')) * $(containerStr).width()*(-1);
 

t = 0;
 
} else { // S
t = $(containerStr + ' LI').index($(containerStr + '
 
LI.bgs-current')) * $(containerStr).height()*(-1);

}
 

l = 0;
 

} else {




{
 
$(containerStr+' UL').css({left: l+'px', top: t+'px'});

settings.sequenceMode = 'normal';
if ($.fn.bgStretcher.settings.stratElementIndex != 0) {
if ($.fn.bgStretcher.settings.slideDirection == 'N')

t = $(containerStr + '
 
LI').index($(containerStr + ' LI.bgs-current')) * $(containerStr).height()*(-1);
l = 0;
} else { // W
l = $(containerStr + '
LI').index($(containerStr + ' LI.bgs-current')) * $(containerStr).width()*(-1);
t = 0;
}
$(containerStr+' UL').css({left: l+'px', top: t+'px'});
}
}
}

if ($(settings.buttonNext).length || $(settings.buttonPrev).length ||
$(settings.pagination).length){
if (settings.sequenceMode == 'random') {
if(typeof(console) !== 'undefined' && console != null) {
console.log('Don\'t use random mode width
 
prev-button, next-button and pagination.');

} else {
 

}

/*  Prev and Next Buttons init  */
if ($(settings.buttonPrev).length){
 


bgStretcherNavPrev');
 
$(settings.buttonPrev).addClass('bgStretcherNav

$(settings.buttonPrev).click(function(){
$.fn.bgStretcher.buttonSlide('prev');
 
});
}
 



bgStretcherNavNext');
 
if ($(settings.buttonNext).length){
$(settings.buttonNext).addClass('bgStretcherNav

$(settings.buttonNext).click(function(){
$.fn.bgStretcher.buttonSlide('next');
 
});
}
/*  Pagination  */
if ($(settings.pagination).length) {
$.fn.bgStretcher.pagination();
}
}
}

/*  Random mode init */
if (settings.sequenceMode == 'random') {
var i = Math.floor(Math.random()*$(allLIs).length);
$.fn.bgStretcher.buildRandom(i);
if (settings.transitionEffect != 'simpleSlide') {
$.fn.bgStretcher.settings.stratElementIndex = i;
 



} else {
 
}
stratElement = i;

if ($.fn.bgStretcher.settings.stratElementIndex > ($(allLIs).length -
 
1)) $.fn.bgStretcher.settings.stratElementIndex = 0;
stratElement = $.fn.bgStretcher.settings.stratElementIndex;
if (settings.transitionEffect == 'simpleSlide') {
if ($.fn.bgStretcher.settings.slideDirection == 'S' ||
$.fn.bgStretcher.settings.slideDirection == 'E') {
 

$.fn.bgStretcher.settings.stratElementIndex;
}
 
stratElement = $(allLIs).length - 1 -
 
}
}

$(allLIs).eq(stratElement).show().addClass('bgs-current');
$.fn.bgStretcher.loadImg($(allLIs).eq(stratElement));

/*  Go slideshow */
if(settings.slideShow && $(allLIs).length > 1){
_bgStretcherTm = setTimeout('$.fn.bgStretcher.slideShow(\''+$.fn.bgStretcher.settings.sequenceMode+'\', -1)', settings.nextSlideDelay);
}

};

 

[seabreeze3]

Pages 4 - 6 of code

function _resize(body_content){
var winW = 0;
var winH = 0; var contH = 0; var contW = 0;

$(window).scrollTop());
 
if ($('BODY').hasClass('bgStretcher-container')) {
winW = $(window).width();
winH = $(window).height();
if (($.browser.msie) && (parseInt(jQuery.browser.version) == 6)) {
$(window).scroll(function(){
$('#'+settings.imageContainer).css('top',
 

}
} else {
 
});
 
$('.bgstretcher').css('position', 'absolute').css('top', '0px');
winW = body_content.width();
winH = body_content.height();
}

var imgW = 0, imgH = 0;
var leftSpace = 0;

//	Max image size if(settings.maxWidth != 'auto'){
if (winW > settings.maxWidth){
leftSpace = (winW - settings.maxWidth)/2;
contW = settings.maxWidth;
} else contW = winW;
} else contW = winW;
if(settings.maxHeight != 'auto'){
if (winH > settings.maxHeight){
contH = settings.maxHeight;
} else contH = winH;
} else contH = winH;

//	Update container's size container.width(contW); container.height(contH);

//	Non-proportional resize if(!settings.resizeProportionally){ imgW = contH;
imgH = contH;
 
} else {
 

var initW = settings.imageWidth, initH = settings.imageHeight;
var ratio = initH / initW;

imgW = contW;
imgH = Math.round(contW * ratio);

if(imgH < contH){
 
imgH = contH;
imgW = Math.round(imgH / ratio);
}
}

// Anchoring
var mar_left = 0;
var mar_top = 0;
var anchor_arr;
if ($.fn.bgStretcher.settings.anchoring != 'left top') {
anchor_arr = ($.fn.bgStretcher.settings.anchoring).split(' ');
if (anchor_arr[0] == 'right') {
mar_left = (winW - contW);
 



Math.round((winW - contW)/2);
 
} else {



}
 

if (anchor_arr[0] == 'center') mar_left =
 
if (anchor_arr[1] == 'bottom') {
mar_top = (winH - contH);
 
} else {
 

if (anchor_arr[1] == 'center') {
mar_top = Math.round((winH - contH)/2);
 
}
}
 

mar_top+'px');
 
container.css('marginLeft', mar_left+'px').css('marginTop',

}
 
mar_left = 0;
mar_top = 0;
if ($.fn.bgStretcher.settings.anchoringImg != 'left top') {
anchor_arr = ($.fn.bgStretcher.settings.anchoringImg).split(' ');
if (anchor_arr[0] == 'right') {
mar_left = (contW - imgW);
 



Math.round((contW - imgW)/2);
 
} else {



}
 

if (anchor_arr[0] == 'center') mar_left =
 
if (anchor_arr[1] == 'bottom') {
mar_top = (contH - imgH);
 
} else {
 

if (anchor_arr[1] == 'center') {
mar_top = Math.round((contH - imgH)/2);
 
}
}
}
img_options['mar_left'] = mar_left;
img_options['mar_top'] = mar_top;

//	Apply new size for images
if (container.find('LI:first').hasClass('swf-mode')) {

var path_swf = container.find('LI:first').html();
 


flash">&nbsp;</div>');
 
container.find('LI:first').html('<div id="bgstretcher-
 

 

contH, '9');
 
var header = new SWFObject('flash/stars.swf', 'flash-obj', contW,

header.addParam('wmode', 'transparent');
header.write('bgstretcher-flash');

};
img_options['imgW'] = imgW;
img_options['imgH'] = imgH;
 

if(!settings.resizeAnimate){
container.children('UL').children('LI.img- loaded').find('IMG').css({'marginLeft': img_options["mar_left"]+'px', 'marginTop':
img_options["mar_top"]+'px'});
container.children('UL').children('LI.img- loaded').find('IMG').css({'width': img_options["imgW"]+'px', 'height': img_options["imgH"]+'px'});
} else {
container.children('UL').children('LI.img- loaded').find('IMG').animate({'marginLeft': img_options["mar_left"]+'px', 'marginTop': img_options["mar_top"]+'px'}, 'normal');
container.children('UL').children('LI.img- loaded').find('IMG').animate({'width': img_options["imgW"]+'px', 'height': img_options["imgH"]+'px'},
'normal');
}

$(allLIs).width(container.width()).height(container.height());

if ($.fn.bgStretcher.settings.transitionEffect == 'simpleSlide') {
if ($.fn.bgStretcher.settings.slideDirection == 'W' ||
$.fn.bgStretcher.settings.slideDirection == 'E') {
container.children('UL').width(container.width() *
 
$(allLIs).length).height(container.height());
} else {

$(allLIs).length).width(container.width());
}
 



container.children('UL').height(container.height() *
 
}

};

function _genHtml(body_content){
var code = '';
var cur_bgstretcher;

body_content.each(function(){
$(this).wrapInner('<div class="bgstretcher-page"
/>').wrapInner('<div class="bgstretcher-area" />');
code = '<div id="' + settings.imageContainer + '"
 
class="bgstretcher"><ul>';
 

// if swf
if (settings.images.length) {

 

[seabreeze3]

Pages 7 - 9 of code

var ext = settings.images[0].split('.');
ext = ext[ext.length-1];

if (ext != 'swf') {
var ind = 0;
for(i = 0; i < settings.images.length; i++){
if (settings.transitionEffect ==
 
'simpleSlide' && settings.sequenceMode == 'back')




{

class="image-path">' + settings.images[ind] + '</span></li>';
 

ind = settings.images.length-1-i;
else ind = i;
if ($.fn.bgStretcher.settings.preloadImg)

code += '<li><span

} else {
code += '<li
 
class="img-loaded"><img src="' + settings.images[ind] + '" alt="" /></li>';
}
 




settings.images[0] + '</li>';
 

} else {



}
}
 
}

code += '<li class="swf-mode">' +
 

 







'relative', 'z-index': 3});
 








});
 
code += '</ul></div>';
cur_bgstretcher = $(this).children('.bgstretcher-area');
$(code).prependTo(cur_bgstretcher); cur_bgstretcher.css({position: 'relative'}); cur_bgstretcher.children('.bgstretcher-page').css({'position':
 

};

/* Start bgStretcher  */
this.addClass('bgStretcher-container');
_build(this);
};

$.fn.bgStretcher.loadImg = function(obj){
if (obj.hasClass('img-loaded')) return true;
obj.find('SPAN.image-path').each(function(){
var imgsrc = $(this).html();
var imgalt = '';
var parent = $(this).parent();
var img = new Image();

$(img).load(function () {
$(this).hide();
parent.prepend(this);
$(this).fadeIn('100');
}).error(function () {
 
}).attr('src', imgsrc).attr('alt', imgalt);

$(img).css({'marginLeft': img_options["mar_left"]+'px', 'marginTop':
img_options["mar_top"]+'px'});
$(img).css({'width': img_options["imgW"]+'px', 'height':
img_options["imgH"]+'px'});
});
obj.addClass('img-loaded');
return true;
}

$.fn.bgStretcher.play = function(){
_bgStretcherPause = false;
$.fn.bgStretcher._clearTimeout();
$.fn.bgStretcher.slideShow($.fn.bgStretcher.settings.sequenceMode, -1);

};

$.fn.bgStretcher._clearTimeout = function(){
if(_bgStretcherTm != null){
clearTimeout(_bgStretcherTm);
_bgStretcherTm = null;
}
}

$.fn.bgStretcher.pause = function(){
_bgStretcherPause = true;
$.fn.bgStretcher._clearTimeout();
};

$.fn.bgStretcher.sliderDestroy = function(){
var cont = $('.bgstretcher-page').html();
$('.bgStretcher-container').html('').html(cont).removeClass('bgStretcher-container');
$.fn.bgStretcher._clearTimeout();
_bgStretcherPause = false;
}

/* Slideshow */
$.fn.bgStretcher.slideShow = function(sequence_mode, index_next){
_bgStretcherAction = true;
if ($(allLIs).length < 2) return true;
var current = $(containerStr + ' LI.bgs-current');
var next;

if (index_next == -1) {
switch (sequence_mode){
case 'back':
next = current.prev();
if(!next.length){ next = $(containerStr + ' LI:last');	}
break;
case 'random':
if (r_image == $(containerStr + ' LI').length) {
 


ntainerStr + ' LI').length-1]);
 
$.fn.bgStretcher.buildRandom(random_line[$(co

r_image = 0;
}
 








}
} else {
 




default:
 
next = $(containerStr + ' LI').eq(random_line[r_image]);
r_image++;
break;

next = current.next();
if(!next.length){ next = $(containerStr + ' LI:first'); }
 
next = $(containerStr + ' LI').eq(index_next);
}

$(containerStr + ' LI').removeClass('bgs-current');
$.fn.bgStretcher.loadImg(next);
next.addClass('bgs-current');

switch ($.fn.bgStretcher.settings.transitionEffect){
case 'fade':
$.fn.bgStretcher.effectFade(current, next);
break;
case 'simpleSlide':
$.fn.bgStretcher.simpleSlide();
break;
case 'superSlide':
$.fn.bgStretcher.superSlide(current, next, sequence_mode);
break;
 
default :
 

$.fn.bgStretcher.effectNone(current, next);
 

 




owPage');
 
}
if ($($.fn.bgStretcher.settings.pagination).find('LI').length) {
$($.fn.bgStretcher.settings.pagination).find('LI.showPage').removeClass('sh

$($.fn.bgStretcher.settings.pagination).find('LI').eq($(containerStr + '
 
LI').index($(containerStr + ' LI.bgs-current'))).addClass('showPage');
}

// callback
if ($.fn.bgStretcher.settings.callbackfunction) {
if(typeof $.fn.bgStretcher.settings.callbackfunction == 'function')
$.fn.bgStretcher.settings.callbackfunction.call();
}

if(!_bgStretcherPause){
_bgStretcherTm =
setTimeout('$.fn.bgStretcher.slideShow(\''+$.fn.bgStretcher.settings.sequenceMode+'\', -1)',
$.fn.bgStretcher.settings.nextSlideDelay);
}
};

 

[seabreeze3]

Pages 10 - 13 of code

/* Others effects  */
$.fn.bgStretcher.effectNone = function(current, next){
next.show();
current.hide();
_bgStretcherAction = false;
};
$.fn.bgStretcher.effectFade = function(current, next){
next.fadeIn( $.fn.bgStretcher.settings.slideShowSpeed );
current.fadeOut( $.fn.bgStretcher.settings.slideShowSpeed, function(){
_bgStretcherAction = false;
} );
};

$.fn.bgStretcher.simpleSlide = function(){
var t, l;
switch ($.fn.bgStretcher.settings.slideDirection) {
case 'N':
case 'S':
 

$(containerStr).height()*(-1);



default:

$(containerStr).width()*(-1);

}
 
t = $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) *

l = 0;
break;

l = $(containerStr + ' LI').index($(containerStr + ' LI.bgs-current')) *

t = 0;
 
$(containerStr+' UL').animate({left: l+'px', top: t+'px'},
$.fn.bgStretcher.settings.slideShowSpeed, function(){
_bgStretcherAction = false;
});

};

$.fn.bgStretcher.superSlide = function(current, next, sequence_mode){
var t, l;
switch ($.fn.bgStretcher.settings.slideDirection) {
case 'S':
 




case 'E':
 
t = $(containerStr).height();
l = 0;
break;

t = 0;
l = $(containerStr).width();
break;
 
case 'W':
 

t = 0;
 
l = $(containerStr).width()*(-1);
break;
case 'NW':
t = $(containerStr).height()*(-1);
l = $(containerStr).width()*(-1);
break;
 
case 'NE':
t = $(containerStr).height()*(-1);
l = $(containerStr).width();
break;
case 'SW':
t = $(containerStr).height();
l = $(containerStr).width()*(-1);
break;
case 'SE':
t = $(containerStr).height();
l = $(containerStr).width();
break;
 
default:
 

t = $(containerStr).height()*(-1);
l = 0;
 

}

if (sequence_mode == 'back') {
next.css({'z-index': 2, top: t+'px', left: l+'px'});
next.show();
next.animate({left: '0px', top: '0px'},
$.fn.bgStretcher.settings.slideShowSpeed, function(){
current.hide();
$(this).css({'z-index': 1});
_bgStretcherAction = false;
 

} else {
 
});

current.css('z-index', 2);
next.show();
current.animate({left: l+'px', top: t+'px'},
 
$.fn.bgStretcher.settings.slideShowSpeed, function(){
$(this).hide().css({'z-index': 1, top: '0px', left:
 
'0px'});




};
 



});
}
 

_bgStretcherAction = false;
 

/* Build line random images  */
$.fn.bgStretcher.buildRandom = function(el_not){
var l = $(allLIs).length;
var i, j, rt;
for (i = 0; i < l; i++ ) {
random_line[i] = i;
random_temp[i] = Math.random()*l;
}
for (i = 0; i < l; i++ ) {
for (j = 0; j < (l-i-1); j++) {
if (random_temp[j] > random_temp[j+1]) {
rt = random_temp[j];
random_temp[j] = random_temp[j+1];
random_temp[j+1] = rt;
 
rt = random_line[j];
random_line[j] = random_line[j+1];
random_line[j+1] = rt;
}
}
}

if (random_line[0] == el_not) {
rt = random_line[0];
random_line[0] = random_line[l-1];
random_line[l-1] = rt;
}
};

/* Prev and Next buttons */
$.fn.bgStretcher.buttonSlide = function(button_point){
if (_bgStretcherAction || ($(allLIs).length < 2)) return false;
var mode = '';
if (button_point == 'prev') {
mode = 'back';
if ($.fn.bgStretcher.settings.sequenceMode == 'back')  mode = 'normal';
 
} else {

}
 

mode = $.fn.bgStretcher.settings.sequenceMode;
 
$(allLIs).stop(true, true);
$.fn.bgStretcher._clearTimeout();
$.fn.bgStretcher.slideShow(mode, -1);
return false;
};

/* Pagination  */
$.fn.bgStretcher.pagination = function(){
var l = $(allLIs).length; var output = ''; var i = 0; if (l > 0) {
output += '<ul>';
for (i = 0; i < l; i++){
output += '<li><a href="javascript:;">'+(i+1)+'</a></li>';
}
output += '</ul>';
$($.fn.bgStretcher.settings.pagination).html(output);
$($.fn.bgStretcher.settings.pagination).find('LI:first').addClass('showPage');

$($.fn.bgStretcher.settings.pagination).find('A').click(function(){
if ($(this).parent().hasClass('showPage')) return false;
$(allLIs).stop(true, true);
$.fn.bgStretcher._clearTimeout();
$.fn.bgStretcher.slideShow($.fn.bgStretcher.settings.sequenceMo de, $($.fn.bgStretcher.settings.pagination).find('A').index($(this)));
return false;
});

}
 
return false;
}

/* Default Settings  */
$.fn.bgStretcher.defaults = {
imageContainer:	'bgstretcher',
resizeProportionally:	true,
resizeAnimate:		 false, images:	[], imageWidth:		1024, imageHeight:		768,
maxWidth:	'auto',
maxHeight:		'auto', nextSlideDelay:	3000,
slideShowSpeed:	'normal',
slideShow:	true,
transitionEffect:	'fade', // none, fade, simpleSlide,
 
superSlide

SW, SE)












};
 
slideDirection:	'N', // N, S, W, E, (if superSlide - NW, NE, sequenceMode:		'normal', // back, random
buttonPrev:		'', buttonNext:		 '', pagination:	'',
anchoring:		  'left top', // right bottom center anchoringImg:	'left top', // right bottom center preloadImg:		false,
stratElementIndex:	0, callbackfunction:	 null
 
$.fn.bgStretcher.settings = {};
})(jQuery);

 

[PapaGeek]

Hi seabreeze,

I was about to make my post when I saw your's already on the forum. Take a look at my post on Variable Image Sizing and let me know if that is what you are looking for.

 

[Phreaddee]

it would make every bodies life a lot easier if posters learnt to place things within "code" tags
ie

hello everyone this is held within code tags.
it's really easy to do
click on the # button in the advanced editor
add you code inside it.
people can then scroll to view
or cut n paste
and its easier to read 
because its in a standard monospace type 
that we all associate with code.
yay!

now that is out of the way. that seems like a huge amount of scripting for something that can be done with relative ease. I'd suggest talking to papa geek as that seems to be a problem he is having right now...

although your images didnt show up so having a bit of a hard time really understanding the issue.

is this in the same ballpark as what you are after?
http://www.alistapart.com/articles/fluid-images/

 

[seabreeze3]

Thank you guys...and sorry about not following the protocol. I am not a web designer but a customer trying to find a solution to a problem my web designer is having. Of course, I should not have to do this if he was competent. But the fact of the matter is that the web site is just about complete and it would not be in my best interest to fire him at this point. I will definitely get someone to go over his work for me. The article on fluid images seems to be what my web designer needs to read because scaling of dynamic images seems to be his problem. I forwarded the article to him but God knows if he looked at it. I will see him this afternoon. I hope that he found the solution because this is crazy.

 

[master412160]

I had this problem to, thanks for sharing.

 

[PixelPusher]

Cleaned up your post(s).

First, I'm not convinced your problem is an issue with the javascript/jquery. Looks a lot like a css based issue. Positioning to be exact. I cannot know for sure unless I can see a live version of the page.

Second, I highly doubt anyone is going to go through the five posts of javascript functions, sorry just be truthful.

I dabble with jquery quite a bit, and in professional opinion, this script seems way to long for a simple task of a fading image gallery. Explain to me, us, what the image animation is supposed to do, from start to finish, and I might have a much more simple solution for you.

 

[seabreeze3]

Thank you John for your post. To be honest, I also thought to myself, 'who is going to go through these pages of script'? Almost nobody. John if you give me your email, I could send you the access information because the site is not published. But let me again explain in the most simple and clearest way possible the situation. The start site consists of two static areas at the top and bottom of the screen. Underneath or between these two static areas is a picture that blends from one image to another. The blending from one image to another is not the problem. The problem is when you are not using the full screen to see the page or simply using another computer with a different resolution, part of the image disappears beneath the bottom static area. To me, it seems as if the web designer does not know how to constrain the image in between the top and bottom areas so that all (100%) of the image always appears regardless of the computer's resolution. It seems that the image tends to go out of its container depending on the resolution, size of the computer screen, etc. So instead of a hill with a tree at the top with blue skies, the hill is almost completely gone with only the tree and the blue skies.

 

[Phreaddee]

Sounds like it could be an absolute positioned footer.
does it "stick" to the browser when you resize,

maybe an incorrectly set up sticky footer as well.

this would almost certainly be a CSS issue, maybe ill stacked divs in the html but...

try and look through the css and let us know what the values are for the footer section.