Question

I have been working on this for some time. The script does work and flow is followed in all browsers. Chrome and Safari shows the slideshow fine. I have tried to slow the interval to above 1 sec, separate the functions, shorten the number of images, changed the css to relative/absolute, and numerous versions of code. I have placed alerts in all the sections to check the flow.

Test Link: http://jawilliams.site11.com/ESG/

Script Section

 <div id="flashHeader">&nbsp;</div>
 <script>
    var currentItem = 0;
    var itemInterval = 33;
    var numberOfItems = 660;
    var imagePath = "JPEG_SEQUENCE/web_4/";
    var holder = $('#flashHeader');
    var flashImages = new Array("MASTER_00000.jpg", "MASTER_00001.jpg", "MASTER_00002.jpg", "MASTER_00003.jpg", "MASTER_00004.jpg", "MASTER_00005.jpg", "MASTER_00006.jpg", "MASTER_00007.jpg", "MASTER_00008.jpg", "MASTER_00009.jpg", "MASTER_00010.jpg", "MASTER_00011.jpg", "MASTER_00012.jpg", "MASTER_00013.jpg", "MASTER_00014.jpg", "MASTER_00015.jpg", "MASTER_00016.jpg", "MASTER_00017.jpg", "MASTER_00018.jpg", "MASTER_00019.jpg", "MASTER_00020.jpg", "MASTER_00021.jpg", "MASTER_00022.jpg", "MASTER_00023.jpg", "MASTER_00024.jpg", "MASTER_00025.jpg", "MASTER_00026.jpg", "MASTER_00027.jpg", "MASTER_00028.jpg", "MASTER_00029.jpg", "MASTER_00030.jpg", "MASTER_00031.jpg", "MASTER_00032.jpg", "MASTER_00033.jpg", "MASTER_00034.jpg", "MASTER_00035.jpg");
    function outputPlayerversion() {
        var playerVersion = swfobject.getFlashPlayerVersion();
        if(playerVersion.major>=19) return false;
        else return true;
    }
    var flashLoop = {
        loop: function() {
            holder.removeClass('loading');
            var srcImg = '';
            var oldImage = 0;
            var firstItem = true;
            var elem = $('#flashHeader > img');
            var infiniteLoop = setInterval(function() {
                if(currentItem === 0) oldImage = numberOfItems-1;
                else oldImage = currentItem-1;
                if(firstItem) firstItem = false;
                else $(elem[oldImage]).css({display: 'none !important', visibility: 'hidden !important'});
                $(elem[currentItem]).css({display: 'block !important', visibility: 'visible !important'});
                if(currentItem === numberOfItems-1) currentItem = 0;
                else currentItem++;
            }, itemInterval);
        },
        preloadImages: function() {
            $('#flashHeader').addClass('loading');
            var srcImg = '';
            var count = 0;
            $(flashImages).each(function() {
                srcImg = imagePath + this;
                var flashImg = $(document.createElement('img'));
                var idTag = 'flashLoopImages' + count;
                flashImg.attr('id', idTag);
                flashImg.attr('src', srcImg);
                flashImg.css({display: 'none'});
                holder.append(flashImg);
                count++;
            });
            this.loop();
        }
    };
    $(document).ready(function() {
        var noFlash = outputPlayerversion();
        if(noFlash) flashLoop.preloadImages();
        else swfobject.embedSWF("ELITE_MASTER.swf", "flashHeader", "960", "300", "9.0.0");
    });
</script>

CSS

 body {position:relative;}
 #flashHeader {background:url('JPEG_SEQUENCE/web_3/MASTER_00102.jpg') center center no-repeat;width:960px;height:300px;position:relative;}
 #flashHeader.loading {background:url('loading.gif') no-repeat center center;}
 #flashHeader IMG {position:absolute;top:0;left:0;width:960px;height:300px;z-index:8;}

Answer 1

I have found where the issue lays. I updated the two lines with the following:

 else $(elem[oldImage]).hide().css({display: 'none !important', visibility: 'hidden !important'});
 $(elem[currentItem]).show().css({display: 'block !important', visibility: 'visible !important'});