Re: [Linpha-cvs] SF.net SVN: linpha: [4580] trunk/linpha2

[bzrudi <bz...@ce...>]

Hi flo,

great work, even if I testet just a couple of minutes :-)

cheers bzrudi

fan...@us... wrote:
> Revision: 4580
>           http://svn.sourceforge.net/linpha/?rev=4580&view=rev
> Author:   fangehrn
> Date:     2006-10-09 13:52:58 -0700 (Mon, 09 Oct 2006)
> 
> Log Message:
> -----------
> 2006-10-08 flo
>  * implemented keyboard navigation ('n' for next, 'p' for prev, other suggestions?)
>  * implemented full screen view with navigation
> 	please have a look!! :-)
> 
> Modified Paths:
> --------------
>     trunk/linpha2/ChangeLog
>     trunk/linpha2/get_image.php
>     trunk/linpha2/lib/classes/linpha.imgview.class.php
>     trunk/linpha2/lib/classes/linpha.import.class.php
>     trunk/linpha2/lib/js/LinGlobal.js
>     trunk/linpha2/lib/js/LinImage.js
>     trunk/linpha2/lib/js/LinThumbnails.js
>     trunk/linpha2/templates/default/css/global.css
>     trunk/linpha2/templates/default/css/view_img.css
>     trunk/linpha2/templates/default/global.html.php
>     trunk/linpha2/templates/default/view_img.head.php
>     trunk/linpha2/templates/default/view_img.html.php
>     trunk/linpha2/templates/default/view_img_static.html.php
> 
> Modified: trunk/linpha2/ChangeLog
> ===================================================================
> --- trunk/linpha2/ChangeLog	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/ChangeLog	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -1,4 +1,9 @@
>  2006-10-08 flo
> + * implemented keyboard navigation ('n' for next, 'p' for prev, other suggestions?)
> + * implemented full screen view with navigation
> +	please have a look!! :-)
> +
> +2006-10-08 flo
>   * some minor improvements
>  
>  2006-10-08 flo
> 
> Modified: trunk/linpha2/get_image.php
> ===================================================================
> --- trunk/linpha2/get_image.php	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/get_image.php	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -23,7 +23,7 @@
>   * @package Image
>   */
>  
> -sleep(5);
> +//sleep(5);
>   
>  if(!defined('LINPHA_DIR')) { define('LINPHA_DIR','.'); }
>  
> 
> Modified: trunk/linpha2/lib/classes/linpha.imgview.class.php
> ===================================================================
> --- trunk/linpha2/lib/classes/linpha.imgview.class.php	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/lib/classes/linpha.imgview.class.php	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -420,6 +420,9 @@
>  	$GLOBALS['linpha']->template->output['menu_Icons'] = '';
>  	if($this->mode == 'thumb')
>  	{
> +		/**
> +		 * basket icons
> +		 */
>  		if( $GLOBALS['linpha']->sql->checkPermission('basket_download'))
>  		{
>  			$GLOBALS['linpha']->template->output['menu_Icons'] .= '<a href="'.$GLOBALS['linpha']->template->URL_full.'&amp;admin_cmd=basket_add_all_with_checkout&amp;checkout_as=download">'.
> @@ -438,9 +441,21 @@
>  				'<img src="'.LINPHA_DIR.'/templates/'.$GLOBALS['linpha']->template->template_name.'/images/slideshow.png" border="0" title="'.i18n("Mail Images").'" />'
>  				.'</a>'."\n";
>  		}
> +		/**
> +		 * slideshow icons
> +		 */
> +		if( $_SESSION['use_js']) {
> +			$GLOBALS['linpha']->template->output['menu_Icons'] .= '<a href="javascript:slideshowStartFromThumbview()">'.
> +				'<img src="'.LINPHA_DIR.'/templates/'.$GLOBALS['linpha']->template->template_name.'/images/slideshow.png" border="0" title="'.i18n("Play Slideshow").'" />'
> +				.'</a>'."\n";
> +		}
> +
>  	}
>  	elseif($this->mode == 'image')
>  	{
> +		/**
> +		 * basket icons
> +		 */
>  		if( $GLOBALS['linpha']->sql->checkPermission('download'))
>  		{
>  			$GLOBALS['linpha']->template->output['menu_Icons'] .= '<a href="'.LINPHA_DIR.'/download_file.php?id='.$this->id_current.'">'.
> @@ -459,6 +474,15 @@
>  				'<img src="'.LINPHA_DIR.'/templates/'.$GLOBALS['linpha']->template->template_name.'/images/slideshow.png" border="0" title="'.i18n("Mail Image").'" />'
>  				.'</a>'."\n";
>  		}
> +		
> +		/**
> +		 * slideshow icons
> +		 */
> +		if( $_SESSION['use_js']) {
> +			$GLOBALS['linpha']->template->output['menu_Icons'] .= '<a href="javascript:myLinImage.fullscreenStart()">'.
> +				'<img src="'.LINPHA_DIR.'/templates/'.$GLOBALS['linpha']->template->template_name.'/images/slideshow.png" border="0" title="'.i18n("Play Slideshow").'" />'
> +				.'</a>'."\n";
> +		}
>  	}
>  }
>  
> @@ -526,7 +550,7 @@
>   * prepare stuff for slideshow
>   * @uses  LinImgview::buildImgView()
>   */
> -function slideshow()
> +/*function slideshow()
>  {
>  	foreach($this->photos_filtered AS $key=>$photo_value)
>  	{
> @@ -568,7 +592,7 @@
>  			'<br /><a href="#" onclick="myLightbox.start();">'.i18n("Start Slideshow").'<img src="'.LINPHA_DIR.'/templates/default/images/slideshow.png" border="0" /></a>'."\n".
>  			'</div>'."\n";
>  	}
> -}
> +}*/
>  
>  
>  
> @@ -1098,6 +1122,7 @@
>  <imgid><?php echo $this->id_current; ?></imgid>
>  <imgwidth><?php echo $this->org_width; ?></imgwidth>
>  <imgheight><?php echo $this->org_height; ?></imgheight>
> +<imgnr><?php printf(i18n("Image %s of %s"),$this->current_key+1,count($this->photos_filtered)); ?></imgnr>
>  <title><?php echo str_replace('<','&lt;',$GLOBALS['linpha']->template->linpha_title." :: ".$GLOBALS['linpha']->template->output['title']); ?></title>
>  <?php
>  	if(isset($this->xmldata['prev_thumb'])) {
> 
> Modified: trunk/linpha2/lib/classes/linpha.import.class.php
> ===================================================================
> --- trunk/linpha2/lib/classes/linpha.import.class.php	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/lib/classes/linpha.import.class.php	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -452,7 +452,15 @@
>  */
>  function getIgnoreFilelist()
>  {
> -	return Array('CVS','Thumbs.db','ZbThumbnail.info','lost+found');
> +	return Array(
> +		'CVS',				// CVS
> +		'Thumbs.db',		// Windows
> +		'ZbThumbnail.info',	// ?
> +		'_vti_cnf',			// IIS
> +		'_derived',			// IIS
> +		'lost+found'		// Linux
> +	);
> +
>  }
>  
>  
> 
> Modified: trunk/linpha2/lib/js/LinGlobal.js
> ===================================================================
> --- trunk/linpha2/lib/js/LinGlobal.js	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/lib/js/LinGlobal.js	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -18,10 +18,12 @@
>   * 
>   * ajax may be disabled with ./?cat=ajax&disable_ajax
>   * and may be re-enabled with ./?cat=ajax&enable_ajax
> + * 
> + * http://wiki.script.aculo.us/scriptaculous/show/Ajax.Request
>   */
>  function checkAjaxCompatibility()
>  {
> -	new Ajax.Request(LINPHA_DIR + '/?cat=ajax&use_js', {asynchronous:true, onSuccess:checkAjaxCompatibilitySuccess} );
> +	new Ajax.Request(LINPHA_DIR + '/?cat=ajax&use_js', {method:'get', asynchronous:true, onSuccess:checkAjaxCompatibilitySuccess} );
>  }
>  
>  /**
> @@ -39,32 +41,34 @@
>   * 
>   * sets the height in thumb and image view of the "divmain"
>   */
> -function setMainHeight()
> +var linInnerWidth, linInnerHeight;
> +
> +function getWindowSize()
>  {
> -
>  	/**
> -	 * get some values
>  	 * browser incompatibilities...
> -	 *
> -	 * needs to be in display_images!
>  	 */
> -	var linInnerWidth, linInnerHeight;
>  	if (window.innerHeight) // all except Explorer
>  	{
> -		//linInnerWidth = self.innerWidth;
> +		linInnerWidth = self.innerWidth;
>  		linInnerHeight = self.innerHeight;
>  	}
>  	else if (document.body && document.body.offsetWidth)
>  	{
> -		//linInnerWidth = document.body.offsetWidth;
> +		linInnerWidth = document.body.offsetWidth;
>  		linInnerHeight = document.body.offsetHeight;
>  	}
>  	else
>  	{
> -		//linInnerWidth = 500;	// take a default value (@todo  needs testing, maybe anyway never needed)
> -		linInnerHeight = 300;	// take a default value (needs teseting)
> -	}
> +		linInnerWidth = 500;
> +		linInnerHeight = 300;
> +	}	
> +}
>  
> +function setMainHeight()
> +{
> +	getWindowSize();
> +	
>  	var newHeight = linInnerHeight - $('main').offsetTop - 40;	// 35 = 15 (bottom rounded corners) + 10 (margin-bottom) + 15 (??)
>  	if(newHeight < 100)
>  	{
> @@ -72,6 +76,5 @@
>  	}
>  
>  	$('main').style.height = newHeight;
> -
>  }
>  
> 
> Modified: trunk/linpha2/lib/js/LinImage.js
> ===================================================================
> --- trunk/linpha2/lib/js/LinImage.js	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/lib/js/LinImage.js	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -4,6 +4,10 @@
>  }
>  
>  var curImgId;
> +var nextThumbs = new Array();
> +var prevThumbs = new Array();
> +var slideshowActive = false;
> +var slideshowOldMaxWidth, slideshowOldMaxHeight;
>  
>  var xmlDoc = new Array();
>  var preloadImage = new Array();
> @@ -39,7 +43,7 @@
>  	
>  	loadImageXml: function(imgId) {
>  		// http://wiki.script.aculo.us/scriptaculous/show/Ajax.Request
> -		new Ajax.Request(xmlUrl + '&id=' + imgId + '&xml', {asynchronous:true, onSuccess:this.loadImageContinue, onFailure:errFunc} );
> +		new Ajax.Request(xmlUrl + '&id=' + imgId + '&xml', {method:'get', asynchronous:true, onSuccess:this.loadImageContinue, onFailure:errFunc} );
>  	},
>  
>  	loadImageContinue: function(t) {
> @@ -59,6 +63,18 @@
>  		}
>  	},
>  
> +	movePrev: function() {
> +		if(prevThumbs[ prevThumbs.length - 1 ])
> +		{
> +			myLinImage.loadImage(prevThumbs[ prevThumbs.length - 1 ]);
> +		}
> +	},
> +	moveNext: function() {
> +		if(nextThumbs[0])
> +		{
> +			myLinImage.loadImage(nextThumbs[0]);
> +		}
> +	},
>  
>  	//
>  	//	changeImage()
> @@ -66,12 +82,17 @@
>  	changeImage: function() {	
>  		
>  		/**
> -		 * hide meta text immediately
> +		 * set height of outer div to prevent the whole page getting smaller, and if the image is loaded getting bigger again
> +		 * but we want no activities in background
>  		 */
> -		hideImgInfoNow();
> +		if(! slideshowActive) {
> +			$('divimage').style.height = $('mainImage').style.height;
> +		}
>  
> -		// hide elements during transition
> -		$('divimage').style.height = $('mainImage').style.height;	// set height of outer div to prevent the whole page getting smaller, and if the image is loaded getting bigger again
> +		/**
> +		 * hide elements during transition
> +		 */
> +		hideImgInfoNow();	// hide meta text immediately
>  		Element.show('divloading');
>  		Element.hide('mainImage');
>  		Element.hide('divinfolinks');
> @@ -81,9 +102,9 @@
>  		 */
>  			var orgWidth = xmlDoc[curImgId].getElementsByTagName('imgwidth').item(0).firstChild.data;
>  			var orgHeight = xmlDoc[curImgId].getElementsByTagName('imgheight').item(0).firstChild.data;
> -			var sizeArray = scaleToFit(orgWidth,orgHeight,imageSize,imageSize,1);
> -			imgWidth = sizeArray[0];
> -			imgHeight = sizeArray[1];
> +			var sizeArray = scaleToFit(orgWidth,orgHeight,maxImageWidth,maxImageHeight,1);
> +			var imgWidth = sizeArray[0];
> +			var imgHeight = sizeArray[1];
>  
>  		/**
>  		 * preload image
> @@ -91,7 +112,13 @@
>  		var currentImgSrc = imageSrc + curImgId + '&max_width=' + imgWidth + '&max_height=' + imgHeight;
>  		imgPreloader = new Image();
>  		
> -		// once image is preloaded, resize image container
> +		/**
> +		 * once image is preloaded, resize image container
> +		 * 
> +		 * pay attention with other image preloader!
> +		 * if imgWidth and imgWidth was not set with trailing 'var' it got overlapping with the other variables
> +		 * and hence the image was not resized correctly in resizeImageContainer() !!!
> +		 */
>  		imgPreloader.onload=function(){
>  			preloadImageFinished[curImgId] = true;
>  			$('mainImage').src = currentImgSrc;
> @@ -144,8 +171,13 @@
>  	showImage: function(){
>  		Element.hide('divloading');
>  		new Effect.Appear('mainImage', { duration: 0.5, afterFinish: function(){	myLinImage.setImageInfoLink(); } });
> -		$('divimage').style.height = $('mainImage').style.height;	// reset to correct height to prevent trouble if image is bigger or smaller
>  
> +		if(! slideshowActive) {
> +			$('divimage').style.height = $('mainImage').style.height;	// reset to correct height to prevent trouble if image is bigger or smaller
> +		}
> +
> +		this.enableKeyboardNav();
> +
>  		this.setImageData();
>  		this.preloadXml();
>  	},
> @@ -167,23 +199,14 @@
>  		 * set prev thumbs
>  		 */
>  		$('thumbnavi_prevthumb').innerHTML = '';
> +		prevThumbs = new Array();
>  		if(xmlDoc[curImgId].getElementsByTagName('prevthumb').length > 0)
>  		{
>  			for(var i = 0; i < xmlDoc[curImgId].getElementsByTagName('prevthumb').length; i++)
>  			{
> -				var prevThumbId = xmlDoc[curImgId].getElementsByTagName('prevthumb').item(i).firstChild.data;
> -	
> -				var ElemImg = Builder.node('img', {id: 'thumb'+prevThumbId, className: 'img_prevnextthumb', src: thumbSrc + prevThumbId});
> -				var ElemA = Builder.node('a', {href: 'javascript:myLinImage.loadImage(' + prevThumbId + ')'});
> -				var ElemDiv = Builder.node('div', {className: 'thumbnavi_prevnextthumb'});
> -				
> -				ElemA.appendChild( ElemImg );
> -				ElemDiv.appendChild( ElemA );
> -				$('thumbnavi_prevthumb').appendChild(ElemDiv);
> -				
> -				if(! preloadImageFinished[prevThumbId]) {
> -					Element.setOpacity('thumb'+prevThumbId,0.5);
> -				}
> +				var thumbId = xmlDoc[curImgId].getElementsByTagName('prevthumb').item(i).firstChild.data;
> +				prevThumbs[i] = thumbId;
> +				this.setPrevNextThumb(thumbId, 'thumbnavi_prevthumb');
>  			}
>  		}
>  	
> @@ -191,23 +214,14 @@
>  		 * set next thumbs
>  		 */
>  		$('thumbnavi_nextthumb').innerHTML = '';
> +		nextThumbs = new Array();
>  		if(xmlDoc[curImgId].getElementsByTagName('nextthumb').length > 0)
>  		{
>  			for(var i = 0; i < xmlDoc[curImgId].getElementsByTagName('nextthumb').length; i++)
>  			{
> -				var nextThumbId = xmlDoc[curImgId].getElementsByTagName('nextthumb').item(i).firstChild.data;
> -	
> -				var ElemImg = Builder.node('img', {id: 'thumb'+nextThumbId, className: 'img_prevnextthumb', src: thumbSrc + nextThumbId});
> -				var ElemA = Builder.node('a', {href: 'javascript:myLinImage.loadImage(' + nextThumbId + ')'});
> -				var ElemDiv = Builder.node('div', {className: 'thumbnavi_prevnextthumb'});
> -				
> -				ElemA.appendChild( ElemImg );
> -				ElemDiv.appendChild( ElemA );
> -				$('thumbnavi_nextthumb').appendChild(ElemDiv);
> -
> -				if(! preloadImageFinished[nextThumbId]) {
> -					Element.setOpacity('thumb'+nextThumbId,0.5);
> -				}
> +				var thumbId = xmlDoc[curImgId].getElementsByTagName('nextthumb').item(i).firstChild.data;
> +				nextThumbs[i] = thumbId;
> +				this.setPrevNextThumb(thumbId, 'thumbnavi_nextthumb');
>  			}
>  		}
>  	
> @@ -255,20 +269,45 @@
>  			}
>  		}
>  		
> +		/**
> +		 * set image nr
> +		 * currently only in slideshow used
> +		 */
> +		$('divSlideshowImgNr').innerHTML = xmlDoc[curImgId].getElementsByTagName('imgnr').item(0).firstChild.data;
> +		
>  	
>  	},	// end function setImageData()
>  	
> +	setPrevNextThumb: function(thumbId, divId)
> +	{
> +		var ElemImg = Builder.node('img', {id: 'thumb'+thumbId, className: 'img_prevnextthumb', src: thumbSrc + thumbId});
> +		var ElemA = Builder.node('a', {href: 'javascript:myLinImage.loadImage(' + thumbId + ')'});
> +		var ElemDiv = Builder.node('div', {className: 'thumbnavi_prevnextthumb'});
> +		
> +		ElemA.appendChild( ElemImg );
> +		ElemDiv.appendChild( ElemA );
> +		$(divId).appendChild(ElemDiv);
> +		
> +		if(! preloadImageFinished[thumbId]) {
> +			Element.setOpacity('thumb'+thumbId,0.5);
> +		}
> +
> +	},
> +	
>  	/**
>  	 * setImageInfoLink
>  	 * 
>  	 * set positions of info link
>  	 * could only be done after image has been completly loaded
>  	 */
> -	setImageInfoLink: function() {
> -		$('divinfolinks').style.top = $('mainImage').offsetTop + $('mainImage').offsetHeight;
> -		$('divinfolinks').style.left = $('mainImage').offsetLeft + $('mainImage').offsetWidth - 50; // 50: value of view_img.css width = 50px; can't get width with javascript because element is hidden
> -		Element.show('divinfolinks');
> -
> +	setImageInfoLink: function()
> +	{
> +		if(! slideshowActive)
> +		{
> +			$('divinfolinks').style.top = $('mainImage').offsetTop + $('mainImage').offsetHeight;
> +			$('divinfolinks').style.left = $('mainImage').offsetLeft + $('mainImage').offsetWidth - 50; // 50: value of view_img.css width = 50px; can't get width with javascript because element is hidden
> +			Element.show('divinfolinks');
> +		}
>  	},
>  
>  	//
> @@ -297,21 +336,15 @@
>  
>  		key = String.fromCharCode(keycode).toLowerCase();
>  		
> -		if((key == 'x') || (key == 'o') || (key == 'c')){	// close lightbox
> -			myLinImage.end();
> +		if( slideshowActive && ( (key == 'x') || (key == 'o') || (key == 'c') ) ) {	// close slideshow
> +			myLinImage.fullscreenStop();
>  		} else if(key == 'p'){	// display previous image
> -			if(activeImage != 0){
> -				myLinImage.disableKeyboardNav();
> -				myLinImage.changeImage(activeImage - 1);
> -			}
> +			myLinImage.disableKeyboardNav();
> +			myLinImage.movePrev();
>  		} else if(key == 'n'){	// display next image
> -			if(activeImage != (imageArray.length - 1)){
> -				myLinImage.disableKeyboardNav();
> -				myLinImage.changeImage(activeImage + 1);
> -			}
> +			myLinImage.disableKeyboardNav();
> +			myLinImage.moveNext();
>  		}
> -
> -
>  	},
>  
>  	//
> @@ -360,9 +393,9 @@
>  			 */
>  				var orgWidth = xmlDoc[imgId].getElementsByTagName('imgwidth').item(0).firstChild.data;
>  				var orgHeight = xmlDoc[imgId].getElementsByTagName('imgheight').item(0).firstChild.data;
> -				var sizeArray = scaleToFit(orgWidth,orgHeight,imageSize,imageSize,1);
> -				imgWidth = sizeArray[0];
> -				imgHeight = sizeArray[1];
> +				var sizeArray = scaleToFit(orgWidth,orgHeight,maxImageWidth,maxImageHeight,1);
> +				var imgWidth = sizeArray[0];
> +				var imgHeight = sizeArray[1];
>  	
>  			var currentImgSrc = imageSrc + imgId + '&max_width=' + imgWidth + '&max_height=' + imgHeight;
>  	
> @@ -381,12 +414,126 @@
>  	preloadImageFinished: function(imgId) {
>  		new Effect.Appear('thumb'+imgId, { duration: 0.5, from: 0.5, to: 1.0 });
>  		preloadImageFinished[imgId] = true;
> +	},
> +	
> +	fullscreenStart: function()
> +	{
> +		slideshowActive = true;
> +
> +		/**
> +		 * save old values to restore if slideshow ends
> +		 * and set new window size 
> +		 */
> +		slideshowOldMaxWidth = maxImageWidth;
> +		slideshowOldMaxHeight = maxImageHeight;
> +		onWindowResize();
> +		
> +		/**
> +		 * start slideshow with some superduper effects
> +		 */		
> +		Effect.Appear('divSlideshowOverlay', { queue: 'end', duration: 1.0, from: 0.0, to: 0.9 });
> +		Effect.BlindDown('divSlideshowControls', { queue: 'end'} );
> +		Element.show('divSlideshowImage');
> +		
> +		/**
> +		 * steal the mainimage
> +		 */
> +		$('divimage').innerHTML = '';
> +		$('divSlideshowImage').innerHTML = '<img id="mainImage" style="display: none;" class="imgSlideshow">';
> +		
> +		/**
> +		 * reload image with new position and size
> +		 */
> +		this.loadImage( curImgId );
> +	},
> +
> +
> +	fullscreenStop: function()
> +	{
> +		slideshowActive = false;
> +
> +		/**
> +		 * restore max image size
> +		 */
> +		maxImageWidth = slideshowOldMaxWidth;
> +		maxImageHeight = slideshowOldMaxHeight;
> +
> +		/**
> +		 * end slideshow with some superduper effects
> +		 */
> +		Effect.Fold('divSlideshowControls', { queue: 'end'} );
> +		Effect.Fade('divSlideshowOverlay', { queue: 'end', duration: 0.5, from: 0.9, to: 0.0 } );
> +		Element.hide('divSlideshowImage');
> +
> +		/**
> +		 * give back the mainimage
> +		 */
> +		$('divSlideshowImage').innerHTML = '';
> +		$('divimage').innerHTML = '<img id="mainImage" style="display: none;">';
> +
> +		/**
> +		 * reload image with old position and size
> +		 */
> +		this.loadImage( curImgId );
> +	},
> +	
> +	slideshowPlay: function()
> +	{
> +	},
> +	slideshowPause: function()
> +	{
> +		
> +	},
> +	slideshowChangeDelay: function()
> +	{
> +		//currentDelay=document.optionsForm.delay.options[document.optionsForm.delay.selectedIndex].value * 1000;*/
>  	}
>  }
>  
> +/**
> + * onWindowResize
> + * 
> + * will be called if the window is resized
> + */
> +function onWindowResize()
> +{
> +	if(slideshowActive)
> +	{
> +		getWindowSize();
> +		maxImageWidth = linInnerWidth - 70;
> +		maxImageHeight = linInnerHeight - 120;
> +	}
> +	else
> +	{
> +		myLinImage.setImageInfoLink();
> +		// setMainHeight();	// defined in LinGlobal.js
> +	}
> +}
> +
> +/**
> + * init on finished page load
> + */
> +function initLinImage()
> +{
> +	setInfoColors();
> +	$('divimage').style.height = startImgHeight; // initial sets correct height at begin and not after the image is loaded
> +	$('mainImage').style.height = startImgHeight; // initial sets correct height at begin and not after the image is loaded
> +	myLinImage = new LinImage();
> +	myLinImage.loadImage(startImgId);
> +//	setMainHeight();	// defined in LinGlobal.js
> +	window.onresize = onWindowResize;
> +	
> +}
> +Event.observe(window, 'load', initLinImage, false);
> +
>  // -----------------------------------------------------------------------------------
> +// end class LinImage
> +// -----------------------------------------------------------------------------------
>  
>  
> +// -----------------------------------------------------------------------------------
> +// Common used functions
> +// -----------------------------------------------------------------------------------
>  
>  var colorinfoactive;
>  var colorinfonotactive;
> @@ -487,28 +634,15 @@
>  }
>  
>  /**
> - * onWindowResize
> + * openTextarea()
>   * 
> - * will be called if the window is resized
> + * opens the bigger textarea to enter longer image comments
> + * this function is defined in view_img_static.html.php too
>   */
> -function onWindowResize()
> +function openTextarea()
>  {
> -	myLinImage.setImageInfoLink();
> -//	setMainHeight();	// defined in LinGlobal.js
> -}
> -
> -/**
> - * init on finished page load
> - */
> -function initLinImage()
> -{
> -	setInfoColors();
> -	$('divimage').style.height = startImgHeight; // initial sets correct height at begin and not after the image is loaded
> -	$('mainImage').style.height = startImgHeight; // initial sets correct height at begin and not after the image is loaded
> -	myLinImage = new LinImage();
> -	myLinImage.loadImage(startImgId);
> -//	setMainHeight();	// defined in LinGlobal.js
> -	window.onresize = onWindowResize;
> +	document.getElementById('comment_textarea').style.display = 'block';
> +	document.getElementById('comment_div_text').style.display = 'none';
>  	
> -}
> -Event.observe(window, 'load', initLinImage, false);
> +	document.getElementById('comment_textarea').value = document.getElementById('comment_input_text').value;
> +}
> \ No newline at end of file
> 
> Modified: trunk/linpha2/lib/js/LinThumbnails.js
> ===================================================================
> --- trunk/linpha2/lib/js/LinThumbnails.js	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/lib/js/LinThumbnails.js	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -33,6 +33,7 @@
>  {
>  	/**
>  	 * set correct main height only if photos_per_page == auto
> +	 * needs to be in display_images!
>  	 */
>  	setMainHeight();	// defined in LinGlobal.js
>  
> @@ -420,6 +421,16 @@
>  }
>  
>  /**
> + * slideshowStartFromThumbview()
> + * 
> + * to start the slideshow, first open imageview with first image, and then start slideshow
> + */
> +function slideshowStartFromThumbview()
> +{
> +	location.href = link_url + '&id=' + img_ids[0]['id'] + '&slideshow';
> +}
> +
> +/**
>   * function view_source_code() removed
>   * use firefox extension "Aardvark"
>   * much nicer ;-)
> 
> Modified: trunk/linpha2/templates/default/css/global.css
> ===================================================================
> --- trunk/linpha2/templates/default/css/global.css	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/templates/default/css/global.css	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -23,9 +23,9 @@
>  	
>  	/**
>  	 * background color
> -	 * #divthumbnavi used in view_img.html.php
> +	 * #divthumbnavi amd #divSlideshowControls used in view_img.html.php
>  	 */
> -	#divleft, #divmain, #divright, #divthumbnavi, #divnavigation {
> +	#divleft, #divmain, #divright, #divthumbnavi, #divnavigation, #divSlideshowControls {
>  		background-color: #f90;
>  	}
>  	
> @@ -306,21 +306,4 @@
>  	   display: block !important;
>  	}
>  
> -/**
> - * slieshow
> - */
> -#slideshow {
> -	position: absolute;
> -	top: 150px;
> -	left: 150px;
> -
> -	width: 400px;
> -	height: 150px;
> -	
> -	padding: 5px;
> -	
> -	background-color: #d5fcf4;
> -
> -	border: 1px solid #000000;
> -}
>  -->
> \ No newline at end of file
> 
> Modified: trunk/linpha2/templates/default/css/view_img.css
> ===================================================================
> --- trunk/linpha2/templates/default/css/view_img.css	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/templates/default/css/view_img.css	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -111,4 +111,58 @@
>  	   width: 200px;
>  	   margin: 5px;
>  	   margin-left: 150px;
> -	}
> \ No newline at end of file
> +	}
> +
> +/**
> + * slieshow
> + */
> +#divSlideshowOverlay
> +{
> +	position: absolute;
> +	top: 0px;
> +	left: 0px;
> +
> +	width: 100%;
> +	height: 100%;
> +	
> +	padding: 0px;
> +	margin: 0px;
> +	
> +	z-index: 90;
> +	background-color: #000;
> +}
> +
> +#divSlideshowControls
> +{
> +	position: absolute;
> +	top: 0px;
> +	left: 50%;
> +
> +	padding: 0px;
> +	margin: 0px;
> +
> +	width: 500px;
> +	margin-left: -250px; /* should be the half of 'width' */
> +
> +	z-index: 91;
> +}
> +
> +
> +#divSlideshowImage {
> +	position: absolute;
> +	top: 60px;
> +
> +	padding: 0px;
> +	margin: 0px;
> +	
> +	width: 100%;
> +
> +	z-index: 91;
> +	text-align: center;
> +}
> +
> +.imgSlideshow {
> +	border: 20px solid white;
> +}
> +
> +
> 
> Modified: trunk/linpha2/templates/default/global.html.php
> ===================================================================
> --- trunk/linpha2/templates/default/global.html.php	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/templates/default/global.html.php	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -88,7 +88,6 @@
>  		<?php if( isset( $GLOBALS['linpha']->template->output['menu_Icons'] ) ) {
>  			echo $GLOBALS['linpha']->template->output['menu_Icons'];
>  		} ?>
> -		<a href="<?php echo $GLOBALS['linpha']->template->URL_full; ?>&amp;slideshow=play"><img src="<?php echo LINPHA_DIR.'/templates/'.$GLOBALS['linpha']->template->template_name.'/images/slideshow.png'; ?>" border="0" title="<?php echo i18n("Play Slideshow"); ?>" /></a>
>  	</div>
>  	
>  	<?php if($GLOBALS['linpha']->sql->isLoggedIn()) { ?>
> 
> Modified: trunk/linpha2/templates/default/view_img.head.php
> ===================================================================
> --- trunk/linpha2/templates/default/view_img.head.php	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/templates/default/view_img.head.php	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -3,7 +3,8 @@
>  var xmlUrl = '<?php echo convert_amp($GLOBALS['linpha']->template->URL_base); ?>';
>  var imageSrc = '<?php echo LINPHA_DIR.'/get_image.php?id='; ?>';
>  var thumbSrc = '<?php echo LINPHA_DIR.'/get_thumb.php?id='; ?>';
> -var imageSize = <?php echo $GLOBALS['linpha']->sql->config->value['sys_style_image_size']; ?>;
> +var maxImageWidth = <?php echo $GLOBALS['linpha']->sql->config->value['sys_style_image_size']; ?>;
> +var maxImageHeight = <?php echo $GLOBALS['linpha']->sql->config->value['sys_style_image_size']; ?>;
>  var startImgId = <?php echo $GLOBALS['linpha']->imgview->id_current; ?>;
>  var startImgHeight = <?php echo $GLOBALS['linpha']->imgview->img_height; ?>;
>  </script>
> 
> Modified: trunk/linpha2/templates/default/view_img.html.php
> ===================================================================
> --- trunk/linpha2/templates/default/view_img.html.php	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/templates/default/view_img.html.php	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -26,7 +26,7 @@
>  	</div>
>  	<div id="main">
>  		<div id="divloading">
> -			<img src="<?php echo LINPHA_DIR; ?>/lib/classes/lightbox/images/loading.gif">
> +			<img src="<?php echo LINPHA_DIR; ?>/lib/graphics/loading.gif">
>  		</div>
>  
>  		<noscript><h1><?php echo i18n("If you have just disabled Javascript, you will need to restart your browser."); ?></h1></noscript>
> @@ -61,15 +61,6 @@
>  		<input type="submit" name="submit" value="<?php echo i18n("submit"); ?>" />
>  		</form>
>  		</div>
> -		<script language="JavaScript" type="text/javascript">
> -		function openTextarea()
> -		{
> -			document.getElementById('comment_textarea').style.display = 'block';
> -			document.getElementById('comment_div_text').style.display = 'none';
> -			
> -			document.getElementById('comment_textarea').value = document.getElementById('comment_input_text').value;
> -		}
> -		</script>
>  
>  		<br />
>  	<?php } /* end if checkPermission('metadata_comments') */ ?>
> @@ -81,4 +72,49 @@
>  	<div class="roundbottom">
>  		<img src="<?php echo LINPHA_DIR.'/templates/'.$GLOBALS['linpha']->template->template_name.'/images/bl.gif'; ?>" alt="" width="15" height="15" class="corner" style="display: none" />
>     </div>
> -</div>
> \ No newline at end of file
> +</div>
> +
> +
> +<div id="divSlideshowOverlay" style="display: none;"></div>
> +<div id="divSlideshowControls" style="display: none;">
> +	<div style="float: left; padding-left: 5px; ">
> +		<a href="javascript:myLinImage.movePrev()"><img src="<?php echo LINPHA_DIR; ?>/lib/graphics/prev.gif" width="25" height="25" border="0"></a>
> +		<a href="javascript:myLinImage.moveNext()"><img src="<?php echo LINPHA_DIR; ?>/lib/graphics/next.gif" width="25" height="25" border="0"></a>
> +		||
> +		<a href="javascript:myLinImage.slideshowPlay()">Play</a>/<a href="javascript:myLinImage.slideshowPause()">Pause</a>	
> +		<?php echo i18n("Delay"); ?>:
> +		<select id="delay" name="delay" size="1"  onchange="changeDelay()">
> +			<option value="3">3 s</option>
> +			<option value="4">4 s</option>
> +			<option value="5" selected>5 s</option>
> +			<option value="10">10 s</option>
> +			<option value="15">15 s</option>
> +			<option value="30">30 s</option>
> +			<option value="45">45 s</option>
> +			<option value="60">60 s</option>
> +		</select>
> +		||
> +	</div>
> +	<div id="divSlideshowImgNr" style="float: left;"></div>
> +	||
> +	<a href="javascript:myLinImage.fullscreenStop()"><img src="<?php echo LINPHA_DIR; ?>/lib/graphics/close.gif" width="25" height="25" border="0"></a>
> +
> +
> +	<div style="clear: both;"></div>
> +	<div class="roundbottom">
> +		<img src="<?php echo LINPHA_DIR.'/templates/'.$GLOBALS['linpha']->template->template_name.'/images/bl.gif'; ?>" alt="" width="15" height="15" class="corner" style="display: none" />
> +   </div>
> +</div>
> +<div id="divSlideshowImage" style="display: none;"></div>
> +
> +<!--
> +<div id="divSlideshowImage" style="display: none;">
> +	<div class="roundtop">
> +		<img src="<?php echo LINPHA_DIR.'/templates/'.$GLOBALS['linpha']->template->template_name.'/images/tl.gif'; ?>" alt="" width="15" height="15" class="corner" style="display: none" />
> +	</div>
> +	<div id="divSlideshowImageInner"></div>
> +	<div class="roundbottom">
> +		<img src="<?php echo LINPHA_DIR.'/templates/'.$GLOBALS['linpha']->template->template_name.'/images/bl.gif'; ?>" alt="" width="15" height="15" class="corner" style="display: none" />
> +   </div>
> +</div>
> +-->
> 
> Modified: trunk/linpha2/templates/default/view_img_static.html.php
> ===================================================================
> --- trunk/linpha2/templates/default/view_img_static.html.php	2006-10-08 22:20:11 UTC (rev 4579)
> +++ trunk/linpha2/templates/default/view_img_static.html.php	2006-10-09 20:52:58 UTC (rev 4580)
> @@ -51,7 +51,7 @@
>  		<?php echo i18n("Add Comment"); ?>:<br />
>  		<div id="comment_div_text">
>  		<input type="text" id="comment_input_text" name="comment_text" value="" tabindex="1" size="40" maxlength="40" />
> -		<a href="javascript:open_textarea()">(+)</a>
> +		<a href="javascript:openTextarea()">(+)</a>
>  		</div>
>  		<textarea style="display: none;" id="comment_textarea" name="comment_textarea" tabindex="1" rows="10" cols="50"></textarea>
>  		<?php echo i18n("Name"); ?>: <input type="text" name="author" value="" tabindex="2" size="10" maxlength="40" />
> @@ -60,7 +60,7 @@
>  		</form>
>  		</div>
>  		<script language="JavaScript" type="text/javascript">
> -		function open_textarea()
> +		function openTextarea()
>  		{
>  			document.getElementById('comment_textarea').style.display = 'block';
>  			document.getElementById('comment_div_text').style.display = 'none';
> 
> 
> This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.
> 
> -------------------------------------------------------------------------
> Take Surveys. Earn Cash. Influence the Future of IT
> Join SourceForge.net's Techsay panel and you'll get the chance to share your
> opinions on IT & business topics through brief surveys -- and earn cash
> http://www.techsay.com/default.php?page=join.php&p=sourceforge&CID=DEVDEV
> _______________________________________________
> Linpha-cvs mailing list
> Lin...@li...
> https://lists.sourceforge.net/lists/listinfo/linpha-cvs