Antworten auf deine Fragen:
Neues Thema erstellen

Lytebox

pixel1966

Aktives Mitglied

hallo ..

weiß jemand wo in diesem quelltext die funktion für die bildzählung ist,möchte diese gerne ändern aber finde sie nicht.

danke im voraus ...


HTML:
Array.prototype.removeDuplicates = function () { for (var i = 1; i < this.length; i++) { if (this[i][0] == this[i-1][0]) { this.splice(i,1); } } }
Array.prototype.empty = function () { for (var i = 0; i <= this.length; i++) { this.shift(); } }
String.prototype.trim = function () { return this.replace(/^\s+|\s+$/g, ''); }

function LyteBox() {
    /*** Start Global Configuration ***/
        this.theme                = 'grey';    // themes: grey (default), red, green, blue, gold
        this.hideFlash            = true;        // controls whether or not Flash objects should be hidden
        this.outerBorder        = false;    // controls whether to show the outer grey (or theme) border
        this.resizeSpeed        = 8;        // controls the speed of the image resizing (1=slowest and 10=fastest)
        this.maxOpacity            = 80;        // higher opacity = darker overlay, lower opacity = lighter overlay
        this.navType            = 1;        // 1 = "Prev/Next" buttons on top left and left (default), 2 = "<< prev | next >>" links next to image number
        this.autoResize            = true;        // controls whether or not images should be resized if larger than the browser window dimensions
        this.doAnimations        = true;        // controls whether or not "animate" Lytebox, i.e. resize transition between images, fade in/out effects, etc.
        
        this.borderSize            = 12;        // if you adjust the padding in the CSS, you will need to update this variable -- otherwise, leave this alone...
    /*** End Global Configuration ***/
    
    /*** Configure Slideshow Options ***/
        this.slideInterval        = 10000;    // Change value (milliseconds) to increase/decrease the time between "slides" (10000 = 10 seconds)
        this.showNavigation        = true;        // true to display Next/Prev buttons/text during slideshow, false to hide
        this.showClose            = true;        // true to display the Close button, false to hide
        this.showDetails        = true;        // true to display image details (caption, count), false to hide
        this.showPlayPause        = true;        // true to display pause/play buttons next to close button, false to hide
        this.autoEnd            = true;        // true to automatically close Lytebox after the last image is reached, false to keep open
        this.pauseOnNextClick    = false;    // true to pause the slideshow when the "Next" button is clicked
        this.pauseOnPrevClick     = true;        // true to pause the slideshow when the "Prev" button is clicked
    /*** End Slideshow Configuration ***/
    
    if(this.resizeSpeed > 10) { this.resizeSpeed = 10; }
    if(this.resizeSpeed < 1) { resizeSpeed = 1; }
    this.resizeDuration = (11 - this.resizeSpeed) * 0.15;
    this.resizeWTimerArray        = new Array();
    this.resizeWTimerCount        = 0;
    this.resizeHTimerArray        = new Array();
    this.resizeHTimerCount        = 0;
    this.showContentTimerArray    = new Array();
    this.showContentTimerCount    = 0;
    this.overlayTimerArray        = new Array();
    this.overlayTimerCount        = 0;
    this.imageTimerArray        = new Array();
    this.imageTimerCount        = 0;
    this.timerIDArray            = new Array();
    this.timerIDCount            = 0;
    this.slideshowIDArray        = new Array();
    this.slideshowIDCount        = 0;
    this.imageArray     = new Array();
    this.activeImage = null;
    this.slideArray     = new Array();
    this.activeSlide = null;
    this.frameArray     = new Array();
    this.activeFrame = null;
    this.checkFrame();
    this.isSlideshow = false;
    this.isLyteframe = false;
    /*@cc_on
        /*@if (@_jscript)
            this.ie = (document.all && !window.opera) ? true : false;
        /*@else @*/
            this.ie = false;
        /*@end
    @*/
    this.ie7 = (this.ie && window.XMLHttpRequest);
    this.initialize();
}
LyteBox.prototype.initialize = function() {
    this.updateLyteboxItems();
    var objBody = this.doc.getElementsByTagName("body").item(0);    
    if (this.doc.getElementById('lbOverlay')) {
        objBody.removeChild(this.doc.getElementById("lbOverlay"));
        objBody.removeChild(this.doc.getElementById("lbMain"));
    }
    var objOverlay = this.doc.createElement("div");
        objOverlay.setAttribute('id','lbOverlay');
        objOverlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);
        objOverlay.style.display = 'none';
        objBody.appendChild(objOverlay);
    var objLytebox = this.doc.createElement("div");
        objLytebox.setAttribute('id','lbMain');
        objLytebox.style.display = 'none';
        objBody.appendChild(objLytebox);
    var objOuterContainer = this.doc.createElement("div");
        objOuterContainer.setAttribute('id','lbOuterContainer');
        objOuterContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);
        objLytebox.appendChild(objOuterContainer);
    var objIframeContainer = this.doc.createElement("div");
        objIframeContainer.setAttribute('id','lbIframeContainer');
        objIframeContainer.style.display = 'none';
        objOuterContainer.appendChild(objIframeContainer);
    var objIframe = this.doc.createElement("iframe");
        objIframe.setAttribute('id','lbIframe');
        objIframe.setAttribute('name','lbIframe');
        objIframe.style.display = 'none';
        objIframeContainer.appendChild(objIframe);
    var objImageContainer = this.doc.createElement("div");
        objImageContainer.setAttribute('id','lbImageContainer');
        objOuterContainer.appendChild(objImageContainer);
    var objLyteboxImage = this.doc.createElement("img");
        objLyteboxImage.setAttribute('id','lbImage');
        objImageContainer.appendChild(objLyteboxImage);
    var objLoading = this.doc.createElement("div");
        objLoading.setAttribute('id','lbLoading');
        objOuterContainer.appendChild(objLoading);
    var objDetailsContainer = this.doc.createElement("div");
        objDetailsContainer.setAttribute('id','lbDetailsContainer');
        objDetailsContainer.setAttribute((this.ie ? 'className' : 'class'), this.theme);
        objLytebox.appendChild(objDetailsContainer);
    var objDetailsData =this.doc.createElement("div");
        objDetailsData.setAttribute('id','lbDetailsData');
        objDetailsData.setAttribute((this.ie ? 'className' : 'class'), this.theme);
        objDetailsContainer.appendChild(objDetailsData);
    var objDetails = this.doc.createElement("div");
        objDetails.setAttribute('id','lbDetails');
        objDetailsData.appendChild(objDetails);
    var objCaption = this.doc.createElement("span");
        objCaption.setAttribute('id','lbCaption');
        objDetails.appendChild(objCaption);
    var objHoverNav = this.doc.createElement("div");
        objHoverNav.setAttribute('id','lbHoverNav');
        objImageContainer.appendChild(objHoverNav);
    var objBottomNav = this.doc.createElement("div");
        objBottomNav.setAttribute('id','lbBottomNav');
        objDetailsData.appendChild(objBottomNav);
    var objPrev = this.doc.createElement("a");
        objPrev.setAttribute('id','lbPrev');
        objPrev.setAttribute((this.ie ? 'className' : 'class'), this.theme);
        objPrev.setAttribute('href','#');
        objHoverNav.appendChild(objPrev);
    var objNext = this.doc.createElement("a");
        objNext.setAttribute('id','lbNext');
        objNext.setAttribute((this.ie ? 'className' : 'class'), this.theme);
        objNext.setAttribute('href','#');
        objHoverNav.appendChild(objNext);
    var objNumberDisplay = this.doc.createElement("span");
        objNumberDisplay.setAttribute('id','lbNumberDisplay');
        objDetails.appendChild(objNumberDisplay);
    var objNavDisplay = this.doc.createElement("span");
        objNavDisplay.setAttribute('id','lbNavDisplay');
        objNavDisplay.style.display = 'none';
        objDetails.appendChild(objNavDisplay);
    var objClose = this.doc.createElement("a");
        objClose.setAttribute('id','lbClose');
        objClose.setAttribute((this.ie ? 'className' : 'class'), this.theme);
        objClose.setAttribute('href','#');
        objBottomNav.appendChild(objClose);
    var objPause = this.doc.createElement("a");
        objPause.setAttribute('id','lbPause');
        objPause.setAttribute((this.ie ? 'className' : 'class'), this.theme);
        objPause.setAttribute('href','#');
        objPause.style.display = 'none';
        objBottomNav.appendChild(objPause);
    var objPlay = this.doc.createElement("a");
        objPlay.setAttribute('id','lbPlay');
        objPlay.setAttribute((this.ie ? 'className' : 'class'), this.theme);
        objPlay.setAttribute('href','#');
        objPlay.style.display = 'none';
        objBottomNav.appendChild(objPlay);
};
LyteBox.prototype.updateLyteboxItems = function() {    
    var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');
    for (var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];
        var relAttribute = String(anchor.getAttribute('rel'));
        if (anchor.getAttribute('href')) {
            if (relAttribute.toLowerCase().match('lytebox')) {
                anchor.onclick = function () { myLytebox.start(this, false, false); return false; }
            } else if (relAttribute.toLowerCase().match('lyteshow')) {
                anchor.onclick = function () { myLytebox.start(this, true, false); return false; }
            } else if (relAttribute.toLowerCase().match('lyteframe')) {
                anchor.onclick = function () { myLytebox.start(this, false, true); return false; }
            }
        }
    }
};
LyteBox.prototype.start = function(imageLink, doSlide, doFrame) {
    if (this.ie && !this.ie7) {    this.toggleSelects('hide');    }
    if (this.hideFlash) { this.toggleFlash('hide'); }
    this.isLyteframe = (doFrame ? true : false);
    var pageSize    = this.getPageSize();
    var objOverlay    = this.doc.getElementById('lbOverlay');
    var objBody        = this.doc.getElementsByTagName("body").item(0);
    objOverlay.style.height = pageSize[1] + "px";
    objOverlay.style.display = '';
    this.appear('lbOverlay', (this.doAnimations ? 0 : this.maxOpacity));
    var anchors = (this.isFrame) ? window.parent.frames[window.name].document.getElementsByTagName('a') : document.getElementsByTagName('a');
    if (this.isLyteframe) {
        this.frameArray = [];
        this.frameNum = 0;
        if ((imageLink.getAttribute('rel') == 'lyteframe')) {
            var alt = imageLink.getAttribute('alt');
            this.frameArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title'), (alt == null || alt == '' ? 'width: 400px; height: 400px; scrolling: auto;' : alt)));
        } else {
            if (imageLink.getAttribute('rel').indexOf('lyteframe') != -1) {
                for (var i = 0; i < anchors.length; i++) {
                    var anchor = anchors[i];
                    if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
                        var alt = anchor.getAttribute('alt');
                        this.frameArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title'), (alt == null || alt == '' ? 'width: 400px; height: 400px; scrolling: auto;' : alt)));
                    }
                }
                this.frameArray.removeDuplicates();
                while(this.frameArray[this.frameNum][0] != imageLink.getAttribute('href')) { this.frameNum++; }
            }
        }
    } else {
        this.imageArray = [];
        this.imageNum = 0;
        this.slideArray = [];
        this.slideNum = 0;
        if ((imageLink.getAttribute('rel') == 'lytebox')) {
            this.imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
        } else {
            if (imageLink.getAttribute('rel').indexOf('lytebox') != -1) {
                for (var i = 0; i < anchors.length; i++) {
                    var anchor = anchors[i];
                    if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
                        this.imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
                    }
                }
                this.imageArray.removeDuplicates();
                while(this.imageArray[this.imageNum][0] != imageLink.getAttribute('href')) { this.imageNum++; }
            }
            if (imageLink.getAttribute('rel').indexOf('lyteshow') != -1) {
                for (var i = 0; i < anchors.length; i++) {
                    var anchor = anchors[i];
                    if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))) {
                        this.slideArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
                    }
                }
                this.slideArray.removeDuplicates();
                while(this.slideArray[this.slideNum][0] != imageLink.getAttribute('href')) { this.slideNum++; }
            }
        }
    }
    var object = this.doc.getElementById('lbMain');
        object.style.top = (this.getPageScroll() + (pageSize[3] / 15)) + "px";
        object.style.display = '';
    if (!this.outerBorder) {
        this.doc.getElementById('lbOuterContainer').style.border = 'none';
        this.doc.getElementById('lbDetailsContainer').style.border = 'none';
    } else {
        this.doc.getElementById('lbOuterContainer').style.borderBottom = '';
        this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);
    }
    this.doc.getElementById('lbOverlay').onclick = function() { myLytebox.end(); return false; }
    this.doc.getElementById('lbMain').onclick = function(e) {
        var e = e;
        if (!e) {
            if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {
                e = window.parent.window.event;
            } else {
                e = window.event;
            }
        }
        var id = (e.target ? e.target.id : e.srcElement.id);
        if (id == 'lbMain') { myLytebox.end(); return false; }
    }
    this.doc.getElementById('lbClose').onclick = function() { myLytebox.end(); return false; }
    this.doc.getElementById('lbPause').onclick = function() { myLytebox.togglePlayPause("lbPause", "lbPlay"); return false; }
    this.doc.getElementById('lbPlay').onclick = function() { myLytebox.togglePlayPause("lbPlay", "lbPause"); return false; }
    this.isSlideshow = doSlide;
    this.isPaused = (this.slideNum != 0 ? true : false);
    if (this.isSlideshow && this.showPlayPause && this.isPaused) {
        this.doc.getElementById('lbPlay').style.display = '';
        this.doc.getElementById('lbPause').style.display = 'none';
    }
    if (this.isLyteframe) {
        this.changeContent(this.frameNum);
    } else {
        if (this.isSlideshow) {
            this.changeContent(this.slideNum);
        } else {
            this.changeContent(this.imageNum);
        }
    }
};
LyteBox.prototype.changeContent = function(imageNum) {
    if (this.isSlideshow) {
        for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
    }
    this.activeImage = this.activeSlide = this.activeFrame = imageNum;
    if (!this.outerBorder) {
        this.doc.getElementById('lbOuterContainer').style.border = 'none';
        this.doc.getElementById('lbDetailsContainer').style.border = 'none';
    } else {
        this.doc.getElementById('lbOuterContainer').style.borderBottom = '';
        this.doc.getElementById('lbOuterContainer').setAttribute((this.ie ? 'className' : 'class'), this.theme);
    }
    this.doc.getElementById('lbLoading').style.display = '';
    this.doc.getElementById('lbImage').style.display = 'none';
    this.doc.getElementById('lbIframe').style.display = 'none';
    this.doc.getElementById('lbPrev').style.display = 'none';
    this.doc.getElementById('lbNext').style.display = 'none';
    this.doc.getElementById('lbIframeContainer').style.display = 'none';
    this.doc.getElementById('lbDetailsContainer').style.display = 'none';
    this.doc.getElementById('lbNumberDisplay').style.display = 'none';
    if (this.navType == 2 || this.isLyteframe) {
        object = this.doc.getElementById('lbNavDisplay');
        object.innerHTML = '&nbsp;&nbsp;&nbsp;<span id="lbPrev2_Off" style="display: none;" class="' + this.theme + '">&laquo; prev</span><a href="#" id="lbPrev2" class="' + this.theme + '" style="display: none;">&laquo; prev</a> <b id="lbSpacer" class="' + this.theme + '">||</b> <span id="lbNext2_Off" style="display: none;" class="' + this.theme + '">next &raquo;</span><a href="#" id="lbNext2" class="' + this.theme + '" style="display: none;">next &raquo;</a>';
        object.style.display = 'none';
    }
    if (this.isLyteframe) {
        var iframe = myLytebox.doc.getElementById('lbIframe');
        var styles = this.frameArray[this.activeFrame][2];
        var aStyles = styles.split(';');
        for (var i = 0; i < aStyles.length; i++) {
            if (aStyles[i].indexOf('width:') >= 0) {
                var w = aStyles[i].replace('width:', '');
                iframe.width = w.trim();
            } else if (aStyles[i].indexOf('height:') >= 0) {
                var h = aStyles[i].replace('height:', '');
                iframe.height = h.trim();
            } else if (aStyles[i].indexOf('scrolling:') >= 0) {
                var s = aStyles[i].replace('scrolling:', '');
                iframe.scrolling = s.trim();
            } else if (aStyles[i].indexOf('border:') >= 0) {
                // Not implemented yet, as there are cross-platform issues with setting the border (from a GUI standpoint)
                //var b = aStyles[i].replace('border:', '');
                //iframe.style.border = b.trim();
            }
        }
        iframe.src = this.frameArray[this.activeFrame][0];        
        this.resizeContainer(parseInt(iframe.width), parseInt(iframe.height));
    } else {
        imgPreloader = new Image();
        imgPreloader.onload = function() {
            var imageWidth = imgPreloader.width;
            var imageHeight = imgPreloader.height;
            if (myLytebox.autoResize) {
                var pagesize = myLytebox.getPageSize();
                var x = pagesize[2] - 150;
                var y = pagesize[3] - 150;
                if (imageWidth > x) {
                    imageHeight = Math.round(imageHeight * (x / imageWidth));
                    imageWidth = x; 
                    if (imageHeight > y) { 
                        imageWidth = Math.round(imageWidth * (y / imageHeight));
                        imageHeight = y; 
                    }
                } else if (imageHeight > y) { 
                    imageWidth = Math.round(imageWidth * (y / imageHeight));
                    imageHeight = y; 
                    if (imageWidth > x) {
                        imageHeight = Math.round(imageHeight * (x / imageWidth));
                        imageWidth = x;
                    }
                }
            }
            var lbImage = myLytebox.doc.getElementById('lbImage')
            lbImage.src = (myLytebox.isSlideshow ? myLytebox.slideArray[myLytebox.activeSlide][0] : myLytebox.imageArray[myLytebox.activeImage][0]);
            lbImage.width = imageWidth;
            lbImage.height = imageHeight;
            myLytebox.resizeContainer(imageWidth, imageHeight);
            imgPreloader.onload = function() {};
        }
        imgPreloader.src = (this.isSlideshow ? this.slideArray[this.activeSlide][0] : this.imageArray[this.activeImage][0]);
    }
};
LyteBox.prototype.resizeContainer = function(imgWidth, imgHeight) {
    this.wCur = this.doc.getElementById('lbOuterContainer').offsetWidth;
    this.hCur = this.doc.getElementById('lbOuterContainer').offsetHeight;
    this.xScale = ((imgWidth  + (this.borderSize * 2)) / this.wCur) * 100;
    this.yScale = ((imgHeight  + (this.borderSize * 2)) / this.hCur) * 100;
    var wDiff = (this.wCur - this.borderSize * 2) - imgWidth;
    var hDiff = (this.hCur - this.borderSize * 2) - imgHeight;
    if (!(hDiff == 0)) {
        this.hDone = false;
        this.resizeH('lbOuterContainer', this.hCur, imgHeight + this.borderSize*2, this.getPixelRate(this.hCur, imgHeight));
    } else {
        this.hDone = true;
    }
    if (!(wDiff == 0)) {
        this.wDone = false;
        this.resizeW('lbOuterContainer', this.wCur, imgWidth + this.borderSize*2, this.getPixelRate(this.wCur, imgWidth));
    } else {
        this.wDone = true;
    }
    if ((hDiff == 0) && (wDiff == 0)) {
        if (this.ie){ this.pause(250); } else { this.pause(100); } 
    }
    this.doc.getElementById('lbPrev').style.height = imgHeight + "px";
    this.doc.getElementById('lbNext').style.height = imgHeight + "px";
    this.doc.getElementById('lbDetailsContainer').style.width = (imgWidth + (this.borderSize * 2) + (this.ie && this.doc.compatMode == "BackCompat" && this.outerBorder ? 2 : 0)) + "px";
    this.showContent();
};
LyteBox.prototype.showContent = function() {
    if (this.wDone && this.hDone) {
        for (var i = 0; i < this.showContentTimerCount; i++) { window.clearTimeout(this.showContentTimerArray[i]); }
        if (this.outerBorder) {
            this.doc.getElementById('lbOuterContainer').style.borderBottom = 'none';
        }
        this.doc.getElementById('lbLoading').style.display = 'none';
        if (this.isLyteframe) {
            this.doc.getElementById('lbIframe').style.display = '';
            this.appear('lbIframe', (this.doAnimations ? 0 : 100));
        } else {
            this.doc.getElementById('lbImage').style.display = '';
            this.appear('lbImage', (this.doAnimations ? 0 : 100));
            this.preloadNeighborImages();
        }
        if (this.isSlideshow) {
            if(this.activeSlide == (this.slideArray.length - 1)) {
                if (this.autoEnd) {
                    this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.end('slideshow')", this.slideInterval);
                }
            } else {
                if (!this.isPaused) {
                    this.slideshowIDArray[this.slideshowIDCount++] = setTimeout("myLytebox.changeContent("+(this.activeSlide+1)+")", this.slideInterval);
                }
            }
            this.doc.getElementById('lbHoverNav').style.display = (this.showNavigation && this.navType == 1 ? '' : 'none');
            this.doc.getElementById('lbClose').style.display = (this.showClose ? '' : 'none');
            this.doc.getElementById('lbDetails').style.display = (this.showDetails ? '' : 'none');
            this.doc.getElementById('lbPause').style.display = (this.showPlayPause && !this.isPaused ? '' : 'none');
            this.doc.getElementById('lbPlay').style.display = (this.showPlayPause && !this.isPaused ? 'none' : '');
            this.doc.getElementById('lbNavDisplay').style.display = (this.showNavigation && this.navType == 2 ? '' : 'none');
        } else {
            this.doc.getElementById('lbHoverNav').style.display = (this.navType == 1 && !this.isLyteframe ? '' : 'none');
            if ((this.navType == 2 && !this.isLyteframe && this.imageArray.length > 1) || (this.frameArray.length > 1 && this.isLyteframe)) {
                this.doc.getElementById('lbNavDisplay').style.display = '';
            } else {
                this.doc.getElementById('lbNavDisplay').style.display = 'none';
            }
            this.doc.getElementById('lbClose').style.display = '';
            this.doc.getElementById('lbDetails').style.display = '';
            this.doc.getElementById('lbPause').style.display = 'none';
            this.doc.getElementById('lbPlay').style.display = 'none';
        }
        this.doc.getElementById('lbImageContainer').style.display = (this.isLyteframe ? 'none' : '');
        this.doc.getElementById('lbIframeContainer').style.display = (this.isLyteframe ? '' : 'none');
    } else {
        this.showContentTimerArray[this.showContentTimerCount++] = setTimeout("myLytebox.showContent()", 200);
    }
};
LyteBox.prototype.updateDetails = function() {
    var object = this.doc.getElementById('lbCaption');
    var sTitle = (this.isSlideshow ? this.slideArray[this.activeSlide][1] : (this.isLyteframe ? this.frameArray[this.activeFrame][1] : this.imageArray[this.activeImage][1]));
    object.style.display = '';
    object.innerHTML = (sTitle == null ? '' : sTitle);
    this.updateNav();
    this.doc.getElementById('lbDetailsContainer').style.display = '';
    object = this.doc.getElementById('lbNumberDisplay');
    if (this.isSlideshow && this.slideArray.length > 1) {
        object.style.display = '';
        object.innerHTML = "Image " + eval(this.activeSlide + 1) + " of " + this.slideArray.length;
        this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 && this.showNavigation ? '' : 'none');
    } else if (this.imageArray.length > 1 && !this.isLyteframe) {
        object.style.display = '';
        object.innerHTML = "Image " + eval(this.activeImage + 1) + " of " + this.imageArray.length;
        this.doc.getElementById('lbNavDisplay').style.display = (this.navType == 2 ? '' : 'none');
    } else if (this.frameArray.length > 1 && this.isLyteframe) {
        object.style.display = '';
        object.innerHTML = "Page " + eval(this.activeFrame + 1) + " of " + this.frameArray.length;
        this.doc.getElementById('lbNavDisplay').style.display = '';
    } else {
        this.doc.getElementById('lbNavDisplay').style.display = 'none';
    }
    this.appear('lbDetailsContainer', (this.doAnimations ? 0 : 100));
};
LyteBox.prototype.updateNav = function() {
    if (this.isSlideshow) {
        if (this.activeSlide != 0) {
            var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));
                object.style.display = '';
                object.onclick = function() {
                    if (myLytebox.pauseOnPrevClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
                    myLytebox.changeContent(myLytebox.activeSlide - 1); return false;
                }
        } else {
            if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }
        }
        if (this.activeSlide != (this.slideArray.length - 1)) {
            var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));
                object.style.display = '';
                object.onclick = function() {
                    if (myLytebox.pauseOnNextClick) { myLytebox.togglePlayPause("lbPause", "lbPlay"); }
                    myLytebox.changeContent(myLytebox.activeSlide + 1); return false;
                }
        } else {
            if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }
        }
    } else if (this.isLyteframe) {
        if(this.activeFrame != 0) {
            var object = this.doc.getElementById('lbPrev2');
                object.style.display = '';
                object.onclick = function() {
                    myLytebox.changeContent(myLytebox.activeFrame - 1); return false;
                }
        } else {
            this.doc.getElementById('lbPrev2_Off').style.display = '';
        }
        if(this.activeFrame != (this.frameArray.length - 1)) {
            var object = this.doc.getElementById('lbNext2');
                object.style.display = '';
                object.onclick = function() {
                    myLytebox.changeContent(myLytebox.activeFrame + 1); return false;
                }
        } else {
            this.doc.getElementById('lbNext2_Off').style.display = '';
        }        
    } else {
        if(this.activeImage != 0) {
            var object = (this.navType == 2 ? this.doc.getElementById('lbPrev2') : this.doc.getElementById('lbPrev'));
                object.style.display = '';
                object.onclick = function() {
                    myLytebox.changeContent(myLytebox.activeImage - 1); return false;
                }
        } else {
            if (this.navType == 2) { this.doc.getElementById('lbPrev2_Off').style.display = ''; }
        }
        if(this.activeImage != (this.imageArray.length - 1)) {
            var object = (this.navType == 2 ? this.doc.getElementById('lbNext2') : this.doc.getElementById('lbNext'));
                object.style.display = '';
                object.onclick = function() {
                    myLytebox.changeContent(myLytebox.activeImage + 1); return false;
                }
        } else {
            if (this.navType == 2) { this.doc.getElementById('lbNext2_Off').style.display = ''; }
        }
    }
    this.enableKeyboardNav();
};
LyteBox.prototype.enableKeyboardNav = function() { document.onkeydown = this.keyboardAction; };
LyteBox.prototype.disableKeyboardNav = function() { document.onkeydown = ''; };
LyteBox.prototype.keyboardAction = function(e) {
    var keycode = key = escape = null;
    keycode    = (e == null) ? event.keyCode : e.which;
    key        = String.fromCharCode(keycode).toLowerCase();
    escape  = (e == null) ? 27 : e.DOM_VK_ESCAPE;
    if ((key == 'x') || (key == 'c') || (keycode == escape)) {
        myLytebox.end();
    } else if ((key == 'p') || (keycode == 37)) {
        if (myLytebox.isSlideshow) {
            if(myLytebox.activeSlide != 0) {
                myLytebox.disableKeyboardNav();
                myLytebox.changeContent(myLytebox.activeSlide - 1);
            }
        } else if (myLytebox.isLyteframe) {
            if(myLytebox.activeFrame != 0) {
                myLytebox.disableKeyboardNav();
                myLytebox.changeContent(myLytebox.activeFrame - 1);
            }
        } else {
            if(myLytebox.activeImage != 0) {
                myLytebox.disableKeyboardNav();
                myLytebox.changeContent(myLytebox.activeImage - 1);
            }
        }
    } else if ((key == 'n') || (keycode == 39)) {
        if (myLytebox.isSlideshow) {
            if(myLytebox.activeSlide != (myLytebox.slideArray.length - 1)) {
                myLytebox.disableKeyboardNav();
                myLytebox.changeContent(myLytebox.activeSlide + 1);
            }
        } else if (myLytebox.isLyteframe) {
            if(myLytebox.activeFrame != (myLytebox.frameArray.length - 1)) {
                myLytebox.disableKeyboardNav();
                myLytebox.changeContent(myLytebox.activeFrame + 1);
            }
        } else {
            if(myLytebox.activeImage != (myLytebox.imageArray.length - 1)) {
                myLytebox.disableKeyboardNav();
                myLytebox.changeContent(myLytebox.activeImage + 1);
            }
        }
    }
};
LyteBox.prototype.preloadNeighborImages = function() {
    if (this.isSlideshow) {
        if ((this.slideArray.length - 1) > this.activeSlide) {
            preloadNextImage = new Image();
            preloadNextImage.src = this.slideArray[this.activeSlide + 1][0];
        }
        if(this.activeSlide > 0) {
            preloadPrevImage = new Image();
            preloadPrevImage.src = this.slideArray[this.activeSlide - 1][0];
        }
    } else {
        if ((this.imageArray.length - 1) > this.activeImage) {
            preloadNextImage = new Image();
            preloadNextImage.src = this.imageArray[this.activeImage + 1][0];
        }
        if(this.activeImage > 0) {
            preloadPrevImage = new Image();
            preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];
        }
    }
};
LyteBox.prototype.togglePlayPause = function(hideID, showID) {
    if (this.isSlideshow && hideID == "lbPause") {
        for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
    }
    this.doc.getElementById(hideID).style.display = 'none';
    this.doc.getElementById(showID).style.display = '';
    if (hideID == "lbPlay") {
        this.isPaused = false;
        if (this.activeSlide == (this.slideArray.length - 1)) {
            this.end();
        } else {
            this.changeContent(this.activeSlide + 1);
        }
    } else {
        this.isPaused = true;
    }
};
LyteBox.prototype.end = function(caller) {
    var closeClick = (caller == 'slideshow' ? false : true);
    if (this.isSlideshow && this.isPaused && !closeClick) { return; }
    this.disableKeyboardNav();
    this.doc.getElementById('lbMain').style.display = 'none';
    this.fade('lbOverlay', (this.doAnimations ? this.maxOpacity : 0));
    this.toggleSelects('visible');
    if (this.hideFlash) { this.toggleFlash('visible'); }
    if (this.isSlideshow) {
        for (var i = 0; i < this.slideshowIDCount; i++) { window.clearTimeout(this.slideshowIDArray[i]); }
    }
};
LyteBox.prototype.checkFrame = function() {
    if (window.parent.frames[window.name] && (parent.document.getElementsByTagName('frameset').length <= 0)) {
        this.isFrame = true;
        this.lytebox = "window.parent." + window.name + ".myLytebox";
        this.doc = parent.document;
    } else {
        this.isFrame = false;
        this.lytebox = "myLytebox";
        this.doc = document;
    }
};
LyteBox.prototype.getPixelRate = function(cur, img) {
    var diff = (img > cur) ? img - cur : cur - img;
    if (diff >= 0 && diff <= 100) { return 10; }
    if (diff > 100 && diff <= 200) { return 15; }
    if (diff > 200 && diff <= 300) { return 20; }
    if (diff > 300 && diff <= 400) { return 25; }
    if (diff > 400 && diff <= 500) { return 30; }
    if (diff > 500 && diff <= 600) { return 35; }
    if (diff > 600 && diff <= 700) { return 40; }
    if (diff > 700) { return 45; }
};
LyteBox.prototype.appear = function(id, opacity) {
    var object = this.doc.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + (opacity + 10) + ")";
    if (opacity == 100 && (id == 'lbImage' || id == 'lbIframe')) {
        this.updateDetails();
    } else if (opacity >= this.maxOpacity && id == 'lbOverlay') {
        for (var i = 0; i < this.overlayTimerCount; i++) { window.clearTimeout(this.overlayTimerArray[i]); }
        return;
    } else if (opacity >= 100 && id == 'lbDetailsContainer') {
        for (var i = 0; i < this.imageTimerCount; i++) { window.clearTimeout(this.imageTimerArray[i]); }
        this.doc.getElementById('lbOverlay').style.height = this.getPageSize()[1] + "px";
    } else {
        if (id == 'lbOverlay') {
            this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+20) + ")", 1);
        } else {
            this.imageTimerArray[this.imageTimerCount++] = setTimeout("myLytebox.appear('" + id + "', " + (opacity+10) + ")", 1);
        }
    }
};
LyteBox.prototype.fade = function(id, opacity) {
    var object = this.doc.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
    if (opacity <= 0) {
        try {
            object.display = 'none';
        } catch(err) { }
    } else if (id == 'lbOverlay') {
        this.overlayTimerArray[this.overlayTimerCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-20) + ")", 1);
    } else {
        this.timerIDArray[this.timerIDCount++] = setTimeout("myLytebox.fade('" + id + "', " + (opacity-10) + ")", 1);
    }
};
LyteBox.prototype.resizeW = function(id, curW, maxW, pixelrate, speed) {
    if (!this.hDone) {
        this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + curW + ", " + maxW + ", " + pixelrate + ")", 100);
        return;
    }
    var object = this.doc.getElementById(id);
    var timer = speed ? speed : (this.resizeDuration/2);
    var newW = (this.doAnimations ? curW : maxW);
    object.style.width = (newW) + "px";
    if (newW < maxW) {
        newW += (newW + pixelrate >= maxW) ? (maxW - newW) : pixelrate;
    } else if (newW > maxW) {
        newW -= (newW - pixelrate <= maxW) ? (newW - maxW) : pixelrate;
    }
    this.resizeWTimerArray[this.resizeWTimerCount++] = setTimeout("myLytebox.resizeW('" + id + "', " + newW + ", " + maxW + ", " + pixelrate + ", " + (timer+0.02) + ")", timer+0.02);
    if (parseInt(object.style.width) == maxW) {
        this.wDone = true;
        for (var i = 0; i < this.resizeWTimerCount; i++) { window.clearTimeout(this.resizeWTimerArray[i]); }
    }
};
LyteBox.prototype.resizeH = function(id, curH, maxH, pixelrate, speed) {
    var timer = speed ? speed : (this.resizeDuration/2);
    var object = this.doc.getElementById(id);
    var newH = (this.doAnimations ? curH : maxH);
    object.style.height = (newH) + "px";
    if (newH < maxH) {
        newH += (newH + pixelrate >= maxH) ? (maxH - newH) : pixelrate;
    } else if (newH > maxH) {
        newH -= (newH - pixelrate <= maxH) ? (newH - maxH) : pixelrate;
    }
    this.resizeHTimerArray[this.resizeHTimerCount++] = setTimeout("myLytebox.resizeH('" + id + "', " + newH + ", " + maxH + ", " + pixelrate + ", " + (timer+.02) + ")", timer+.02);
    if (parseInt(object.style.height) == maxH) {
        this.hDone = true;
        for (var i = 0; i < this.resizeHTimerCount; i++) { window.clearTimeout(this.resizeHTimerArray[i]); }
    }
};
LyteBox.prototype.getPageScroll = function() {
    if (self.pageYOffset) {
        return this.isFrame ? parent.pageYOffset : self.pageYOffset;
    } else if (this.doc.documentElement && this.doc.documentElement.scrollTop){
        return this.doc.documentElement.scrollTop;
    } else if (document.body) {
        return this.doc.body.scrollTop;
    }
};
LyteBox.prototype.getPageSize = function() {    
    var xScroll, yScroll, windowWidth, windowHeight;
    if (window.innerHeight && window.scrollMaxY) {
        xScroll = this.doc.scrollWidth;
        yScroll = (this.isFrame ? parent.innerHeight : self.innerHeight) + (this.isFrame ? parent.scrollMaxY : self.scrollMaxY);
    } else if (this.doc.body.scrollHeight > this.doc.body.offsetHeight){
        xScroll = this.doc.body.scrollWidth;
        yScroll = this.doc.body.scrollHeight;
    } else {
        xScroll = this.doc.getElementsByTagName("html").item(0).offsetWidth;
        yScroll = this.doc.getElementsByTagName("html").item(0).offsetHeight;
        xScroll = (xScroll < this.doc.body.offsetWidth) ? this.doc.body.offsetWidth : xScroll;
        yScroll = (yScroll < this.doc.body.offsetHeight) ? this.doc.body.offsetHeight : yScroll;
    }
    if (self.innerHeight) {
        windowWidth = (this.isFrame) ? parent.innerWidth : self.innerWidth;
        windowHeight = (this.isFrame) ? parent.innerHeight : self.innerHeight;
    } else if (document.documentElement && document.documentElement.clientHeight) {
        windowWidth = this.doc.documentElement.clientWidth;
        windowHeight = this.doc.documentElement.clientHeight;
    } else if (document.body) {
        windowWidth = this.doc.getElementsByTagName("html").item(0).clientWidth;
        windowHeight = this.doc.getElementsByTagName("html").item(0).clientHeight;
        windowWidth = (windowWidth == 0) ? this.doc.body.clientWidth : windowWidth;
        windowHeight = (windowHeight == 0) ? this.doc.body.clientHeight : windowHeight;
    }
    var pageHeight = (yScroll < windowHeight) ? windowHeight : yScroll;
    var pageWidth = (xScroll < windowWidth) ? windowWidth : xScroll;
    return new Array(pageWidth, pageHeight, windowWidth, windowHeight);
};
LyteBox.prototype.toggleFlash = function(state) {
    var objects = this.doc.getElementsByTagName("object");
    for (var i = 0; i < objects.length; i++) {
        objects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
    }
    var embeds = this.doc.getElementsByTagName("embed");
    for (var i = 0; i < embeds.length; i++) {
        embeds[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
    }
    if (this.isFrame) {
        for (var i = 0; i < parent.frames.length; i++) {
            try {
                objects = parent.frames[i].window.document.getElementsByTagName("object");
                for (var j = 0; j < objects.length; j++) {
                    objects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
                }
            } catch(e) { }
            try {
                embeds = parent.frames[i].window.document.getElementsByTagName("embed");
                for (var j = 0; j < embeds.length; j++) {
                    embeds[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
                }
            } catch(e) { }
        }
    }
};
LyteBox.prototype.toggleSelects = function(state) {
    var selects = this.doc.getElementsByTagName("select");
    for (var i = 0; i < selects.length; i++ ) {
        selects[i].style.visibility = (state == "hide") ? 'hidden' : 'visible';
    }
    if (this.isFrame) {
        for (var i = 0; i < parent.frames.length; i++) {
            try {
                selects = parent.frames[i].window.document.getElementsByTagName("select");
                for (var j = 0; j < selects.length; j++) {
                    selects[j].style.visibility = (state == "hide") ? 'hidden' : 'visible';
                }
            } catch(e) { }
        }
    }
};
LyteBox.prototype.pause = function(numberMillis) {
    var now = new Date();
    var exitTime = now.getTime() + numberMillis;
    while (true) {
        now = new Date();
        if (now.getTime() > exitTime) { return; }
    }
};
if (window.addEventListener) {
    window.addEventListener("load",initLytebox,false);
} else if (window.attachEvent) {
    window.attachEvent("onload",initLytebox);
} else {
    window.onload = function() {initLytebox();}
}
function initLytebox() { myLytebox = new LyteBox(); }
 
Zuletzt bearbeitet von einem Moderator:

sokie

Mod | Web

AW: lightbox

Da musst du schon einbisschen konkreter werden, was du genau willst.
eine Funktion für die Zählung der Bilder gibt es in dem Sinne nicht.
wenn Bildlinks das attribut rel="lytebox[gruppenname]" bzw "lyteshow[gruppenname]" tragen, erden sie in einem Entsprechenden Array (oder Objekt) gesammelt, und die Anzahl der einzelnen Elemente ergibt praktisch die Zählung.

imWeiteren ist das Script nicht "Lightbox" sondern "LyteBox" (Überschrift entsprechend geändert)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.640
Beiträge
1.538.506
Mitglieder
67.560
Neuestes Mitglied
azmostbethaot
Oben