Auf Thema antworten 2026

Beitrag

<blockquote data-quote="pusher23" data-source="post: 2245779" data-attributes="member: 354333">Hallo,ich habe folgendes Problem:Ich nutze Lightbox 2.04 für eine Bildergalerie mit sehr vielen Fotos.Nun sind es auf manchen Seiten so viele Fotos dass man nach unten scrollen muss.Scrollt man weit nach unten und öffnet ein Foto, so klebt die Lightbox am oberen Rand der Website und ist somit nur mehr teilweise bis garnicht mehr sichtbar.Man muss also extra wieder nach oben scrollen um sich das Bild ansehen zu können, was nicht gerade userfreundlich ist.Hab mit der zugehörigen CSS-Datei und dem Script ein paar diletantische Versuche gewagt, leider ohne Erfolg.Wäre toll wenn mir jemand helfen könnte, ich poste mal den Code:HTML-Page:[CODE]&lt;a rel=&quot;lightbox[popupbox]&quot; href=&quot;../Fotos/001.jpg&quot;&gt;&lt;img style=&quot;border: 0px; padding: 0px;&quot; src=&quot;../Fotos/k/001.jpg&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;[/CODE]CSS:[CODE]#lightbox{&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}#lightbox img{ width: auto; height: auto;}#lightbox a img{ border: none; }#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }#imageContainer{ padding: 10px; }#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }#imageContainer&gt;#hoverNav{ left: 0;}#hoverNav a{ outline: none;}#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }#prevLink { left: 0; float: left;}#nextLink { right: 0; float: right;}#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%&nbsp; &nbsp; ; }#imageData{&nbsp; &nbsp; padding:0 10px; color: #666; }#imageData #imageDetails{ width: 70%; float: left; text-align: left; }&nbsp; &nbsp; #imageData #caption{ font-weight: bold;&nbsp; &nbsp; }#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;&nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #imageData #bottomNavClose{ width: 66px; float: right;&nbsp; padding-bottom: 0.7em; outline: none;}&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }[/CODE]JS:[CODE]// -----------------------------------------------------------------------------------////&nbsp; &nbsp; Lightbox v2.04//&nbsp; &nbsp; by Lokesh Dhakar - http://www.lokeshdhakar.com//&nbsp; &nbsp; Last Modification: 2/9/08////&nbsp; &nbsp; For more information, visit://&nbsp; &nbsp; http://lokeshdhakar.com/projects/lightbox2/////&nbsp; &nbsp; Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5///&nbsp; &nbsp; &nbsp; - Free for use in both personal and commercial projects//&nbsp; &nbsp; &nbsp; &nbsp; - Attribution requires leaving author name, author link, and the license info intact.////&nbsp; Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets.//&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous.//// -----------------------------------------------------------------------------------/*&nbsp; &nbsp; Table of Contents&nbsp; &nbsp; -----------------&nbsp; &nbsp; Configuration&nbsp; &nbsp; Lightbox Class Declaration&nbsp; &nbsp; - initialize()&nbsp; &nbsp; - updateImageList()&nbsp; &nbsp; - start()&nbsp; &nbsp; - changeImage()&nbsp; &nbsp; - resizeImageContainer()&nbsp; &nbsp; - showImage()&nbsp; &nbsp; - updateDetails()&nbsp; &nbsp; - updateNav()&nbsp; &nbsp; - enableKeyboardNav()&nbsp; &nbsp; - disableKeyboardNav()&nbsp; &nbsp; - keyboardAction()&nbsp; &nbsp; - preloadNeighborImages()&nbsp; &nbsp; - end()&nbsp; &nbsp; Function Calls&nbsp; &nbsp; - document.observe()*/// -----------------------------------------------------------------------------------////&nbsp; Configurationl//LightboxOptions = Object.extend({&nbsp; &nbsp; fileLoadingImage:&nbsp; &nbsp; &nbsp; &nbsp; &#039;/fg/images/loading.gif&#039;,&nbsp; &nbsp; fileBottomNavCloseImage: &#039;/fg/images/closelabel.gif&#039;,&nbsp; &nbsp; overlayOpacity: 0.8,&nbsp;&nbsp; // controls transparency of shadow overlay&nbsp; &nbsp; animate: true,&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; // toggles resizing animations&nbsp; &nbsp; resizeSpeed: 7,&nbsp; &nbsp; &nbsp; &nbsp; // controls the speed of the image resizing animations (1=slowest and 10=fastest)&nbsp; &nbsp; borderSize: 10,&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; //if you adjust the padding in the CSS, you will need to update this variable&nbsp; &nbsp; // When grouping images this is used to write: Image # of #.&nbsp; &nbsp; // Change it for non-english localization&nbsp; &nbsp; labelImage: &quot;Image&quot;,&nbsp; &nbsp; labelOf: &quot;of&quot;}, window.LightboxOptions || {});// -----------------------------------------------------------------------------------var Lightbox = Class.create();Lightbox.prototype = {&nbsp; &nbsp; imageArray: [],&nbsp; &nbsp; activeImage: undefined,&nbsp; &nbsp; // initialize()&nbsp; &nbsp; // Constructor runs on completion of the DOM loading. Calls updateImageList and then&nbsp; &nbsp; // the function inserts html at the bottom of the page which is used to display the shadow&nbsp; &nbsp; // overlay and the image container.&nbsp; &nbsp; //&nbsp; &nbsp; initialize: function() {&nbsp; &nbsp; &nbsp; &nbsp; this.updateImageList();&nbsp; &nbsp; &nbsp; &nbsp; this.keyboardAction = this.keyboardAction.bindAsEventListener(this);&nbsp; &nbsp; &nbsp; &nbsp; if (LightboxOptions.resizeSpeed &gt; 10) LightboxOptions.resizeSpeed = 10;&nbsp; &nbsp; &nbsp; &nbsp; if (LightboxOptions.resizeSpeed &lt; 1)&nbsp; LightboxOptions.resizeSpeed = 1;&nbsp; &nbsp; &nbsp; &nbsp; this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0;&nbsp; &nbsp; &nbsp; &nbsp; this.overlayDuration = LightboxOptions.animate ? 0.2 : 0;&nbsp; // shadow fade in/out duration&nbsp; &nbsp; &nbsp; &nbsp; // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.&nbsp; &nbsp; &nbsp; &nbsp; // If animations are turned off, it will be hidden as to prevent a flicker of a&nbsp; &nbsp; &nbsp; &nbsp; // white 250 by 250 box.&nbsp; &nbsp; &nbsp; &nbsp; var size = (LightboxOptions.animate ? 250 : 1) + &#039;px&#039;;&nbsp; &nbsp; &nbsp; &nbsp; // Code inserts html at the bottom of the page that looks similar to this:&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &lt;div id=&quot;overlay&quot;&gt;&lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &lt;div id=&quot;lightbox&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &lt;div id=&quot;outerImageContainer&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;imageContainer&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img id=&quot;lightboxImage&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div style=&quot;&quot; id=&quot;hoverNav&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; id=&quot;prevLink&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; id=&quot;nextLink&quot;&gt;&lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;loading&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; id=&quot;loadingLink&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://www.psd-tutorials.de/forum/images/loading.gif&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &lt;div id=&quot;imageDataContainer&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;imageData&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;imageDetails&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span id=&quot;caption&quot;&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;span id=&quot;numberDisplay&quot;&gt;&lt;/span&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;div id=&quot;bottomNav&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;a href=&quot;#&quot; id=&quot;bottomNavClose&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;img src=&quot;http://www.psd-tutorials.de/forum/images/close.gif&quot;&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/a&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &lt;/div&gt;&nbsp; &nbsp; &nbsp; &nbsp; var objBody = $$(&#039;body&#039;)[0];&nbsp; &nbsp; &nbsp; &nbsp; objBody.appendChild(Builder.node(&#039;div&#039;,{id:&#039;overlay&#039;}));&nbsp; &nbsp; &nbsp; &nbsp; objBody.appendChild(Builder.node(&#039;div&#039;,{id:&#039;lightbox&#039;}, [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;div&#039;,{id:&#039;outerImageContainer&#039;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;div&#039;,{id:&#039;imageContainer&#039;}, [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;img&#039;,{id:&#039;lightboxImage&#039;}),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;div&#039;,{id:&#039;hoverNav&#039;}, [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;a&#039;,{id:&#039;prevLink&#039;, href: &#039;#&#039; }),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;a&#039;,{id:&#039;nextLink&#039;, href: &#039;#&#039; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;div&#039;,{id:&#039;loading&#039;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;a&#039;,{id:&#039;loadingLink&#039;, href: &#039;#&#039; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;img&#039;, {src: LightboxOptions.fileLoadingImage})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;div&#039;, {id:&#039;imageDataContainer&#039;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;div&#039;,{id:&#039;imageData&#039;}, [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;div&#039;,{id:&#039;imageDetails&#039;}, [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;span&#039;,{id:&#039;caption&#039;}),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;span&#039;,{id:&#039;numberDisplay&#039;})&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;div&#039;,{id:&#039;bottomNav&#039;},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;a&#039;,{id:&#039;bottomNavClose&#039;, href: &#039;#&#039; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Builder.node(&#039;img&#039;, { src: LightboxOptions.fileBottomNavCloseImage })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )&nbsp; &nbsp; &nbsp; &nbsp; ]));&nbsp; &nbsp; &nbsp; &nbsp; $(&#039;overlay&#039;).hide().observe(&#039;click&#039;, (function() { this.end(); }).bind(this));&nbsp; &nbsp; &nbsp; &nbsp; $(&#039;lightbox&#039;).hide().observe(&#039;click&#039;, (function(event) { if (event.element().id == &#039;lightbox&#039;) this.end(); }).bind(this));&nbsp; &nbsp; &nbsp; &nbsp; $(&#039;outerImageContainer&#039;).setStyle({ width: size, height: size });&nbsp; &nbsp; &nbsp; &nbsp; $(&#039;prevLink&#039;).observe(&#039;click&#039;, (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this));&nbsp; &nbsp; &nbsp; &nbsp; $(&#039;nextLink&#039;).observe(&#039;click&#039;, (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this));&nbsp; &nbsp; &nbsp; &nbsp; $(&#039;loadingLink&#039;).observe(&#039;click&#039;, (function(event) { event.stop(); this.end(); }).bind(this));&nbsp; &nbsp; &nbsp; &nbsp; $(&#039;bottomNavClose&#039;).observe(&#039;click&#039;, (function(event) { event.stop(); this.end(); }).bind(this));&nbsp; &nbsp; &nbsp; &nbsp; var th = this;&nbsp; &nbsp; &nbsp; &nbsp; (function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var ids =&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink &#039; +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &#039;imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $w(ids).each(function(id){ th[id] = $(id); });&nbsp; &nbsp; &nbsp; &nbsp; }).defer();&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; // updateImageList()&nbsp; &nbsp; // Loops through anchor tags looking for &#039;lightbox&#039; references and applies onclick&nbsp; &nbsp; // events to appropriate links. You can rerun after dynamically adding images w/ajax.&nbsp; &nbsp; //&nbsp; &nbsp; updateImageList: function() {&nbsp; &nbsp; &nbsp; &nbsp; this.updateImageList = Prototype.emptyFunction;&nbsp; &nbsp; &nbsp; &nbsp; document.observe(&#039;click&#039;, (function(event){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var target = event.findElement(&#039;a[rel^=lightbox]&#039;) || event.findElement(&#039;area[rel^=lightbox]&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (target) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; event.stop();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.start(target);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }).bind(this));&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; start()&nbsp; &nbsp; //&nbsp; Display overlay and lightbox. If image is part of a set, add siblings to imageArray.&nbsp; &nbsp; //&nbsp; &nbsp; start: function(imageLink) {&nbsp; &nbsp; &nbsp; &nbsp; $$(&#039;select&#039;, &#039;object&#039;, &#039;embed&#039;).each(function(node){ node.style.visibility = &#039;hidden&#039; });&nbsp; &nbsp; &nbsp; &nbsp; // stretch overlay to fill page and fade in&nbsp; &nbsp; &nbsp; &nbsp; var arrayPageSize = this.getPageSize();&nbsp; &nbsp; &nbsp; &nbsp; $(&#039;overlay&#039;).setStyle({ width: arrayPageSize[0] + &#039;px&#039;, height: arrayPageSize[1] + &#039;px&#039; });&nbsp; &nbsp; &nbsp; &nbsp; new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity });&nbsp; &nbsp; &nbsp; &nbsp; this.imageArray = [];&nbsp; &nbsp; &nbsp; &nbsp; var imageNum = 0;&nbsp; &nbsp; &nbsp; &nbsp; if ((imageLink.rel == &#039;lightbox&#039;)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // if image is NOT part of a set, add single image to imageArray&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.imageArray.push([imageLink.href, imageLink.title]);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // if image is part of a set..&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.imageArray =&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $$(imageLink.tagName + &#039;[href][rel=&quot;&#039; + imageLink.rel + &#039;&quot;]&#039;).&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; collect(function(anchor){ return [anchor.href, anchor.title]; }).&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; uniq();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // calculate top and left offset for the lightbox&nbsp; &nbsp; &nbsp; &nbsp; var arrayPageScroll = document.viewport.getScrollOffsets();&nbsp; &nbsp; &nbsp; &nbsp; var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10);&nbsp; &nbsp; &nbsp; &nbsp; var lightboxLeft = arrayPageScroll[0];&nbsp; &nbsp; &nbsp; &nbsp; this.lightbox.setStyle({ top: lightboxTop + &#039;px&#039;, left: lightboxLeft + &#039;px&#039; }).show();&nbsp; &nbsp; &nbsp; &nbsp; this.changeImage(imageNum);&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; changeImage()&nbsp; &nbsp; //&nbsp; Hide most elements and preload image in preparation for resizing image container.&nbsp; &nbsp; //&nbsp; &nbsp; changeImage: function(imageNum) {&nbsp; &nbsp; &nbsp; &nbsp; this.activeImage = imageNum; // update global var&nbsp; &nbsp; &nbsp; &nbsp; // hide elements during transition&nbsp; &nbsp; &nbsp; &nbsp; if (LightboxOptions.animate) this.loading.show();&nbsp; &nbsp; &nbsp; &nbsp; this.lightboxImage.hide();&nbsp; &nbsp; &nbsp; &nbsp; this.hoverNav.hide();&nbsp; &nbsp; &nbsp; &nbsp; this.prevLink.hide();&nbsp; &nbsp; &nbsp; &nbsp; this.nextLink.hide();&nbsp; &nbsp; &nbsp; &nbsp; // HACK: Opera9 does not currently support scriptaculous opacity and appear fx&nbsp; &nbsp; &nbsp; &nbsp; this.imageDataContainer.setStyle({opacity: .0001});&nbsp; &nbsp; &nbsp; &nbsp; this.numberDisplay.hide();&nbsp; &nbsp; &nbsp; &nbsp; var imgPreloader = new Image();&nbsp; &nbsp; &nbsp; &nbsp; // once image is preloaded, resize image container&nbsp; &nbsp; &nbsp; &nbsp; imgPreloader.onload = (function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.lightboxImage.src = this.imageArray[this.activeImage][0];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.resizeImageContainer(imgPreloader.width, imgPreloader.height);&nbsp; &nbsp; &nbsp; &nbsp; }).bind(this);&nbsp; &nbsp; &nbsp; &nbsp; imgPreloader.src = this.imageArray[this.activeImage][0];&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; resizeImageContainer()&nbsp; &nbsp; //&nbsp; &nbsp; resizeImageContainer: function(imgWidth, imgHeight) {&nbsp; &nbsp; &nbsp; &nbsp; // get current width and height&nbsp; &nbsp; &nbsp; &nbsp; var widthCurrent&nbsp; = this.outerImageContainer.getWidth();&nbsp; &nbsp; &nbsp; &nbsp; var heightCurrent = this.outerImageContainer.getHeight();&nbsp; &nbsp; &nbsp; &nbsp; // get new width and height&nbsp; &nbsp; &nbsp; &nbsp; var widthNew&nbsp; = (imgWidth&nbsp; + LightboxOptions.borderSize * 2);&nbsp; &nbsp; &nbsp; &nbsp; var heightNew = (imgHeight + LightboxOptions.borderSize * 2);&nbsp; &nbsp; &nbsp; &nbsp; // scalars based on change from old to new&nbsp; &nbsp; &nbsp; &nbsp; var xScale = (widthNew&nbsp; / widthCurrent)&nbsp; * 100;&nbsp; &nbsp; &nbsp; &nbsp; var yScale = (heightNew / heightCurrent) * 100;&nbsp; &nbsp; &nbsp; &nbsp; // calculate size difference between new and old image, and resize if necessary&nbsp; &nbsp; &nbsp; &nbsp; var wDiff = widthCurrent - widthNew;&nbsp; &nbsp; &nbsp; &nbsp; var hDiff = heightCurrent - heightNew;&nbsp; &nbsp; &nbsp; &nbsp; if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: &#039;front&#039;});&nbsp; &nbsp; &nbsp; &nbsp; if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration});&nbsp; &nbsp; &nbsp; &nbsp; // if new and old image are same size and no scaling transition is necessary,&nbsp; &nbsp; &nbsp; &nbsp; // do a quick pause to prevent image flicker.&nbsp; &nbsp; &nbsp; &nbsp; var timeout = 0;&nbsp; &nbsp; &nbsp; &nbsp; if ((hDiff == 0) &amp;&amp; (wDiff == 0)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; timeout = 100;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (Prototype.Browser.IE) timeout = 250;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; (function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.prevLink.setStyle({ height: imgHeight + &#039;px&#039; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.nextLink.setStyle({ height: imgHeight + &#039;px&#039; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.imageDataContainer.setStyle({ width: widthNew + &#039;px&#039; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.showImage();&nbsp; &nbsp; &nbsp; &nbsp; }).bind(this).delay(timeout / 1000);&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; showImage()&nbsp; &nbsp; //&nbsp; Display image and begin preloading neighbors.&nbsp; &nbsp; //&nbsp; &nbsp; showImage: function(){&nbsp; &nbsp; &nbsp; &nbsp; this.loading.hide();&nbsp; &nbsp; &nbsp; &nbsp; new Effect.Appear(this.lightboxImage, {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: this.resizeDuration,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; queue: &#039;end&#039;,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; afterFinish: (function(){ this.updateDetails(); }).bind(this)&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; this.preloadNeighborImages();&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; updateDetails()&nbsp; &nbsp; //&nbsp; Display caption, image number, and bottom nav.&nbsp; &nbsp; //&nbsp; &nbsp; updateDetails: function() {&nbsp; &nbsp; &nbsp; &nbsp; // if caption is not null&nbsp; &nbsp; &nbsp; &nbsp; if (this.imageArray[this.activeImage][1] != &quot;&quot;){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.caption.update(this.imageArray[this.activeImage][1]).show();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // if image is part of set display &#039;Image x of x&#039;&nbsp; &nbsp; &nbsp; &nbsp; if (this.imageArray.length &gt; 1){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.numberDisplay.update( LightboxOptions.labelImage + &#039; &#039; + (this.activeImage + 1) + &#039; &#039; + LightboxOptions.labelOf + &#039;&nbsp; &#039; + this.imageArray.length).show();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; new Effect.Parallel(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; duration: this.resizeDuration,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; afterFinish: (function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // update overlay size and update nav&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var arrayPageSize = this.getPageSize();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.overlay.setStyle({ height: arrayPageSize[1] + &#039;px&#039; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.updateNav();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }).bind(this)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; );&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; updateNav()&nbsp; &nbsp; //&nbsp; Display appropriate previous and next hover navigation.&nbsp; &nbsp; //&nbsp; &nbsp; updateNav: function() {&nbsp; &nbsp; &nbsp; &nbsp; this.hoverNav.show();&nbsp; &nbsp; &nbsp; &nbsp; // if not first image in set, display prev image button&nbsp; &nbsp; &nbsp; &nbsp; if (this.activeImage &gt; 0) this.prevLink.show();&nbsp; &nbsp; &nbsp; &nbsp; // if not last image in set, display next image button&nbsp; &nbsp; &nbsp; &nbsp; if (this.activeImage &lt; (this.imageArray.length - 1)) this.nextLink.show();&nbsp; &nbsp; &nbsp; &nbsp; this.enableKeyboardNav();&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; enableKeyboardNav()&nbsp; &nbsp; //&nbsp; &nbsp; enableKeyboardNav: function() {&nbsp; &nbsp; &nbsp; &nbsp; document.observe(&#039;keydown&#039;, this.keyboardAction);&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; disableKeyboardNav()&nbsp; &nbsp; //&nbsp; &nbsp; disableKeyboardNav: function() {&nbsp; &nbsp; &nbsp; &nbsp; document.stopObserving(&#039;keydown&#039;, this.keyboardAction);&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; keyboardAction()&nbsp; &nbsp; //&nbsp; &nbsp; keyboardAction: function(event) {&nbsp; &nbsp; &nbsp; &nbsp; var keycode = event.keyCode;&nbsp; &nbsp; &nbsp; &nbsp; var escapeKey;&nbsp; &nbsp; &nbsp; &nbsp; if (event.DOM_VK_ESCAPE) {&nbsp; // mozilla&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; escapeKey = event.DOM_VK_ESCAPE;&nbsp; &nbsp; &nbsp; &nbsp; } else { // ie&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; escapeKey = 27;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; var key = String.fromCharCode(keycode).toLowerCase();&nbsp; &nbsp; &nbsp; &nbsp; if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.end();&nbsp; &nbsp; &nbsp; &nbsp; } else if ((key == &#039;p&#039;) || (keycode == 37)){ // display previous image&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (this.activeImage != 0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.disableKeyboardNav();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.changeImage(this.activeImage - 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } else if ((key == &#039;n&#039;) || (keycode == 39)){ // display next image&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (this.activeImage != (this.imageArray.length - 1)){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.disableKeyboardNav();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.changeImage(this.activeImage + 1);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; preloadNeighborImages()&nbsp; &nbsp; //&nbsp; Preload previous and next images.&nbsp; &nbsp; //&nbsp; &nbsp; preloadNeighborImages: function(){&nbsp; &nbsp; &nbsp; &nbsp; var preloadNextImage, preloadPrevImage;&nbsp; &nbsp; &nbsp; &nbsp; if (this.imageArray.length &gt; this.activeImage + 1){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; preloadNextImage = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; preloadNextImage.src = this.imageArray[this.activeImage + 1][0];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; if (this.activeImage &gt; 0){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; preloadPrevImage = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; preloadPrevImage.src = this.imageArray[this.activeImage - 1][0];&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; end()&nbsp; &nbsp; //&nbsp; &nbsp; end: function() {&nbsp; &nbsp; &nbsp; &nbsp; this.disableKeyboardNav();&nbsp; &nbsp; &nbsp; &nbsp; this.lightbox.hide();&nbsp; &nbsp; &nbsp; &nbsp; new Effect.Fade(this.overlay, { duration: this.overlayDuration });&nbsp; &nbsp; &nbsp; &nbsp; $$(&#039;select&#039;, &#039;object&#039;, &#039;embed&#039;).each(function(node){ node.style.visibility = &#039;visible&#039; });&nbsp; &nbsp; },&nbsp; &nbsp; //&nbsp; &nbsp; //&nbsp; getPageSize()&nbsp; &nbsp; //&nbsp; &nbsp; getPageSize: function() {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; var xScroll, yScroll;&nbsp; &nbsp; &nbsp; &nbsp; if (window.innerHeight &amp;&amp; window.scrollMaxY) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xScroll = window.innerWidth + window.scrollMaxX;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yScroll = window.innerHeight + window.scrollMaxY;&nbsp; &nbsp; &nbsp; &nbsp; } else if (document.body.scrollHeight &gt; document.body.offsetHeight){ // all but Explorer Mac&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xScroll = document.body.scrollWidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yScroll = document.body.scrollHeight;&nbsp; &nbsp; &nbsp; &nbsp; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xScroll = document.body.offsetWidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; yScroll = document.body.offsetHeight;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; var windowWidth, windowHeight;&nbsp; &nbsp; &nbsp; &nbsp; if (self.innerHeight) {&nbsp; &nbsp; // all except Explorer&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(document.documentElement.clientWidth){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; windowWidth = document.documentElement.clientWidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; windowWidth = self.innerWidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; windowHeight = self.innerHeight;&nbsp; &nbsp; &nbsp; &nbsp; } else if (document.documentElement &amp;&amp; document.documentElement.clientHeight) { // Explorer 6 Strict Mode&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; windowWidth = document.documentElement.clientWidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; windowHeight = document.documentElement.clientHeight;&nbsp; &nbsp; &nbsp; &nbsp; } else if (document.body) { // other Explorers&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; windowWidth = document.body.clientWidth;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; windowHeight = document.body.clientHeight;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // for small pages with total height less then height of the viewport&nbsp; &nbsp; &nbsp; &nbsp; if(yScroll &lt; windowHeight){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageHeight = windowHeight;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageHeight = yScroll;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // for small pages with total width less then width of the viewport&nbsp; &nbsp; &nbsp; &nbsp; if(xScroll &lt; windowWidth){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageWidth = xScroll;&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pageWidth = windowWidth;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; return [pageWidth,pageHeight];&nbsp; &nbsp; }}document.observe(&#039;dom:loaded&#039;, function () { new Lightbox(); });[/CODE]Vielen Dank undschöne GrüßeEDIT: Ich habe das Thema bewusst im &quot;PHP and andere Scriptsprachen&quot;-Bereich erstellt, da ich denke es handelt sich um ein Scriptproblem und ich hier somit am Besten aufgehoben bin. Sollte ich dennoch irren, bitte verschieben.</blockquote>

