1. #1
    Lieutenant
    Dabei seit
    Feb 2007
    Beiträge
    573

    [CSS] Lightbox - Bildergröße - javascript css

    Hallo!

    Ich habe mir eine Bildergalerie mit Lighbox 2 gemacht. Nur das Problem ist, das er mir die Bilder viel zu groß anzeigt. So das ich mal ans andere Ende scrollen darf um die andere seite zu sehen. Kann mir jemand Helfen wo ich die Bildergröße einstellen kann?

    thanks

    Meine Lighbox.css sieht so aus

    Code:
    #lightbox{
    	position: absolute;
    	top: 40px;
    	left: 0;
    	width: 100%;
    	z-index: 100;
    	text-align: center;
    	line-height: 0;
    	}
    
    #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: transparent url(blank.gif) no-repeat; /* Trick IE into showing hover */
    	display: block;
    	}
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(system/extern/lightbox2.02/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(system/extern/lightbox2.02/nextlabel.gif) right 15% no-repeat; }
    
    
    #imageDataContainer{
    	font: 10px Verdana, Helvetica, sans-serif;
    	background-color: #fff;
    	margin: 0 auto;
    	line-height: 1.4em;
    	}
    
    #imageData{
    	padding:0 10px;
    	}
    #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;	}	
    		
    #overlay{
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 90;
    	width: 100%;
    	height: 500px;
    	background-color: #000;
    	filter:alpha(opacity=60);
    	-moz-opacity: 0.6;
    	opacity: 0.6;
    	}
    	
    
    .clearfix:after {
    	content: "."; 
    	display: block; 
    	height: 0; 
    	clear: both; 
    	visibility: hidden;
    	}
    
    * html>body .clearfix {
    	display: inline-block; 
    	width: 100%;
    	}
    
    * html .clearfix {
    	/* Hides from IE-mac \*/
    	height: 1%;
    	/* End hide from IE-mac */
    	}
    Geändert von niz (13.08.2008 um 10:26 Uhr) Grund: [code] gesetzt

  2. Anzeige
    Logge dich ein, um diese Anzeige nicht zu sehen.
  3. #2
    Lieutenant
    Ersteller dieses Themas

    Dabei seit
    Feb 2007
    Beiträge
    573

    [CSS] AW: Lightbox - Bildergröße - javascript css

    und meine lightbox.js

    Code:
    // -----------------------------------------------------------------------------------
    //
    //	Lightbox v2.02
    //	by Lokesh Dhakar - [url]http://www.huddletogether.com[/url]
    //	3/31/06
    //
    //	For more information on this script, visit:
    //	[url]http://huddletogether.com/projects/lightbox2/[/url]
    //
    //	Licensed under the Creative Commons Attribution 2.5 License - [url]http://creativecommons.org/licenses/by/2.5/[/url]
    //	
    //	Credit also due to those who have helped, inspired, and made their code available to the public.
    //	Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.org), Thomas Fuchs(mir.aculo.us), and others.
    //
    //
    // -----------------------------------------------------------------------------------
    /*
    
    	Table of Contents
    	-----------------
    	Configuration
    	Global Variables
    
    	Extending Built-in Objects	
    	- Object.extend(Element)
    	- Array.prototype.removeDuplicates()
    	- Array.prototype.empty()
    
    	Lightbox Class Declaration
    	- initialize()
    	- start()
    	- changeImage()
    	- resizeImageContainer()
    	- showImage()
    	- updateDetails()
    	- updateNav()
    	- enableKeyboardNav()
    	- disableKeyboardNav()
    	- keyboardAction()
    	- preloadNeighborImages()
    	- end()
    	
    	Miscellaneous Functions
    	- getPageScroll()
    	- getPageSize()
    	- getKey()
    	- listenKey()
    	- showSelectBoxes()
    	- hideSelectBoxes()
    	- pause()
    	- initLightbox()
    	
    	Function Calls
    	- addLoadEvent(initLightbox)
    	
    */
    // -----------------------------------------------------------------------------------
    
    //
    //	Configuration
    //
    var fileLoadingImage = "system/extern/lightbox2.02/loading.gif";		
    var fileBottomNavCloseImage = "system/extern/lightbox2.02/closelabel.gif";
    
    var resizeSpeed = 7;	// controls the speed of the image resizing (1=slowest and 10=fastest)
    
    var borderSize = 10;	//if you adjust the padding in the CSS, you will need to update this variable
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Global Variables
    //
    var imageArray = new Array;
    var activeImage;
    
    if(resizeSpeed > 10){ resizeSpeed = 10;}
    if(resizeSpeed < 1){ resizeSpeed = 1;}
    resizeDuration = (11 - resizeSpeed) * 0.15;
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Additional methods for Element added by SU, Couloir
    //	- further additions by Lokesh Dhakar (huddletogether.com)
    //
    Object.extend(Element, {
    	getWidth: function(element) {
    	   	element = $(element);
    	   	return element.offsetWidth; 
    	},
    	setWidth: function(element,w) {
    	   	element = $(element);
        	element.style.width = w +"px";
    	},
    	setHeight: function(element,h) {
       		element = $(element);
        	element.style.height = h +"px";
    	},
    	setTop: function(element,t) {
    	   	element = $(element);
        	element.style.top = t +"px";
    	},
    	setSrc: function(element,src) {
        	element = $(element);
        	element.src = src; 
    	},
    	setHref: function(element,href) {
        	element = $(element);
        	element.href = href; 
    	},
    	setInnerHTML: function(element,content) {
    		element = $(element);
    		element.innerHTML = content;
    	}
    });
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Extending built-in Array object
    //	- array.removeDuplicates()
    //	- array.empty()
    //
    Array.prototype.removeDuplicates = function () {
    	for(i = 1; i < this.length; i++){
    		if(this[i][0] == this[i-1][0]){
    			this.splice(i,1);
    		}
    	}
    }
    
    // -----------------------------------------------------------------------------------
    
    Array.prototype.empty = function () {
    	for(i = 0; i <= this.length; i++){
    		this.shift();
    	}
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Lightbox Class Declaration
    //	- initialize()
    //	- start()
    //	- changeImage()
    //	- resizeImageContainer()
    //	- showImage()
    //	- updateDetails()
    //	- updateNav()
    //	- enableKeyboardNav()
    //	- disableKeyboardNav()
    //	- keyboardNavAction()
    //	- preloadNeighborImages()
    //	- end()
    //
    //	Structuring of code inspired by Scott Upton ([url]http://www.uptonic.com/[/url])
    //
    var Lightbox = Class.create();
    
    Lightbox.prototype = {
    	
    	// initialize()
    	// Constructor runs on completion of the DOM loading. Loops through anchor tags looking for 
    	// 'lightbox' references and applies onclick events to appropriate links. The 2nd section of
    	// the function inserts html at the bottom of the page which is used to display the shadow 
    	// overlay and the image container.
    	//
    	initialize: function() {	
    		if (!document.getElementsByTagName){ return; }
    		var anchors = document.getElementsByTagName('a');
    
    		// loop through all anchor tags
    		for (var i=0; i<anchors.length; i++){
    			var anchor = anchors[i];
    			
    			var relAttribute = String(anchor.getAttribute('rel'));
    			
    			// use the string.match() method to catch 'lightbox' references in the rel attribute
    			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    				anchor.onclick = function () {myLightbox.start(this); return false;}
    			}
    		}
    
    		// The rest of this 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="system/extern/lightbox2.02/loading.gif">
    		//					</a>
    		//				</div>
    		//			</div>
    		//		</div>
    		//		<div id="imageDataContainer">
    		//			<div id="imageData">
    		//				<div id="imageDetails">
    		//					<span id="caption"></span>
    		//					<span id="numberDisplay"></span>
    		//				</div>
    		//				<div id="bottomNav">
    		//					<a href="#" id="bottomNavClose">
    		//						<img src="system/extern/lightbox2.02/close.gif">
    		//					</a>
    		//				</div>
    		//			</div>
    		//		</div>
    		//	</div>
    
    
    		var objBody = document.getElementsByTagName("body").item(0);
    		
    		var objOverlay = document.createElement("div");
    		objOverlay.setAttribute('id','overlay');
    		objOverlay.style.display = 'none';
    		objOverlay.onclick = function() { myLightbox.end(); return false; }
    		objBody.appendChild(objOverlay);
    		
    		var objLightbox = document.createElement("div");
    		objLightbox.setAttribute('id','lightbox');
    		objLightbox.style.display = 'none';
    		objBody.appendChild(objLightbox);
    	
    		var objOuterImageContainer = document.createElement("div");
    		objOuterImageContainer.setAttribute('id','outerImageContainer');
    		objLightbox.appendChild(objOuterImageContainer);
    
    		var objImageContainer = document.createElement("div");
    		objImageContainer.setAttribute('id','imageContainer');
    		objOuterImageContainer.appendChild(objImageContainer);
    	
    		var objLightboxImage = document.createElement("img");
    		objLightboxImage.setAttribute('id','lightboxImage');
    		objImageContainer.appendChild(objLightboxImage);
    	
    		var objHoverNav = document.createElement("div");
    		objHoverNav.setAttribute('id','hoverNav');
    		objImageContainer.appendChild(objHoverNav);
    	
    		var objPrevLink = document.createElement("a");
    		objPrevLink.setAttribute('id','prevLink');
    		objPrevLink.setAttribute('href','#');
    		objHoverNav.appendChild(objPrevLink);
    		
    		var objNextLink = document.createElement("a");
    		objNextLink.setAttribute('id','nextLink');
    		objNextLink.setAttribute('href','#');
    		objHoverNav.appendChild(objNextLink);
    	
    		var objLoading = document.createElement("div");
    		objLoading.setAttribute('id','loading');
    		objImageContainer.appendChild(objLoading);
    	
    		var objLoadingLink = document.createElement("a");
    		objLoadingLink.setAttribute('id','loadingLink');
    		objLoadingLink.setAttribute('href','#');
    		objLoadingLink.onclick = function() { myLightbox.end(); return false; }
    		objLoading.appendChild(objLoadingLink);
    	
    		var objLoadingImage = document.createElement("img");
    		objLoadingImage.setAttribute('src', fileLoadingImage);
    		objLoadingLink.appendChild(objLoadingImage);
    
    		var objImageDataContainer = document.createElement("div");
    		objImageDataContainer.setAttribute('id','imageDataContainer');
    		objImageDataContainer.className = 'clearfix';
    		objLightbox.appendChild(objImageDataContainer);
    
    		var objImageData = document.createElement("div");
    		objImageData.setAttribute('id','imageData');
    		objImageDataContainer.appendChild(objImageData);
    	
    		var objImageDetails = document.createElement("div");
    		objImageDetails.setAttribute('id','imageDetails');
    		objImageData.appendChild(objImageDetails);
    	
    		var objCaption = document.createElement("span");
    		objCaption.setAttribute('id','caption');
    		objImageDetails.appendChild(objCaption);
    	
    		var objNumberDisplay = document.createElement("span");
    		objNumberDisplay.setAttribute('id','numberDisplay');
    		objImageDetails.appendChild(objNumberDisplay);
    		
    		var objBottomNav = document.createElement("div");
    		objBottomNav.setAttribute('id','bottomNav');
    		objImageData.appendChild(objBottomNav);
    	
    		var objBottomNavCloseLink = document.createElement("a");
    		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
    		objBottomNavCloseLink.setAttribute('href','#');
    		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
    		objBottomNav.appendChild(objBottomNavCloseLink);
    	
    		var objBottomNavCloseImage = document.createElement("img");
    		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
    		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
    	},
    	
    	//
    	//	start()
    	//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
    	//
    	start: function(imageLink) {	
    
    		hideSelectBoxes();
    
    		// stretch overlay to fill page and fade in
    		var arrayPageSize = getPageSize();
    		Element.setHeight('overlay', arrayPageSize[1]);
    		new Effect.Appear('overlay', { duration: 0.2, from: 0.0, to: 0.8 });
    
    		imageArray = [];
    		imageNum = 0;		
    
    		if (!document.getElementsByTagName){ return; }
    		var anchors = document.getElementsByTagName('a');
    
    		// if image is NOT part of a set..
    		if((imageLink.getAttribute('rel') == 'lightbox')){
    			// add single image to imageArray
    			imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
    		} else {
    		// if image is part of a set..
    
    			// loop through anchors, find other images in set, and add them to imageArray
    			for (var i=0; i<anchors.length; i++){
    				var anchor = anchors[i];
    				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
    					imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
    				}
    			}
    			imageArray.removeDuplicates();
    			while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
    		}
    
    		// calculate top offset for the lightbox and display 
    		var arrayPageSize = getPageSize();
    		var arrayPageScroll = getPageScroll();
    		var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 15);
    
    		Element.setTop('lightbox', lightboxTop);
    		Element.show('lightbox');
    		
    		this.changeImage(imageNum);
    	},
    
    	//
    	//	changeImage()
    	//	Hide most elements and preload image in preparation for resizing image container.
    	//
    	changeImage: function(imageNum) {	
    		
    		activeImage = imageNum;	// update global var
    
    		// hide elements during transition
    		Element.show('loading');
    		Element.hide('lightboxImage');
    		Element.hide('hoverNav');
    		Element.hide('prevLink');
    		Element.hide('nextLink');
    		Element.hide('imageDataContainer');
    		Element.hide('numberDisplay');		
    		
    		imgPreloader = new Image();
    		
    		// once image is preloaded, resize image container
    		imgPreloader.onload=function(){
    			Element.setSrc('lightboxImage', imageArray[activeImage][0]);
    			myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
    		}
    		imgPreloader.src = imageArray[activeImage][0];
    	},
    
    	//
    	//	resizeImageContainer()
    	//
    	resizeImageContainer: function( imgWidth, imgHeight) {
    
    		// get current height and width
    		this.wCur = Element.getWidth('outerImageContainer');
    		this.hCur = Element.getHeight('outerImageContainer');
    
    		// scalars based on change from old to new
    		this.xScale = ((imgWidth  + (borderSize * 2)) / this.wCur) * 100;
    		this.yScale = ((imgHeight  + (borderSize * 2)) / this.hCur) * 100;
    
    		// calculate size difference between new and old image, and resize if necessary
    		wDiff = (this.wCur - borderSize * 2) - imgWidth;
    		hDiff = (this.hCur - borderSize * 2) - imgHeight;
    
    		if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
    		if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
    
    		// if new and old image are same size and no scaling transition is necessary, 
    		// do a quick pause to prevent image flicker.
    		if((hDiff == 0) && (wDiff == 0)){
    			if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
    		}
    
    		Element.setHeight('prevLink', imgHeight);
    		Element.setHeight('nextLink', imgHeight);
    		Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));
    
    		this.showImage();
    	},
    	
    	//
    	//	showImage()
    	//	Display image and begin preloading neighbors.
    	//
    	showImage: function(){
    		Element.hide('loading');
    		new Effect.Appear('lightboxImage', { duration: 0.5, queue: 'end', afterFinish: function(){	myLightbox.updateDetails(); } });
    		this.preloadNeighborImages();
    	},
    
    	//
    	//	updateDetails()
    	//	Display caption, image number, and bottom nav.
    	//
    	updateDetails: function() {
    	
    		Element.show('caption');
    		Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
    		
    		// if image is part of set display 'Image x of x' 
    		if(imageArray.length > 1){
    			Element.show('numberDisplay');
    			Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
    		}
    
    		new Effect.Parallel(
    			[ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration + 0.25, from: 0.0, to: 1.0 }), 
    			  new Effect.Appear('imageDataContainer', { sync: true, duration: 1.0 }) ], 
    			{ duration: 0.65, afterFinish: function() { myLightbox.updateNav();} } 
    		);
    	},
    
    	//
    	//	updateNav()
    	//	Display appropriate previous and next hover navigation.
    	//
    	updateNav: function() {
    
    		Element.show('hoverNav');				
    
    		// if not first image in set, display prev image button
    		if(activeImage != 0){
    			Element.show('prevLink');
    			document.getElementById('prevLink').onclick = function() {
    				myLightbox.changeImage(activeImage - 1); return false;
    			}
    		}
    
    		// if not last image in set, display next image button
    		if(activeImage != (imageArray.length - 1)){
    			Element.show('nextLink');
    			document.getElementById('nextLink').onclick = function() {
    				myLightbox.changeImage(activeImage + 1); return false;
    			}
    		}
    		
    		this.enableKeyboardNav();
    	},
    
    	//
    	//	enableKeyboardNav()
    	//
    	enableKeyboardNav: function() {
    		document.onkeydown = this.keyboardAction; 
    	},
    
    	//
    	//	disableKeyboardNav()
    	//
    	disableKeyboardNav: function() {
    		document.onkeydown = '';
    	},
    
    	//
    	//	keyboardAction()
    	//
    	keyboardAction: function(e) {
    		if (e == null) { // ie
    			keycode = event.keyCode;
    		} else { // mozilla
    			keycode = e.which;
    		}
    
    		key = String.fromCharCode(keycode).toLowerCase();
    		
    		if((key == 'x') || (key == 'o') || (key == 'c')){	// close lightbox
    			myLightbox.end();
    		} else if(key == 'p'){	// display previous image
    			if(activeImage != 0){
    				myLightbox.disableKeyboardNav();
    				myLightbox.changeImage(activeImage - 1);
    			}
    		} else if(key == 'n'){	// display next image
    			if(activeImage != (imageArray.length - 1)){
    				myLightbox.disableKeyboardNav();
    				myLightbox.changeImage(activeImage + 1);
    			}
    		}
    
    
    	},
    
    	//
    	//	preloadNeighborImages()
    	//	Preload previous and next images.
    	//
    	preloadNeighborImages: function(){
    
    		if((imageArray.length - 1) > activeImage){
    			preloadNextImage = new Image();
    			preloadNextImage.src = imageArray[activeImage + 1][0];
    		}
    		if(activeImage > 0){
    			preloadPrevImage = new Image();
    			preloadPrevImage.src = imageArray[activeImage - 1][0];
    		}
    	
    	},
    
    	//
    	//	end()
    	//
    	end: function() {
    		this.disableKeyboardNav();
    		Element.hide('lightbox');
    		new Effect.Fade('overlay', { duration: 0.2});
    		showSelectBoxes();
    	}
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getPageScroll()
    // Returns array with x,y page scroll values.
    // Core code from - quirksmode.org
    //
    function getPageScroll(){
    
    	var yScroll;
    
    	if (self.pageYOffset) {
    		yScroll = self.pageYOffset;
    	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
    		yScroll = document.documentElement.scrollTop;
    	} else if (document.body) {// all other Explorers
    		yScroll = document.body.scrollTop;
    	}
    
    	arrayPageScroll = new Array('',yScroll) 
    	return arrayPageScroll;
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getPageSize()
    // Returns array with page width, height and window width, height
    // Core code from - quirksmode.org
    // Edit for Firefox by pHaez
    //
    function getPageSize(){
    	
    	var xScroll, yScroll;
    	
    	if (window.innerHeight && window.scrollMaxY) {	
    		xScroll = document.body.scrollWidth;
    		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
    		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 = windowWidth;
    	} else {
    		pageWidth = xScroll;
    	}
    
    
    	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
    	return arrayPageSize;
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getKey(key)
    // Gets keycode. If 'x' is pressed then it hides the lightbox.
    //
    function getKey(e){
    	if (e == null) { // ie
    		keycode = event.keyCode;
    	} else { // mozilla
    		keycode = e.which;
    	}
    	key = String.fromCharCode(keycode).toLowerCase();
    	
    	if(key == 'x'){
    	}
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // listenKey()
    //
    function listenKey () {	document.onkeypress = getKey; }
    	
    // ---------------------------------------------------
    
    function showSelectBoxes(){
    	selects = document.getElementsByTagName("select");
    	for (i = 0; i != selects.length; i++) {
    		selects[i].style.visibility = "visible";
    	}
    }
    
    // ---------------------------------------------------
    
    function hideSelectBoxes(){
    	selects = document.getElementsByTagName("select");
    	for (i = 0; i != selects.length; i++) {
    		selects[i].style.visibility = "hidden";
    	}
    }
    
    // ---------------------------------------------------
    
    //
    // pause(numberMillis)
    // Pauses code execution for specified time. Uses busy code, not good.
    // Code from [url]http://www.faqts.com/knowledge_base/view.phtml/aid/1602[/url]
    //
    function pause(numberMillis) {
    	var now = new Date();
    	var exitTime = now.getTime() + numberMillis;
    	while (true) {
    		now = new Date();
    		if (now.getTime() > exitTime)
    			return;
    	}
    }
    
    // ---------------------------------------------------
    
    
    
    function initLightbox() { myLightbox = new Lightbox(); }
    Event.observe(window, 'load', initLightbox, false);
    Geändert von niz (13.08.2008 um 10:27 Uhr) Grund: [code] gesetzt - ausnahmsweise Doppelpost, da Zeichenzahl >22k

  4. #3
    Lieutenant
    Dabei seit
    Jan 2005
    Beiträge
    920

    [CSS] AW: Lightbox - Bildergröße - javascript css

    Bilder so groß hochlanden wie du sie haben möchtest ist die einzige (sinnvolle) Lösung.

  5. #4
    Lieutenant
    Ersteller dieses Themas

    Dabei seit
    Feb 2007
    Beiträge
    573

    [CSS] AW: Lightbox - Bildergröße - javascript css

    die bilder sind ja im richtigen format....nur lightbox vergößert mir sie immer größer als der bildschirm und das fenster

    auf anderen seiten kann mann auch dei größe wie groß das sein soll einstellen

  6. #5
    Adagio
    Gast

    [CSS] AW: Lightbox - Bildergröße - javascript css

    Nö, die Lightbox kann das nicht - das Origibalbild wird immer so groß angezeigt wie es auch ist.

    Welche "anderen Seiten" sind das denn?

  7. #6
    Lieutenant
    Ersteller dieses Themas

    Dabei seit
    Feb 2007
    Beiträge
    573

    [CSS] AW: Lightbox - Bildergröße - javascript css

    gut hab die bilder verkleinert

    aber ne andere frage...kann ich irgendwo im script es einstellen das auf jeder seite links oben oder so ein link zur übersicht führt?

  8. #7
    Adagio
    Gast

    [CSS] AW: Lightbox - Bildergröße - javascript css

    Was für eine Übersicht? Lightbox hat keine "Übersichtsfunktion" ...?

  9. #8
    Lieutenant
    Ersteller dieses Themas

    Dabei seit
    Feb 2007
    Beiträge
    573

    [CSS] AW: Lightbox - Bildergröße - javascript css

    ich mein die index.php

    wo alle alben gezeigt werden. und wenn ich in ein album klicke gibts kein zurückbutton in die übersicht. das kann bissl blöd sein bei 20seiten

  10. #9
    Adagio
    Gast

    [CSS] AW: Lightbox - Bildergröße - javascript css

    Normalerweise zeigt die Lightbox unten rechts ein "Close" Icon oder ein X ... damit schließt man das Bild und man ist doch wieder auf der Übersicht.

    Oder was meinst du?

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •  
Forum-Layout: Feste Breite / Flexible Breite