JS实现carousel相册效果改进源码

ylightbox.gif (92.55 KB)

2009-8-2 07:37

YAO.YLightBox = {
    isHidden: false,
    photos: null,
    length: 0,
    YOverlay: null,
    YBox: null,
    YBoxDefaultWidth: 500,
    YBoxDefaultHeight: 0,
    YBoxHd: null,
    YBoxHdHeight: 0,
    YBoxTitle: null,
    YBoxToolBar: null,
    closeable: true,  // 是否有关闭按钮（这个我忘了加ESC的按钮事件的支持，会加上的。）
    YBoxCloseBar: null,
    maximizable: true, // 伸缩显示图片按钮是否可用
    YBoxMaximizeBar: null,
    newindowable: true, // 新窗口打开图片按钮是否可用
    YBoxNewWinBar: null,
    YBoxBd: null,
    YBoxBDefaultHeight: 0,
    YBoxPhoto: null,
    YBoxPhotoDefaultWidth: 0,
    YBoxPhotoDefaultHeight: 0,
    YBoxTips: null,
    YBoxIndex: null,
    YBoxLastIndex: 0,
    carouselable: true, // 是否有缩略图索引（Carousel插件）
    YCarousel: null,
    YBoxCarousel: null,
    YBoxScroller: null,
    YBoxBtnLastGroup: null,
    YBoxBtnNextGroup: null,
    YBoxLastSample: null,
    albumabel: true, // 是否可以之间点图片左右切换（Album的一个功能）
    YAlbum: null,
    YBoxBtnPrevious: null,
    YBoxBtnNext: null,
    BTN_DISABLED_CLASS: 'dis',
    IMG_BTN_PREVIOUS: 'url(img/last-photo.gif)',
    IMG_BTN_NEXT: 'url(img/next-photo.gif)',
   
    init: function(itemClass, itemTag, rootId){
        var i, oSelf = this;
        this.photos = YAO.getElByClassName(itemClass, itemTag, rootId);
        this.length = this.photos.length;
        for (i = 0; i < this.length; ++i) {
            YAO.on(this.photos[i], 'click', function(index){
                return function(event){
                    var evt = event || window.event;
                    this.YBoxLastIndex = index;
                    this.YBoxPhotoDefaultWidth = this.photos[this.YBoxLastIndex].width;
                    this.YBoxPhotoDefaultHeight = this.photos[this.YBoxLastIndex].height;
                    this.initComponent();
                    this.zoom();
                    YAO.stopEvent(evt);
                }
            }(i), this.photos[i], oSelf);
        }
    },
    initComponent: function(){
        if (!this.YBox) {
            this.create();
            this.initEvents();
        }
        else {
            this.show();
        }
        this.currentSample();
    },   
    create: function(){
        var D = document, i, oDfBox = D.createDocumentFragment(), oDfTip = D.createDocumentFragment(), docWidth = YAO.getDocumentWidth(), docHeight = YAO.getDocumentHeight(), oSelf = this;
        oImage = this.photos[this.YBoxLastIndex];
        oDfBox.appendChild(YAO.Builder.Node('div', {
            id: 'yl-shardow'
        }));
        oDfBox.appendChild(YAO.Builder.Node('div', {
            id: 'yl-box'
        }, [YAO.Builder.Node('div', {
            id: 'yl-box-hd'
        }, [YAO.Builder.Node('h3', {
            id: 'yl-box-tlt'
        }, oImage.alt),YAO.Builder.Node('span',{
            id: 'yl-box-toolbar'
        })]), YAO.Builder.Node('div', {
            id: 'yl-box-bd'
        }, [YAO.Builder.Node('img', {
            src: oImage.src,
            alt: oImage.alt,
            id: 'yl-photo'
        }), YAO.Builder.Node('div', {
            id: 'carousel'
        },YAO.Builder.Node('div', {
                id: 'carousel_container'
        }))])]));
        D.body.appendChild(oDfBox);
        
        this.YOverlay = YAO.getEl('yl-shardow');
        YAO.setStyles(this.YOverlay, {
            height: docHeight + 'px'
        });
        
        this.YBox = YAO.getEl('yl-box');
        this.YBoxHd = YAO.getEl('yl-box-hd');
        this.YBoxHdHeight = this.YBoxHd.offsetHeight;
        this.YBoxTitle = YAO.getEl('yl-box-tlt');
        this.YBoxToolBar = YAO.getEl('yl-box-toolbar');
        
        this.initTools();
        
        this.YBoxBd = YAO.getEl('yl-box-bd');
        this.YBoxCarousel = YAO.getEl('carousel');
        this.YBoxCarouselCnt = YAO.getEl('carousel_container');
        this.YBoxPhoto = YAO.getEl('yl-photo');
        
        this.initPlgins();
        
        oDfTip.appendChild(YAO.Builder.Node('div', {
            id: 'yl-tips'
        }, [YAO.Builder.Node('em', {
            id: 'yl-curIndex'
        }, (this.YBoxLastIndex + 1) + ''), ' / ' + this.length + ' pictures']));
        this.YBoxCarousel.appendChild(oDfTip);
        
        this.YBoxTips = YAO.getEl('yl-tips');
        this.YBoxIndex = YAO.getEl('yl-curIndex');
        
        if (this.carouselable) {
            this.YBoxLastSample = this.YCarousel.items[this.YBoxLastIndex];
        }
        
        this.isHidden = false;
    },
    initTools: function(){
        var D = document, oDfTools = D.createDocumentFragment();
        oImage = this.photos[this.YBoxLastIndex];
        if (this.newindowable) {
            oDfTools.appendChild(YAO.Builder.Node('a', {
                id: 'yl-box-newindow',
                href: oImage.src,
                target: '_blank',
                title: '新窗口打开'
            }, '新窗口打开'));
        }
        if (this.maximizable) {
            oDfTools.appendChild(YAO.Builder.Node('a', {
                id: 'yl-box-adjust',
                className: 'imgadjust',
                href: '#adjust',
                title: '显示实际尺寸'
            }, '显示实际尺寸'));
        }
        if (this.closeable) {
            oDfTools.appendChild(YAO.Builder.Node('a', {
                id: 'yl-box-closebar',
                className: 'imgclose',
                href: '#close',
                title: '关闭窗口'
            }, '关闭窗口'));
        }
        this.YBoxToolBar.appendChild(oDfTools);
        this.YBoxNewWinBar = YAO.getEl('yl-box-newindow');
        this.YBoxMaximizeBar = YAO.getEl('yl-box-adjust');
        this.YBoxCloseBar = YAO.getEl('yl-box-closebar');
    },
    initPlgins: function(){
        var D = document, oSelf = this, oCConfig = {}, oAConfig = {}, i, oDfSamples = D.createDocumentFragment(), oDfBtnsGroups = D.createDocumentFragment(), oDfBtnsPhoto = D.createDocumentFragment();
        if (this.carouselable) {
            this.YBoxCarouselCnt.appendChild(YAO.Builder.Node('ul', {
                id: 'samples_list'
            }));
            this.YBoxScroller = YAO.getEl('samples_list');
            
            for (i = 0; i < this.length; ++i) {
                oDfSamples.appendChild(YAO.Builder.Node('li', {
                    className: i === oSelf.YLastIndex ? 'current' : ''
                }, YAO.Builder.Node('a', {
                    href: oSelf.photos[i].src,
                    title: oSelf.photos[i].alt,
                    target: 'blank'
                }, YAO.Builder.Node('img', {
                    src: oSelf.photos[i].src,
                    alt: oSelf.photos[i].alt
                }))));
            }
            this.YBoxScroller.appendChild(oDfSamples);
            
            oDfBtnsGroups.appendChild(YAO.Builder.Node('div', {
                id: 'carousel_btn_lastgroup'
            }, YAO.Builder.Node('a', {
                href: '#lastgroup',
                title: '上一组'
            }, '上一组')));
            oDfBtnsGroups.appendChild(YAO.Builder.Node('div', {
                id: 'carousel_btn_nextgroup'
            }, YAO.Builder.Node('a', {
                href: '#nextgroup',
                title: '下一组'
            }, '下一组')));
            this.YBoxCarousel.appendChild(oDfBtnsGroups);
            
            this.YBoxBtnLastGroup = YAO.getEl('carousel_btn_lastgroup');
            this.YBoxBtnNextGroup = YAO.getEl('carousel_btn_nextgroup');   
        
            oCConfig = {
                btnPrevious: oSelf.YBoxBtnLastGroup,
                Container: oSelf.YBoxCarouselCnt,
                Scroller: oSelf.YBoxScroller,
                btnNext: oSelf.YBoxBtnNextGroup,
                stepWidth: 100,
                items: 'li'
            };
            this.YCarousel = new YAO.Carousel(oCConfig);
        }
        
        if (this.albumabel) {
            oDfBtnsPhoto.appendChild(YAO.Builder.Node('a', {
                id: 'carousel_previous_photo',
                className: 'previous',
                href: (oSelf.YLastIndex - 1 > 0) ? oSelf.photos[oSelf.YLastIndex - 1].src : oSelf.photos[0].src,
                title: '上一张',
                target: '_blank'
            }, '上一张'));
            oDfBtnsPhoto.appendChild(YAO.Builder.Node('a', {
                id: 'carousel_next_photo',
                className: 'next',
                href: (oSelf.YLastIndex + 1 < oSelf.length - 1) ? oSelf.photos[oSelf.YLastIndex + 1].src : oSelf.photos[oSelf.length - 1].src,
                title: '下一张',
                target: '_blank'
            }, '下一张'));
            this.YBoxBd.appendChild(oDfBtnsPhoto);
            
            this.YBoxBtnPrevious = YAO.getEl('carousel_previous_photo');
            this.YBoxBtnNext = YAO.getEl('carousel_next_photo');   
        }
    },
    show: function(){
        var oImage = this.photos[this.YBoxLastIndex];
        if (this.YOverlay && this.YBox && this.isHidden) {
            this.YBoxTitle.innerHTML = oImage.alt;
            this.YBoxNewWinBar.href = oImage.src;
            YAO.Builder.Attributes(this.YBoxPhoto, {
                src: oImage.src,
                alt: oImage.alt
            });
            this.YBoxIndex.innerHTML = (this.YBoxLastIndex + 1);
            YAO.setStyle(this.YOverlay, 'display', 'block');
            YAO.setStyle(this.YBox, 'display', 'block');   
            this.isHidden = false;
        }
    },
    initBtns: function(){
        var oSelf = this;
        if (this.albumabel) {
            if (YAO.ua.ie) {
                YAO.setStyle(this.YBoxBtnPrevious, 'backgroundImage', oSelf.IMG_BTN_PREVIOUS);
                YAO.setStyle(this.YBoxBtnNext, 'backgroundImage', oSelf.IMG_BTN_NEXT);
            }
            if (this.YBoxLastIndex === 0) {
                YAO.addClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS);
                if (YAO.ua.ie) {
                    YAO.setStyle(this.YBoxBtnPrevious, 'backgroundImage', 'none');
                }
            }
            if (this.YBoxLastIndex === (this.length - 1)) {
                YAO.addClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS);
                if (YAO.ua.ie) {
                    YAO.setStyle(this.YBoxBtnNext, 'backgroundImage', 'none');
                }
            }
        }
    },
    initEvents: function(){
        var i;
        
        if (this.maximizable) {
            YAO.on(this.YBoxHd, 'dblclick', this.toggleMaximize, this.YBoxHd, this); // 当可伸缩时，双击标题栏，可以伸缩窗口，现在更想window的窗口了！
            YAO.on(this.YBoxMaximizeBar, 'click', this.toggleMaximize, this.YBoxMaximizeBar, this);
        }
        if (this.closeable) {
            YAO.on(this.YBoxCloseBar, 'click', this.close, this.YBoxCloseBar, this);
        }
        
        if (this.carouselable) {
            for (i = 0; i < this.length; ++i) {
                YAO.on(this.YCarousel.items[i], 'click', function(index){
                    return function(event){
                        var evt = event || window.event;
                        this.YBoxLastIndex = index;
                        this.btnsEnabled();
                        this.changePhoto();
                        YAO.stopEvent(evt);
                    }
                }(i), this.YCarousel.items[i], this);
            }
            
            YAO.on(this.YBoxTips, 'click', this.showCarousel, this.YBoxTips, this);
        }
        
        if(this.albumabel){
            YAO.on(this.YBoxBtnPrevious, 'click', this.previousPhoto, this.YBoxBtnPrevious, this);
            YAO.on(this.YBoxBtnNext, 'click', this.nextPhoto, this.YBoxBtnNext, this);
        }
        
        YAO.on(window, 'scroll', this.fixPosition, window, this);
        YAO.on(window, 'resize', this.fixPosition, window, this);
    },
    close: function(event){
        var evt = event || window.event;
        if (this.YOverlay && this.YBox && !this.isHidden) {
            YAO.setStyle(this.YOverlay, 'display', 'none');
            YAO.setStyle(this.YBox, 'display', 'none');
            this.minimize();
            this.isHidden = true;
            this.YBoxLastIndex = 0;
        }
        YAO.stopEvent(evt);
    },        
    zoom: function(){
        var percent = this.YBoxPhotoDefaultWidth / this.YBoxPhotoDefaultHeight, height = this.YBoxDefaultWidth / percent;
        this.YBoxDefaultHeight = height + this.YBoxHdHeight;
        this.YBoxBDefaultHeight = height;
        if (this.YBoxPhotoDefaultWidth > this.YBoxDefaultWidth) {
            this.minimize();
        }
        else {
            this.restore();
        }
        this.scrollCarousel();
        this.initBtns();
        this.fixPosition();
    },
    minimize: function(){
        var oSelf = this;
        YAO.setStyles(this.YBoxPhoto, {
            width: oSelf.YBoxDefaultWidth + 'px',
            height: oSelf.YBoxDefaultHeight + 'px'
        });
        YAO.setStyles(this.YBoxBd, {
            width: oSelf.YBoxDefaultWidth + 'px',
            height: oSelf.YBoxBDefaultHeight + 'px'
        });
        YAO.setStyles(this.YBox, {
            width: oSelf.YBoxDefaultWidth + 'px',
            height: oSelf.YBoxDefaultHeight + 'px'
        });
        if (this.YBoxMaximizeBar) {
            this.YBoxMaximizeBar.title = '显示实际尺寸';
        }
        if (YAO.ua.ie && this.albumable) {
            YAO.setStyle(this.YBoxBtnPrevious, 'height', (this.YBoxDefaultHeight + 'px'));
            YAO.setStyle(this.YBoxBtnNext, 'height', (this.YBoxDefaultHeight + 'px'));
        }
    },
    restore: function(){
        var oSelf = this;
        YAO.setStyles(this.YBoxPhoto, {
            width: oSelf.YBoxPhotoDefaultWidth + 'px',
            height: oSelf.YBoxPhotoDefaultHeight + 'px'
        });
        YAO.setStyles(this.YBoxBd, {
            width: oSelf.YBoxPhotoDefaultWidth + 'px',
            height: oSelf.YBoxPhotoDefaultHeight + 'px'
        });
        YAO.setStyles(this.YBox, {
            width: oSelf.YBoxPhotoDefaultWidth + 'px',
            height: (oSelf.YBoxPhotoDefaultHeight + oSelf.YBoxHdHeight) + 'px'
        });
        if (this.YBoxMaximizeBar) {
            this.YBoxMaximizeBar.title = '显示缩略图';
        }
        if (YAO.ua.ie && this.albumable) {
            YAO.setStyle(this.YBoxBtnPrevious, 'height', (this.YBoxPhotoDefaultWidth + 'px'));
            YAO.setStyle(this.YBoxBtnNext, 'height', (this.YBoxPhotoDefaultHeight + 'px'));
        }
    },
    toggleMaximize: function(event){
        var evt = event || window.event;
        if (this.YBoxPhotoDefaultWidth > this.YBoxDefaultWidth) {
            if (this.YBoxPhoto.width === this.YBoxDefaultWidth) {
                this.restore();
            }
            else {
                this.minimize();
            }
            this.fixPosition();
        }
        YAO.stopEvent(evt);
    },
    fixPosition: function(){
        var documentWidth = YAO.getDocumentWidth(), documentHeight = YAO.getDocumentHeight(), viewportWidth = YAO.getViewportWidth(), viewportHeight = YAO.getViewportHeight(), xScroll = YAO.getXScroll(), yScroll = YAO.getYScroll(), YBoxWidth = this.YBox.offsetWidth, YBoxHeight = this.YBox.offsetHeight, left = xScroll + ((viewportWidth - YBoxWidth) / 2), top = yScroll + ((viewportHeight - YBoxHeight) / 2);
        
        if (YBoxWidth > viewportWidth) {
            if ((YBoxWidth < documentWidth) && ((YBoxWidth + xScroll) < documentWidth)) {
                left = xScroll;
            }
            else {
                left = documentWidth - YBoxWidth;
            }
        }
        else {
            if (YBoxWidth > documentWidth) {
                left = 0;
            }
        }
        if (YBoxHeight > viewportHeight) {
            if ((YBoxHeight < documentHeight) && ((YBoxHeight + yScroll) <= documentHeight)) {
                top = yScroll;
            }
            else {
                top = documentHeight - YBoxHeight;
            }
        }
        else {
            if (YBoxHeight > documentHeight) {
                top = 0;
            }
        }
        
        if (!this.isHidden) {
            YAO.setStyles(this.YBox, {
                margin: 0,
                left: left + 'px',
                top: top + 'px'
            });
        }
    },
    showCarousel: function(){
        var top = parseInt(YAO.getStyle(this.YBoxCarousel, 'top'), 10);
        if (top === -120) {
            YAO.moveElement(this.YBoxCarousel, 0, 0, 50);
            YAO.setStyle(this.YBoxBtnLastGroup, 'display', 'block');
            YAO.setStyle(this.YBoxBtnNextGroup, 'display', 'block');
        }
        else {
            YAO.moveElement(this.YBoxCarousel, 0, -120, 50);
            YAO.setStyle(this.YBoxBtnLastGroup, 'display', 'none');
            YAO.setStyle(this.YBoxBtnNextGroup, 'display', 'none');
        }
    },
    currentSample: function(){
        var curSample = null;
        if (this.carouselable) {
            curSample = this.YCarousel.items[this.YBoxLastIndex];
            
            if (curSample !== this.YBoxLastSample) {
                YAO.removeClass(this.YBoxLastSample, 'current');
            }
            YAO.addClass(curSample, 'current');
            this.YBoxLastSample = curSample;
        }
    },   
    scrollCarousel: function(){
        if (this.carouselable) {
            var curScreen = Math.ceil(((this.YBoxLastIndex + 1) * this.YCarousel.itemWidth) / this.YCarousel.stepWidth) - 1;
            if (curScreen != this.YCarousel.movedNum) {
                this.YCarousel.scroll(curScreen);
                this.YCarousel.movedNum = curScreen;
                if (this.YCarousel.movedNum !== 0 && YAO.hasClass(this.YCarousel.lnkBtnPrevious, this.BTN_DISABLED_CLASS)) {
                    YAO.removeClass(this.YCarousel.lnkBtnPrevious, this.BTN_DISABLED_CLASS);
                }
                else {
                    if (this.YCarousel.movedNum === 0) {
                        YAO.addClass(this.YCarousel.lnkBtnPrevious, this.BTN_DISABLED_CLASS);
                    }
                }
                if (this.YCarousel.movedNum !== this.YCarousel.maxMovedNum && YAO.hasClass(this.YCarousel.lnkBtnNext, this.BTN_DISABLED_CLASS)) {
                    YAO.removeClass(this.YCarousel.lnkBtnNext, this.BTN_DISABLED_CLASS);
                }
                else {
                    if (this.YCarousel.movedNum === this.YCarousel.maxMovedNum) {
                        YAO.addClass(this.YCarousel.lnkBtnNext, this.BTN_DISABLED_CLASS);
                    }
                }
            }
        }
    },   
    btnsEnabled: function(){
        if (this.albumabel) {
            if (this.YBoxLastIndex !== 0) {
                if (YAO.hasClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS)) {
                    YAO.removeClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS);
                }
                if (YAO.ua.ie) {
                    YAO.setStyle(this.YBoxBtnPrevious, 'backgroundImage', this.IMG_BTN_PREVIOUS);
                }
                this.YBoxBtnPrevious.href = this.photos[this.YBoxLastIndex - 1].src;
            }
            else {
                if (this.YBoxLastIndex === 0) {
                    YAO.addClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS);
                    if (YAO.ua.ie) {
                        YAO.setStyle(this.YBoxBtnPrevious, 'backgroundImage', 'none');
                    }
                    this.YBoxBtnPrevious.href = this.photos[this.YBoxLastIndex].src;
                }
            }
            if (this.YBoxLastIndex !== (this.length - 1)) {
                if (YAO.hasClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS)) {
                    YAO.removeClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS);
                }
                if (YAO.ua.ie) {
                    YAO.setStyle(this.YBoxBtnNext, 'backgroundImage', this.IMG_BTN_NEXT);
                }
                this.YBoxBtnNext.href = this.photos[this.YBoxLastIndex + 1].src;
            }
            else {
                if (this.YBoxLastIndex === (this.length - 1)) {
                    YAO.addClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS);
                    if (YAO.ua.ie) {
                        YAO.setStyle(this.YBoxBtnNext, 'backgroundImage', 'none');
                    }
                    this.YBoxBtnNext.href = this.photos[this.YBoxLastIndex].src;
                }
            }
        }
    },   
    previousPhoto: function(event){
        var evt = event || window.event;
        this.YBoxLastIndex -= 1;
        
        if (YAO.hasClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS)) {
            YAO.removeClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS);
        }
        if (this.YBoxLastIndex >= 1) {
            this.YBoxBtnPrevious.href = this.photos[this.YBoxLastIndex - 1].src;
        }
        
        if (this.YBoxLastIndex < 0) {
            this.YBoxLastIndex = 0;
            YAO.addClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS);
            this.YBoxBtnPrevious.href = this.photos[this.YBoxLastIndex].src;
        }
        this.YBoxBtnNext.href = this.photos[this.YBoxLastIndex + 1].src;
        
        this.changePhoto();
        YAO.stopEvent(evt);
    },
    nextPhoto: function(event){
        var evt = event || window.event;
        this.YBoxLastIndex += 1;
        
        if (YAO.hasClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS)) {
            YAO.removeClass(this.YBoxBtnPrevious, this.BTN_DISABLED_CLASS);
        }
        if (this.YBoxLastIndex <= (this.length - 2)) {
            this.YBoxBtnNext.href = this.photos[this.YBoxLastIndex + 1].src;
        }
        
        if (this.YBoxLastIndex > (this.length - 1)) {
            this.YBoxLastIndex = this.length - 1;
            YAO.addClass(this.YBoxBtnNext, this.BTN_DISABLED_CLASS);
            this.YBoxBtnNext.href = this.photos[this.YBoxLastIndex].src;
        }
        this.YBoxBtnPrevious.href = this.photos[this.YBoxLastIndex-1].src;
        
        this.changePhoto();
        YAO.stopEvent(evt);
    },
    changePhoto: function(){
        this.YBoxPhotoDefaultWidth = this.photos[this.YBoxLastIndex].width;
        this.YBoxPhotoDefaultHeight = this.photos[this.YBoxLastIndex].height;
        this.YBoxTitle.innerHTML = this.photos[this.YBoxLastIndex].alt;
        this.YBoxIndex.innerHTML = (this.YBoxLastIndex + 1);
        this.YBoxPhoto.src = this.photos[this.YBoxLastIndex].src;
        this.YBoxPhoto.alt = this.photos[this.YBoxLastIndex].alt;
        if (this.YBoxNewWinBar) {
            this.YBoxNewWinBar.href = this.photos[this.YBoxLastIndex].src;
        }
        this.currentSample();
        this.scrollCarousel();
        this.zoom();
    }
};