[QUOTE="pusher23, post: 2245779, member: 354333"] Hallo, ich habe folgendes Problem: Ich nutze Lightbox 2.04 für eine Bildergalerie mit sehr vielen Fotos. Nun sind es auf manchen Seiten so viele Fotos dass man nach unten scrollen muss. Scrollt man weit nach unten und öffnet ein Foto, so klebt die Lightbox am oberen Rand der Website und ist somit nur mehr teilweise bis garnicht mehr sichtbar. Man muss also extra wieder nach oben scrollen um sich das Bild ansehen zu können, was nicht gerade userfreundlich ist. Hab mit der zugehörigen CSS-Datei und dem Script ein paar diletantische Versuche gewagt, leider ohne Erfolg. Wäre toll wenn mir jemand helfen könnte, ich poste mal den Code: HTML-Page: [CODE] <a rel="lightbox[popupbox]" href="../Fotos/001.jpg"><img style="border: 0px; padding: 0px;" src="../Fotos/k/001.jpg" border="0" alt="" /></a> [/CODE]CSS: [CODE] #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } [/CODE]JS: [CODE] // ----------------------------------------------------------------------------------- // // Lightbox v2.04 // by Lokesh Dhakar - http://www.lokeshdhakar.com // Last Modification: 2/9/08 // // For more information, visit: // http://lokeshdhakar.com/projects/lightbox2/ // // Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ // - Free for use in both personal and commercial projects // - Attribution requires leaving author name, author link, and the license info intact. // // Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets. // Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous. // // ----------------------------------------------------------------------------------- /* Table of Contents ----------------- Configuration Lightbox Class Declaration - initialize() - updateImageList() - start() - changeImage() - resizeImageContainer() - showImage() - updateDetails() - updateNav() - enableKeyboardNav() - disableKeyboardNav() - keyboardAction() - preloadNeighborImages() - end() Function Calls - document.observe() */ // ----------------------------------------------------------------------------------- // // Configurationl // LightboxOptions = Object.extend({ fileLoadingImage: '/fg/images/loading.gif', fileBottomNavCloseImage: '/fg/images/closelabel.gif', overlayOpacity: 0.8, // controls transparency of shadow overlay animate: true, // toggles resizing animations resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest) borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable // When grouping images this is used to write: Image # of #. // Change it for non-english localization labelImage: "Image", labelOf: "of" }, window.LightboxOptions || {}); // ----------------------------------------------------------------------------------- var Lightbox = Class.create(); Lightbox.prototype = { imageArray: [], activeImage: undefined, // initialize() // Constructor runs on completion of the DOM loading. Calls updateImageList and then // the function inserts html at the bottom of the page which is used to display the shadow // overlay and the image container. // initialize: function() { this.updateImageList(); this.keyboardAction = this.keyboardAction.bindAsEventListener(this); if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10; if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1; this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0; this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension. // If animations are turned off, it will be hidden as to prevent a flicker of a // white 250 by 250 box. var size = (LightboxOptions.animate ? 250 : 1) + 'px'; // Code inserts html at the bottom of the page that looks similar to this: // // <div id="overlay"></div> // <div id="lightbox"> // <div id="outerImageContainer"> // <div id="imageContainer"> // <img id="lightboxImage"> // <div style="" id="hoverNav"> // <a href="#" id="prevLink"></a> // <a href="#" id="nextLink"></a> // </div> // <div id="loading"> // <a href="#" id="loadingLink"> // <img src="http://www.psd-tutorials.de/forum/images/loading.gif"> // </a> // </div> // </div> // </div> // <div id="imageDataContainer"> // <div id="imageData"> // <div id="imageDetails"> // // // </div> // <div id="bottomNav"> // <a href="#" id="bottomNavClose"> // <img src="http://www.psd-tutorials.de/forum/images/close.gif"> // </a> // </div> // </div> // </div> // </div> var objBody = $$('body')[0]; objBody.appendChild(Builder.node('div',{id:'overlay'})); objBody.appendChild(Builder.node('div',{id:'lightbox'}, [ Builder.node('div',{id:'outerImageContainer'}, Builder.node('div',{id:'imageContainer'}, [ Builder.node('img',{id:'lightboxImage'}), Builder.node('div',{id:'hoverNav'}, [ Builder.node('a',{id:'prevLink', href: '#' }), Builder.node('a',{id:'nextLink', href: '#' }) ]), Builder.node('div',{id:'loading'}, Builder.node('a',{id:'loadingLink', href: '#' }, Builder.node('img', {src: LightboxOptions.fileLoadingImage}) ) ) ]) ), Builder.node('div', {id:'imageDataContainer'}, Builder.node('div',{id:'imageData'}, [ Builder.node('div',{id:'imageDetails'}, [ Builder.node('span',{id:'caption'}), Builder.node('span',{id:'numberDisplay'}) ]), Builder.node('div',{id:'bottomNav'}, Builder.node('a',{id:'bottomNavClose', href: '#' }, Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage }) ) ) ]) ) ])); $('overlay').hide().observe('click', (function() { this.end(); }).bind(this)); $('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this)); $('outerImageContainer').setStyle({ width: size, height: size }); $('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this)); $('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this)); $('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); $('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); var th = this; (function(){ var ids = 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose'; $w(ids).each(function(id){ th[id] = $(id); }); }).defer(); }, // // updateImageList() // Loops through anchor tags looking for 'lightbox' references and applies onclick // events to appropriate links. You can rerun after dynamically adding images w/ajax. // updateImageList: function() { this.updateImageList = Prototype.emptyFunction; document.observe('click', (function(event){ var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]'); if (target) { event.stop(); this.start(target); } }).bind(this)); }, // // start() // Display overlay and lightbox. If image is part of a set, add siblings to imageArray. // start: function(imageLink) { $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' }); // stretch overlay to fill page and fade in var arrayPageSize = this.getPageSize(); $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }); new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity }); this.imageArray = []; var imageNum = 0; if ((imageLink.rel == 'lightbox')){ // if image is NOT part of a set, add single image to imageArray this.imageArray.push([imageLink.href, imageLink.title]); } else { // if image is part of a set.. this.imageArray = $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]'). collect(function(anchor){ return [anchor.href, anchor.title]; }). uniq(); while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; } } // calculate top and left offset for the lightbox var arrayPageScroll = document.viewport.getScrollOffsets(); var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10); var lightboxLeft = arrayPageScroll[0]; this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show(); this.changeImage(imageNum); }, // // changeImage() // Hide most elements and preload image in preparation for resizing image container. // changeImage: function(imageNum) { this.activeImage = imageNum; // update global var // hide elements during transition if (LightboxOptions.animate) this.loading.show(); this.lightboxImage.hide(); this.hoverNav.hide(); this.prevLink.hide(); this.nextLink.hide(); // HACK: Opera9 does not currently support scriptaculous opacity and appear fx this.imageDataContainer.setStyle({opacity: .0001}); this.numberDisplay.hide(); var imgPreloader = new Image(); // once image is preloaded, resize image container imgPreloader.onload = (function(){ this.lightboxImage.src = this.imageArray[this.activeImage][0]; this.resizeImageContainer(imgPreloader.width, imgPreloader.height); }).bind(this); imgPreloader.src = this.imageArray[this.activeImage][0]; }, // // resizeImageContainer() // resizeImageContainer: function(imgWidth, imgHeight) { // get current width and height var widthCurrent = this.outerImageContainer.getWidth(); var heightCurrent = this.outerImageContainer.getHeight(); // get new width and height var widthNew = (imgWidth + LightboxOptions.borderSize * 2); var heightNew = (imgHeight + LightboxOptions.borderSize * 2); // scalars based on change from old to new var xScale = (widthNew / widthCurrent) * 100; var yScale = (heightNew / heightCurrent) * 100; // calculate size difference between new and old image, and resize if necessary var wDiff = widthCurrent - widthNew; var hDiff = heightCurrent - heightNew; if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'}); if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration}); // if new and old image are same size and no scaling transition is necessary, // do a quick pause to prevent image flicker. var timeout = 0; if ((hDiff == 0) && (wDiff == 0)){ timeout = 100; if (Prototype.Browser.IE) timeout = 250; } (function(){ this.prevLink.setStyle({ height: imgHeight + 'px' }); this.nextLink.setStyle({ height: imgHeight + 'px' }); this.imageDataContainer.setStyle({ width: widthNew + 'px' }); this.showImage(); }).bind(this).delay(timeout / 1000); }, // // showImage() // Display image and begin preloading neighbors. // showImage: function(){ this.loading.hide(); new Effect.Appear(this.lightboxImage, { duration: this.resizeDuration, queue: 'end', afterFinish: (function(){ this.updateDetails(); }).bind(this) }); this.preloadNeighborImages(); }, // // updateDetails() // Display caption, image number, and bottom nav. // updateDetails: function() { // if caption is not null if (this.imageArray[this.activeImage][1] != ""){ this.caption.update(this.imageArray[this.activeImage][1]).show(); } // if image is part of set display 'Image x of x' if (this.imageArray.length > 1){ this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show(); } new Effect.Parallel( [ new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }), new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration }) ], { duration: this.resizeDuration, afterFinish: (function() { // update overlay size and update nav var arrayPageSize = this.getPageSize(); this.overlay.setStyle({ height: arrayPageSize[1] + 'px' }); this.updateNav(); }).bind(this) } ); }, // // updateNav() // Display appropriate previous and next hover navigation. // updateNav: function() { this.hoverNav.show(); // if not first image in set, display prev image button if (this.activeImage > 0) this.prevLink.show(); // if not last image in set, display next image button if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show(); this.enableKeyboardNav(); }, // // enableKeyboardNav() // enableKeyboardNav: function() { document.observe('keydown', this.keyboardAction); }, // // disableKeyboardNav() // disableKeyboardNav: function() { document.stopObserving('keydown', this.keyboardAction); }, // // keyboardAction() // keyboardAction: function(event) { var keycode = event.keyCode; var escapeKey; if (event.DOM_VK_ESCAPE) { // mozilla escapeKey = event.DOM_VK_ESCAPE; } else { // ie escapeKey = 27; } var key = String.fromCharCode(keycode).toLowerCase(); if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox this.end(); } else if ((key == 'p') || (keycode == 37)){ // display previous image if (this.activeImage != 0){ this.disableKeyboardNav(); this.changeImage(this.activeImage - 1); } } else if ((key == 'n') || (keycode == 39)){ // display next image if (this.activeImage != (this.imageArray.length - 1)){ this.disableKeyboardNav(); this.changeImage(this.activeImage + 1); } } }, // // preloadNeighborImages() // Preload previous and next images. // preloadNeighborImages: function(){ var preloadNextImage, preloadPrevImage; if (this.imageArray.length > this.activeImage + 1){ 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]; } }, // // end() // end: function() { this.disableKeyboardNav(); this.lightbox.hide(); new Effect.Fade(this.overlay, { duration: this.overlayDuration }); $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' }); }, // // getPageSize() // getPageSize: function() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = window.innerWidth + window.scrollMaxX; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer if(document.documentElement.clientWidth){ windowWidth = document.documentElement.clientWidth; } else { windowWidth = self.innerWidth; } windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = xScroll; } else { pageWidth = windowWidth; } return [pageWidth,pageHeight]; } } document.observe('dom:loaded', function () { new Lightbox(); }); [/CODE]Vielen Dank und schöne Grüße EDIT: Ich habe das Thema bewusst im "PHP and andere Scriptsprachen"-Bereich erstellt, da ich denke es handelt sich um ein Scriptproblem und ich hier somit am Besten aufgehoben bin. Sollte ich dennoch irren, bitte verschieben. [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?