在ImageFlow Gallery上关闭鼠标滚轮滚动

时间:2011-10-26 04:41:58

标签: jquery gallery mousewheel imageflow

我正在尝试禁用Imageflow图库插件上的鼠标滚轮滚动(http://imageflow.finnrudolph.de/) 我试过评论与鼠标轮有关的部分;但它似乎影响自动滚动选项。任何帮助将非常感激。 这里的代码:      var my = this;

/* 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';
            }
        }
    }
};

1 个答案:

答案 0 :(得分:1)

我遇到了同样的问题。但是对于未经修改的版本1.3.0,我编辑了第313行,其中包含:

my.MouseWheel.init();

只是评论出来。

现在我也让它自动滚动,但当你点击div或图像时,它会停止,所以我使用注释禁用了第819行。

my.Slideshow.stop();