问添加div后图像不可见

EN

/* ImageFlow constructor */

/* Setting option defaults */
this.defaults =
{
    animationSpeed:     100,             /* Animation speed in ms */
    aspectRatio:        1.964,          /* Aspect ratio of the ImageFlow container (width divided by height) */
    buttons:            false,          /* Toggle navigation buttons */
    captions:           false,           /* Toggle captions */
    circular:           true,          /* Toggle circular rotation */
    imageCursor:        'default',      /* Cursor type for all images - default is 'default' */
    ImageFlowID:        'imageflow',    /* Default id of the ImageFlow container */
    imageFocusM:        1.0,            /* Multiplicator for the focussed image size in percent */
    imageFocusMax:      3,              /* Max number of images on each side of the focussed one */
    imagePath:          '',             /* Path to the images relative to the reflect_.php script */
    imageScaling:       true,           /* Toggle image scaling */ 
    imagesHeight:       0.67,           /* Height of the images div container in percent */
    imagesM:            1.0,            /* Multiplicator for all images in percent */
    onClick:            function() { /*document.location = this.url;*/ flipIt(this) },   /* Onclick behaviour */
    opacity:            true,          /* Toggle image opacity */
    opacityArray:       [10,8,6,4],   /* Image opacity (range: 0 to 10) first value is for the focussed image */
    percentLandscape:   118,            /* Scale landscape format */
    percentOther:       100,            /* Scale portrait and square format */
    preloadImages:      false,           /* Toggles loading bar (false: requires img attributes height and width) */
    reflections:        false,           /* Toggle reflections */
    reflectionGET:      '',             /* Pass variables via the GET method to the reflect_.php script */
    reflectionP:        0.5,            /* Height of the reflection in percent of the source image */
    reflectionPNG:      false,          /* Toggle reflect2.php or reflect3.php */
    reflectPath:        '',             /* Path to the reflect_.php script */
    scrollbarP:         0.6,            /* Width of the scrollbar in percent */
    slider:             false,           /* Toggle slider */
    sliderCursor:       'e-resize',     /* Slider cursor type - default is 'default' */
    sliderWidth:        17,             /* Width of the slider in px */
    slideshow:          false,          /* Toggle slideshow */
    slideshowSpeed:     1500,           /* Time between slides in ms */
    slideshowAutoplay:  false,          /* Toggle automatic slideshow play on startup */
    startID:            1,              /* Image ID to begin with */
    glideToStartID:     true,           /* Toggle glide animation to start ID */
    startAnimation:     false,          /* Animate images moving in from the right on startup */
    xStep:              180             /* Step width on the x-axis in px */
};


/* Closure for this */
var my = this;
//console.log(my)

/* Initiate ImageFlow */
this.init = function (options)
{
    /* Evaluate options */
    for(var name in my.defaults) 
    {
        this[name] = (options !== undefined && options[name] !== undefined) ? options[name] : my.defaults[name];
    }

    /* Try to get ImageFlow div element */
    var ImageFlowDiv = document.getElementById(my.ImageFlowID);
    if(ImageFlowDiv)
    {
        /* Set it global within the ImageFlow scope */
        ImageFlowDiv.style.visibility = 'visible';
        this.ImageFlowDiv = ImageFlowDiv;

        /* Try to create XHTML structure */
        if(this.createStructure())
        {
            this.imagesDiv = document.getElementById(my.ImageFlowID+'_images');
            this.captionDiv = document.getElementById(my.ImageFlowID+'_caption');
            this.navigationDiv = document.getElementById(my.ImageFlowID+'_navigation');
            this.scrollbarDiv = document.getElementById(my.ImageFlowID+'_scrollbar');
            this.sliderDiv = document.getElementById(my.ImageFlowID+'_slider');
            this.buttonNextDiv = document.getElementById(my.ImageFlowID+'_next');
            this.buttonPreviousDiv = document.getElementById(my.ImageFlowID+'_previous');
            this.buttonSlideshow = document.getElementById(my.ImageFlowID+'_slideshow');

            this.indexArray = [];
            this.current = 0;
            this.imageID = 0;
            this.target = 0;
            this.memTarget = 0;
            this.firstRefresh = true;
            this.firstCheck = true;
            this.busy = false;

            /* Set height of the ImageFlow container and center the loading bar */
            var width = this.ImageFlowDiv.offsetWidth;
            var height = Math.round(width / my.aspectRatio);
            document.getElementById(my.ImageFlowID+'_loading_txt').style.paddingTop = ((height * 0.5) -22) + 'px';
            ImageFlowDiv.style.height = height + 'px';

            /* Init loading progress */
            this.loadingProgress();
        }
    }
};


