I am creating a website with full image on the background that keep changing

Question

0

Asked: June 10, 20262026-06-10T21:39:43+00:00 2026-06-10T21:39:43+00:00

I am creating a website with full image on the background that keep changing

0

I am creating a website with full image on the background that keep changing using fadein and fadeout effect. Here is my script code

    $(document).ready(
            function(){

                $('div#homeGalleryImg').innerfade({
                    speed: 1500,
                    timeout: 5000,
                    type: 'sequence',
                    containerheight: '220px'
                });


        });

and my html code is

<div class="fullScreen" id="homeGalleryImg">
    <img src="images/home1.jpg" class="fullImage" />
    <img src="images/home2.jpg" class="fullImage" />
    <img src="images/home3.jpg" class="fullImage" />
</div>

Now I want to use image resize for that I create a function

 cFns.push(function(){


 resizeFullScreens = function() {

    var minSizeX    = window.getScrollWidth();
            var minSizeY    = window.getSize().y;
            var deferResize = Browser.ie;

            $$('.fullScreen').setStyle('height', minSizeY + 'px');

            var resize = function() {
             minSizeY      = window.getScrollHeight();
             $$('.fullScreen').setStyle('height', minSizeY + 'px');

             $$('.fullImage').each(function(item, index) {
                 var c = item.getCoordinates();
                 var iR = c.width/c.height;

                 if ( minSizeX/minSizeY > iR ) {
                     iW = minSizeX;
                     iH = minSizeX/iR;
                 } else {
                     iH = minSizeY;
                     iW = minSizeY*iR;
                 }

                 item.setStyles({
                     'height': iH + 'px',
                     'width': iW + 'px'
                     });

                 item.setPosition({
                        x: -(iW - minSizeX) / 2,
                        y: -(iH - minSizeY) / 2
                    });
                });
            }

            if (deferResize) {
                resize.delay(50);
            } else {
                resize();
            }
        }

    window.addEvent('resize',resizeFullScreens);
  });

and call this function each time at load and resize

    cFns.push(function() {
    window.addEvent('resize', resizeFullScreens);
    window.addEvent('load', resizeFullScreens); 
     });

Now it works fine but when background image changes as i am using inner fade effect here the new image cannot resize according to browser dimensions. what i want is to call resizeFullScreens function when background image changes.

Please help me…