/* Create HTML Structure */
this.createStructure = function()
{
    /* Create images div container */
    var imagesDiv = my.Helper.createDocumentElement('div','images');

    /* Shift all images into the images div */
    var node, version, src, imageNode;
    var max = my.ImageFlowDiv.childNodes.length;
    for(var index = 0; index < max; index++)
    {
        node = my.ImageFlowDiv.childNodes[index];
        if (node && node.nodeType == 1 && node.nodeName == 'IMG')
        {
            /* Add 'reflect.php?img=' */
            if(my.reflections === true)
            {
                version = (my.reflectionPNG) ? '3' : '2';
                src = my.imagePath+node.getAttribute('src',2);
                src = my.reflectPath+'reflect'+version+'.php?img='+src+my.reflectionGET;
                node.setAttribute('src',src);
            }

            /* Clone image nodes and append them to the images div */
            imageNode = node.cloneNode(true);
            imagesDiv.appendChild(imageNode);
        }
    }

    /* Clone some more images to make a circular animation possible */
    if(my.circular)
    {
        /* Create temporary elements to hold the cloned images */
        var first = my.Helper.createDocumentElement('div','images');
        var last = my.Helper.createDocumentElement('div','images');

        /* Make sure, that there are enough images to use circular mode */
        max = imagesDiv.childNodes.length;
        if(max < my.imageFocusMax)
        {
            my.imageFocusMax = max;
        }

        /* Do not clone anything if there is only one image */
        if(max > 1)
        {
            /* Clone the first and last images */
            var i;
            for(i = 0; i < max; i++)
            {
                /* Number of clones on each side equals the imageFocusMax */
                node = imagesDiv.childNodes[i];
                if(i < my.imageFocusMax)
                {
                    imageNode = node.cloneNode(true);
                    first.appendChild(imageNode);
                }
                if(max-i < my.imageFocusMax+1)
                {
                    imageNode = node.cloneNode(true);
                    last.appendChild(imageNode);
                }
            }

            /* Sort the image nodes in the following order: last | originals | first */
            for(i = 0; i < max; i++)
            {
                node = imagesDiv.childNodes[i];
                imageNode = node.cloneNode(true);
                last.appendChild(imageNode);
            }



            for(i = 0; i < my.imageFocusMax; i++)
            {
                node = first.childNodes[i];
                imageNode = node.cloneNode(true);
                last.appendChild(imageNode);
            }

            /* Overwrite the imagesDiv with the new order */
            imagesDiv = last;

        }


    }

    /* Create slideshow button div and append it to the images div */
    if(my.slideshow)
    {
        var slideshowButton = my.Helper.createDocumentElement('div','slideshow');
        imagesDiv.appendChild(slideshowButton);
    }

    /* Create loading text container */
    var loadingP = my.Helper.createDocumentElement('p','loading_txt');
    var loadingText = document.createTextNode(' ');
    loadingP.appendChild(loadingText);

    /* Create loading div container */
    var loadingDiv = my.Helper.createDocumentElement('div','loading');

    /* Create loading bar div container inside the loading div */
    var loadingBarDiv = my.Helper.createDocumentElement('div','loading_bar');
    loadingDiv.appendChild(loadingBarDiv);

    /* Create captions div container */
    var captionDiv = my.Helper.createDocumentElement('div','caption');

    /* Create slider and button div container inside the scrollbar div */
    var scrollbarDiv = my.Helper.createDocumentElement('div','scrollbar');
    var sliderDiv = my.Helper.createDocumentElement('div','slider');
    scrollbarDiv.appendChild(sliderDiv);
    if(my.buttons)
    {
        var buttonPreviousDiv = my.Helper.createDocumentElement('div','previous', 'button');
        var buttonNextDiv = my.Helper.createDocumentElement('div','next', 'button');
        scrollbarDiv.appendChild(buttonPreviousDiv);
        scrollbarDiv.appendChild(buttonNextDiv);
    }

    /* Create navigation div container beneath images div */
    var navigationDiv = my.Helper.createDocumentElement('div','navigation');
    navigationDiv.appendChild(captionDiv);
    navigationDiv.appendChild(scrollbarDiv);

    /* Update document structure and return true on success */
    var success = false;
    if (my.ImageFlowDiv.appendChild(imagesDiv) &&
        my.ImageFlowDiv.appendChild(loadingP) &&
        my.ImageFlowDiv.appendChild(loadingDiv) &&
        my.ImageFlowDiv.appendChild(navigationDiv))
    {
        /* Remove image nodes outside the images div */
        max = my.ImageFlowDiv.childNodes.length;
        for(index = 0; index < max; index++)
        {
            node = my.ImageFlowDiv.childNodes[index];
            if (node && node.nodeType == 1 && node.nodeName == 'IMG')
            {
                my.ImageFlowDiv.removeChild(node);
            }
        }
        success = true;
    }
    return success;
};


/* Manage loading progress and call the refresh function */
this.loadingProgress = function()
{
    var p = my.loadingStatus();
    if((p < 100 || my.firstCheck) && my.preloadImages)
    {
        /* Insert a short delay if the browser loads rapidly from its cache */
        if(my.firstCheck && p == 100)
        {
            my.firstCheck = false;
            window.setTimeout(my.loadingProgress, 100);
        }
        else
        {
            window.setTimeout(my.loadingProgress, 40);
        }
    }
    else
    {
        /* Hide loading elements */
        document.getElementById(my.ImageFlowID+'_loading_txt').style.display = 'none';
        document.getElementById(my.ImageFlowID+'_loading').style.display = 'none';

        /* Refresh ImageFlow on window resize - delay adding this event for the IE */
        window.setTimeout(my.Helper.addResizeEvent, 1000);

        /* Call refresh once on startup to display images */
        my.refresh();

        /* Only initialize navigation elements if there is more than one image */
        if(my.max > 1)
        {
            /* Initialize mouse, touch and key support */
            //my.MouseWheel.init();
            //my.MouseDrag.init();
            my.Touch.init();
            my.Key.init();

            /* Toggle slideshow */
            if(my.slideshow)
            {
                my.Slideshow.init();
            }

            /* Toggle scrollbar visibility */
            if(my.slider)
            {
                my.scrollbarDiv.style.visibility = 'visible';
            }
        }
    }
};


/* Return loaded images in percent, set loading bar width and loading text */
this.loadingStatus = function()
{
    var max = my.imagesDiv.childNodes.length;
    var i = 0, completed = 0;
    var image = null;
    for(var index = 0; index < max; index++)
    {
        image = my.imagesDiv.childNodes[index];
        if(image && image.nodeType == 1 && image.nodeName == 'IMG')
        {
            if(image.complete)
            {
                completed++;
            }
            i++;
        }
    }

    var finished = Math.round((completed/i)*100);
    var loadingBar = document.getElementById(my.ImageFlowID+'_loading_bar');
    loadingBar.style.width = finished+'%';

    /* Do not count the cloned images */
    if(my.circular)
    {
        i = i - (my.imageFocusMax*2);
        completed = (finished < 1) ? 0 : Math.round((i/100)*finished);
    }

    var loadingP = document.getElementById(my.ImageFlowID+'_loading_txt');
    var loadingTxt = document.createTextNode('loading images '+completed+'/'+i);
    loadingP.replaceChild(loadingTxt,loadingP.firstChild);
    return finished;
};


/* Cache EVERYTHING that only changes on refresh or resize of the window */
this.refresh = function()
{
    /* Cache global variables */
    this.imagesDivWidth = my.imagesDiv.offsetWidth+my.imagesDiv.offsetLeft;
    this.maxHeight = Math.round(my.imagesDivWidth / my.aspectRatio);
    this.maxFocus = my.imageFocusMax * my.xStep;
    this.size = my.imagesDivWidth * 0.5;
    this.sliderWidth = my.sliderWidth * 0.5;
    this.scrollbarWidth = (my.imagesDivWidth - ( Math.round(my.sliderWidth) * 2)) * my.scrollbarP;
    this.imagesDivHeight = Math.round(my.maxHeight * my.imagesHeight);

    /* Change imageflow div properties */
    my.ImageFlowDiv.style.height = my.maxHeight + 'px';

    /* Change images div properties */
    my.imagesDiv.style.height =  my.imagesDivHeight + 'px'; 

    /* Change images div properties */
    my.navigationDiv.style.height =  (my.maxHeight - my.imagesDivHeight) + 'px'; 

    /* Change captions div properties */
    my.captionDiv.style.width = my.imagesDivWidth + 'px';
    my.captionDiv.style.paddingTop = Math.round(my.imagesDivWidth * 0.02) + 'px';

    /* Change scrollbar div properties */
    my.scrollbarDiv.style.width = my.scrollbarWidth + 'px';
    my.scrollbarDiv.style.marginTop = Math.round(my.imagesDivWidth * 0.02) + 'px';
    my.scrollbarDiv.style.marginLeft = Math.round(my.sliderWidth + ((my.imagesDivWidth - my.scrollbarWidth)/2)) + 'px';

    /* Set slider attributes */
    my.sliderDiv.style.cursor = my.sliderCursor;
    my.sliderDiv.onmousedown = function () { my.MouseDrag.start(this); return false;};

    if(my.buttons)
    {
        my.buttonPreviousDiv.onclick = function () { my.MouseWheel.handle(1); };
        my.buttonNextDiv.onclick = function () { my.MouseWheel.handle(-1); };
    }

    /* Set the reflection multiplicator */
    var multi = (my.reflections === true) ? my.reflectionP + 1 : 1;

    /* Set image attributes */
    var max = my.imagesDiv.childNodes.length;
    var i = 0;
    var image = null;
    for (var index = 0; index < max; index++)
    {
        image = my.imagesDiv.childNodes[index];
        if(image !== null && image.nodeType == 1 && image.nodeName == 'IMG')
        {
            this.indexArray[i] = index;

            /* Set image attributes to store values */
            image.url = image.getAttribute('longdesc');
            image.xPosition = (-i * my.xStep);
            image.i = i;

            /* Add width and height as attributes only once */
            if(my.firstRefresh)
            {
                if(image.getAttribute('width') !== null && image.getAttribute('height') !== null)
                {
                    image.w = image.getAttribute('width');
                    image.h = image.getAttribute('height') * multi;
                }
                else{
                    image.w = image.width;
                    image.h = image.height;
                }
            }

            /* Check source image format. Get image height minus reflection height! */
            if((image.w) > (image.h / (my.reflectionP + 1)))
            {
                /* Landscape format */
                image.pc = my.percentLandscape;
                image.pcMem = my.percentLandscape;
            }
            else
            {
                /* Portrait and square format */
                image.pc = my.percentOther;
                image.pcMem = my.percentOther;
            }

            /* Change image positioning */
            if(my.imageScaling === false)
            {
                image.style.position = 'relative';
                image.style.display = 'inline';
            }

            /* Set image cursor type */
            image.style.cursor = my.imageCursor;
            i++;
        }
    }
    this.max = my.indexArray.length;

    /* Override dynamic sizes based on the first image */
    if(my.imageScaling === false)
    {
        image = my.imagesDiv.childNodes[my.indexArray[0]];

        /* Set left padding for the first image */
        this.totalImagesWidth = image.w * my.max;
        image.style.paddingLeft = (my.imagesDivWidth/2) + (image.w/2) + 'px';

        /* Override images and navigation div height */
        my.imagesDiv.style.height =  image.h + 'px';
        my.navigationDiv.style.height =  (my.maxHeight - image.h) + 'px'; 
    }

    /* Handle startID on the first refresh */
    if(my.firstRefresh)
    {
        /* Reset variable */
        my.firstRefresh = false;

        /* Set imageID to the startID */
        my.imageID = my.startID-1;
        if (my.imageID < 0 )
        {
            my.imageID = 0;
        }

        /* Map image id range in cicular mode (ignore the cloned images) */
        if(my.circular)
        {   
            my.imageID = my.imageID + my.imageFocusMax;
        }

        /* Make sure, that the id is smaller than the image count  */
        maxId = (my.circular) ?  (my.max-(my.imageFocusMax))-1 : my.max-1;
        if (my.imageID > maxId)
        {
            my.imageID = maxId;
        }

        /* Toggle glide animation to start ID */
        if(my.glideToStartID === false)
        {
            my.moveTo(-my.imageID * my.xStep);
        }

        /* Animate images moving in from the right */
        if(my.startAnimation)
        {
            my.moveTo(5000);
        }
    }

    /* Only animate if there is more than one image */
    if(my.max > 1)
    {
        my.glideTo(my.imageID);
    }

    /* Display images in current order */
    my.moveTo(my.current);
};


/* Main animation function */
this.moveTo = function(x)
{
    //alert(x)
    this.current = x;
    this.zIndex = my.max;


    /* Main loop */
    for (var index = 0; index < my.max; index++)
    {
        var image = my.imagesDiv.childNodes[my.indexArray[index]];
        var currentImage = index * -my.xStep;

        /* Enabled image scaling */
        if(my.imageScaling)
        {
            /* Don't display images that are not conf_focussed */

            if ((currentImage + my.maxFocus) < my.memTarget || (currentImage - my.maxFocus) > my.memTarget)
            {
                image.style.visibility = 'hidden';
                image.style.display = 'none';
            }
            else
            {
                var z = (Math.sqrt(10000 + x * x) + 100) * my.imagesM;
                //var z = (Math.sqrt(10000) + 500) * my.imagesM;
                var xs = x / z * my.size + my.size;

                /* Still hide images until they are processed, but set display style to block */
                image.style.display = 'block';

                /* Process new image height and width */
                var newImageH = (image.h / image.w * image.pc) / z * my.size;
                var newImageW = 0;
                switch (newImageH > my.maxHeight)
                {
                    case false:
                        newImageW = image.pc / z * my.size;
                        break;

                    default:
                        newImageH = my.maxHeight;
                        newImageW = image.w * newImageH / image.h;
                        break;
                }

                var newImageTop = (my.imagesDivHeight - newImageH) + ((newImageH / (my.reflectionP + 1)) * my.reflectionP);

                /* Set new image properties */
                image.style.left = xs - (image.pc / 2) / z * my.size + 'px';
                if(newImageW && newImageH)
                {
                    image.style.height = newImageH + 'px';
                    image.style.width = newImageW + 'px';
                    image.style.top = newImageTop + 'px';
                    /*
                     newImageTop="100.239";
                     newImageH="250";
                     newImageW="210";
                     image.style.height = newImageH + 'px';
                     image.style.width = newImageW + 'px';
                     image.style.top = newImageTop + 'px'; */
                }
                image.style.visibility = 'visible';

                //console.log("LEFT  == " +image.style.left);
                //console.log("TOP   ==" + newImageTop)


                /* Set image layer through zIndex */
                switch ( x < 0 )
                {
                    case true:
                        this.zIndex++;
                        break;

                    default:
                        this.zIndex = my.zIndex - 1;
                        break;
                }

                /* Change zIndex and onclick function of the focussed image */
                switch ( image.i == my.imageID )
                {
                    case false:
                        image.onclick = function() {  my.glideTo(this.i);};
                        break;

                    default:
                        this.zIndex = my.zIndex + 1;
                        if(image.url !== '')
                        {
                            image.onclick = my.onClick;
                        }
                        break;
                }
                image.style.zIndex = my.zIndex;
            }
        }

        /* Disabled image scaling */
        else
        {
            if ((currentImage + my.maxFocus) < my.memTarget || (currentImage - my.maxFocus) > my.memTarget)
            {
                image.style.visibility = 'hidden';
            }
            else
            {
                image.style.visibility = 'visible';

                /* Change onclick function of the focussed image */
                switch ( image.i == my.imageID )
                {
                    case false:
                        image.onclick = function() { my.glideTo(this.i);};
                        break;

                    default:
                        if(image.url !== '')
                        {
                            image.onclick = my.onClick;
                        }
                        break;
                }
            }   
            my.imagesDiv.style.marginLeft = (x - my.totalImagesWidth) + 'px';
        }

        x += my.xStep;
    }
};