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

[<fan...@us...>]

Revision: 4577
          http://svn.sourceforge.net/linpha/?rev=4577&view=rev
Author:   fangehrn
Date:     2006-10-08 08:42:12 -0700 (Sun, 08 Oct 2006)

Log Message:
-----------
2006-10-08 flo
 * implemented "lightbox" image view
 * preload images and xml data

Modified Paths:
--------------
    trunk/linpha2/ChangeLog
    trunk/linpha2/get_image.php
    trunk/linpha2/lib/classes/image/gdlib/thumbnail.php
    trunk/linpha2/lib/js/LinImage.js
    trunk/linpha2/templates/default/css/view_img.css
    trunk/linpha2/templates/default/view_img.html.php

Modified: trunk/linpha2/ChangeLog
===================================================================
--- trunk/linpha2/ChangeLog	2006-10-07 18:12:35 UTC (rev 4576)
+++ trunk/linpha2/ChangeLog	2006-10-08 15:42:12 UTC (rev 4577)
@@ -1,3 +1,7 @@
+2006-10-08 flo
+ * implemented "lightbox" image view
+ * preload images and xml data
+
 2006-10-07 flo
  * implementing lightbox in normal image view
  * preloading images and xml data

Modified: trunk/linpha2/get_image.php
===================================================================
--- trunk/linpha2/get_image.php	2006-10-07 18:12:35 UTC (rev 4576)
+++ trunk/linpha2/get_image.php	2006-10-08 15:42:12 UTC (rev 4577)
@@ -22,6 +22,8 @@
  * Thumb view related methods and functions
  * @package Image
  */
+
+//sleep(3);
  
 if(!defined('LINPHA_DIR')) { define('LINPHA_DIR','.'); }
 

Modified: trunk/linpha2/lib/classes/image/gdlib/thumbnail.php
===================================================================
--- trunk/linpha2/lib/classes/image/gdlib/thumbnail.php	2006-10-07 18:12:35 UTC (rev 4576)
+++ trunk/linpha2/lib/classes/image/gdlib/thumbnail.php	2006-10-08 15:42:12 UTC (rev 4577)
@@ -33,27 +33,26 @@
 	{
 		$x = 0;
 		$y = 0;
-		$w = $this->img_thumbsize;
-		$h = $this->img_thumbsize;
+		
+		$src_size = $this->org_width; // or $this->org_height, here it doesnt matter
 	}
-	elseif($ratio>1)
+	elseif($ratio>1) // org_width > org_height
 	{
 		$x = ( $this->org_width - $this->org_height )/2;
 		$y = 0;
-		$w = $this->img_thumbsize;
-		$h = $this->img_thumbsize;
-		$src_size = $this->org_height;
+
+		$src_size = $this->org_height; // i think it does matter...
 	}
-	elseif($ratio<1)
+	elseif($ratio<1) // org_height > org_width
 	{
 		$y = ( $this->org_height - $this->org_width )/2;
 		$x = 0;
-		$w = $this->img_thumbsize;
-		$h = $this->img_thumbsize;
 		
-		$src_size = $this->org_width;
+		$src_size = $this->org_width; // i think it does matter...
 	}
 
+	$w = $this->img_thumbsize;
+	$h = $this->img_thumbsize;
 
 /**
  * create image resources

Modified: trunk/linpha2/lib/js/LinImage.js
===================================================================
--- trunk/linpha2/lib/js/LinImage.js	2006-10-07 18:12:35 UTC (rev 4576)
+++ trunk/linpha2/lib/js/LinImage.js	2006-10-08 15:42:12 UTC (rev 4577)
@@ -3,15 +3,18 @@
     alert('Error ' + t.status + ' -- ' + t.statusText);
 }
 
-var xmlDoc;
-//var curImgId = startImgId;
-var img_width;
-var img_height;
+var curImgId;
 
+var xmlDoc = new Array();
+var preloadImage = new Array();
+var preloadImageFinished = new Array();
+var preloadXmlFinished = new Array();
+
 var borderSize = 0;
 var resizeDuration = 0.5;
 
 var LinImage = Class.create();
+var myLinImage;
 
 LinImage.prototype = {
 	
@@ -21,40 +24,62 @@
 	initialize: function() {
 	},
 
+	loadImage: function(imgId) {
+		curImgId = imgId;
+		
+		if(preloadXmlFinished[imgId] && xmlDoc[imgId] != "undefined")
+		{
+			this.changeImage();
+		}
+		else
+		{
+			this.loadImageXml(imgId);
+		}
+	},
 	
-	loadStartData: function() {
+	loadImageXml: function(imgId) {
 		// http://wiki.script.aculo.us/scriptaculous/show/Ajax.Request
-		new Ajax.Request(xmlUrl + '&id=' + startImgId + '&xml', {asynchronous:true, onSuccess:this.loadStartImage, onFailure:errFunc} );
-
+		new Ajax.Request(xmlUrl + '&id=' + imgId + '&xml', {asynchronous:true, onSuccess:this.loadImageContinue, onFailure:errFunc} );
 	},
 
-	loadStartImage: function(t) {
-		xmlDoc = t.responseXML.documentElement;
-		this.changeImage();
+	loadImageContinue: function(t) {
+		var loadedimgid = t.responseXML.documentElement.getElementsByTagName('imgid').item(0).firstChild.data;
+
+		xmlDoc[loadedimgid] = t.responseXML.documentElement;
+
+		if( loadedimgid == curImgId)	// coming from loadImage()
+		{
+			myLinImage.changeImage();
+		}
+		else	// coming from preloadImage()
+		{
+			preloadXmlFinished[loadedimgid] = true;
+			myLinImage.preloadImage(loadedimgid);
+		}
 	},
 
+
 	//
 	//	changeImage()
 	//
-	changeImage: function(imgId) {	
+	changeImage: function() {	
 		
-		alert('hallo');
-
 		/**
 		 * hide meta text immediately
 		 */
 		hideImgInfoNow();
 
 		// 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
 		Element.show('divloading');
 		Element.hide('mainImage');
+		Element.hide('divinfolinks');
 
 		/**
 		 * set image width and height
 		 */
-			//var imgid = xmlDoc.getElementsByTagName('imgid').item(0).firstChild.data;
-			var orgWidth = xmlDoc.getElementsByTagName('imgwidth').item(0).firstChild.data;
-			var orgHeight = xmlDoc.getElementsByTagName('imgheight').item(0).firstChild.data;
+			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];
@@ -62,14 +87,15 @@
 		/**
 		 * preload image
 		 */
+		var currentImgSrc = imageSrc + curImgId + '&max_width=' + imgWidth + '&max_height=' + imgHeight;
 		imgPreloader = new Image();
 		
 		// once image is preloaded, resize image container
 		imgPreloader.onload=function(){
-			$('mainImage').src = image_src + imgid + '&max_width=' + imgWidth + '&max_height=' + imgHeight;
+			$('mainImage').src = currentImgSrc;
 			myLinImage.resizeImageContainer(imgWidth, imgHeight);
 		}
-		imgPreloader.src = image_src + imgid + '&max_width=' + imgWidth + '&max_height=' + imgHeight;
+		imgPreloader.src = currentImgSrc;
 	},
 
 	//
@@ -78,7 +104,7 @@
 	resizeImageContainer: function( imgWidth, imgHeight) {
 
 		// get current height and width
-		this.wCur = $('mainImage').offsetWidth;
+		/*this.wCur = $('mainImage').offsetWidth;
 		this.hCur = $('mainImage').offsetHeight;
 
 		// scalars based on change from old to new
@@ -96,8 +122,11 @@
 		// do a quick pause to prevent image flicker.
 		if((hDiff == 0) && (wDiff == 0)){
 			if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
-		}
+		}*/
 
+		$('mainImage').style.width = imgWidth;
+		$('mainImage').style.height = imgHeight;
+
 	
 		/*Element.setHeight('prevLink', imgHeight);
 		Element.setHeight('nextLink', imgHeight);
@@ -108,12 +137,15 @@
 	
 	//
 	//	showImage()
-	//	Display image and begin preloading neighbors.
+	//	Display image and begin preloading images.
 	//
 	showImage: function(){
 		Element.hide('divloading');
-		new Effect.Appear('mainImage', { duration: 0.5, queue: 'end', afterFinish: function(){	myLinImage.setImageData(); } });
-//		this.preloadNeighborImages();
+		new Effect.Appear('mainImage', { duration: 0.5, afterFinish: function(){	myLinImage.setImageInfoLink(); } });
+		$('divimage').style.height = $('mainImage').style.height;	// reset height to auto change if image is bigger or smaller
+
+		this.setImageData();
+		this.preloadXml();
 	},
 
 
@@ -122,30 +154,34 @@
 		/**
 		 * set title
 		 */
-		$('title').innerHTML = xmlDoc.getElementsByTagName('title').item(0).firstChild.data;
-	
+		$('title').innerHTML = xmlDoc[curImgId].getElementsByTagName('title').item(0).firstChild.data;
+
 		/**
 		 * set current thumb
 		 */
-		$('thumbnavi_currentthumb').innerHTML = '<a href="javascript:loadImage(' + imgid + ')"><img class="img_currentthumb" src="' + thumb_src + imgid + '" /></a>';
+		$('thumbnavi_currentthumb').innerHTML = '<a href="javascript:myLinImage.loadImage(' + curImgId + ')"><img class="img_currentthumb" src="' + thumbSrc + curImgId + '" /></a>';
 	
 		/**
 		 * set prev thumbs
 		 */
 		$('thumbnavi_prevthumb').innerHTML = '';
-		if(xmlDoc.getElementsByTagName('prevthumb').length > 0)
+		if(xmlDoc[curImgId].getElementsByTagName('prevthumb').length > 0)
 		{
-			for(var i = 0; i < xmlDoc.getElementsByTagName('prevthumb').length; i++)
+			for(var i = 0; i < xmlDoc[curImgId].getElementsByTagName('prevthumb').length; i++)
 			{
-				var prevThumbId = xmlDoc.getElementsByTagName('prevthumb').item(i).firstChild.data;
+				var prevThumbId = xmlDoc[curImgId].getElementsByTagName('prevthumb').item(i).firstChild.data;
 	
-				var ElemImg = Builder.node('img', {className: 'img_prevnextthumb', src: thumb_src + prevThumbId});
-				var ElemA = Builder.node('a', {href: 'javascript:loadImage(' + prevThumbId + ')'});
+				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);
+				}
 			}
 		}
 	
@@ -153,32 +189,36 @@
 		 * set next thumbs
 		 */
 		$('thumbnavi_nextthumb').innerHTML = '';
-		if(xmlDoc.getElementsByTagName('nextthumb').length > 0)
+		if(xmlDoc[curImgId].getElementsByTagName('nextthumb').length > 0)
 		{
-			for(var i = 0; i < xmlDoc.getElementsByTagName('nextthumb').length; i++)
+			for(var i = 0; i < xmlDoc[curImgId].getElementsByTagName('nextthumb').length; i++)
 			{
-				var nextThumbId = xmlDoc.getElementsByTagName('nextthumb').item(i).firstChild.data;
+				var nextThumbId = xmlDoc[curImgId].getElementsByTagName('nextthumb').item(i).firstChild.data;
 	
-				var ElemImg = Builder.node('img', {className: 'img_prevnextthumb', src: thumb_src + nextThumbId});
-				var ElemA = Builder.node('a', {href: 'javascript:loadImage(' + nextThumbId + ')'});
+				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);
+				}
 			}
 		}
 	
 		/**
 		 * set meta data
 		 */
-		if(xmlDoc.getElementsByTagName('meta').length > 0)
+		if(xmlDoc[curImgId].getElementsByTagName('meta').length > 0)
 		{
 			$('divmeta').innerHTML = '';
 	
-			for(var i = 0; i < xmlDoc.getElementsByTagName('meta').length; i++)
+			for(var i = 0; i < xmlDoc[curImgId].getElementsByTagName('meta').length; i++)
 			{
-				var meta = xmlDoc.getElementsByTagName('meta').item(i);
+				var meta = xmlDoc[curImgId].getElementsByTagName('meta').item(i);
 				var metaname = document.createTextNode( meta.getElementsByTagName('name').item(0).firstChild.data + ': ' );
 				var metavalue = document.createTextNode( meta.getElementsByTagName('value').item(0).firstChild.data );
 	
@@ -192,11 +232,11 @@
 		 * set comments
 		 */
 		$('divcomments').innerHTML = '';
-		if(xmlDoc.getElementsByTagName('comment').length > 0)
+		if(xmlDoc[curImgId].getElementsByTagName('comment').length > 0)
 		{
-			for(var i = 0; i < xmlDoc.getElementsByTagName('comment').length; i++)
+			for(var i = 0; i < xmlDoc[curImgId].getElementsByTagName('comment').length; i++)
 			{
-				var comment = xmlDoc.getElementsByTagName('comment').item(i);
+				var comment = xmlDoc[curImgId].getElementsByTagName('comment').item(i);
 				var commenttime = document.createTextNode( comment.getElementsByTagName('time').item(0).firstChild.data + ' ' );
 				var commentauthor = document.createTextNode( comment.getElementsByTagName('author').item(0).firstChild.data );
 				var commenttext = document.createTextNode( comment.getElementsByTagName('text').item(0).firstChild.data );
@@ -213,17 +253,23 @@
 			}
 		}
 		
-		/**
-		 * set positions of info link
-		 */
+	
+	},	// end function setImageData()
+	
+	/**
+	 * 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 - $('divinfolinks').offsetWidth;
-	
+		$('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');
+
 	},
-	// end function setImageData()
+
 	//
-	//
-	//
 	//	enableKeyboardNav()
 	//
 	enableKeyboardNav: function() {
@@ -270,17 +316,63 @@
 	//	preloadNeighborImages()
 	//	Preload previous and next images.
 	//
-	preloadNeighborImages: function(){
+	preloadXml: function() {
 
-		if((imageArray.length - 1) > activeImage){
-			preloadNextImage = new Image();
-			preloadNextImage.src = setImageUrl(imageArray[activeImage + 1][0]);
+		// preload nextthumb from left to right
+		if(xmlDoc[curImgId].getElementsByTagName('nextthumb').length > 0)
+		{
+			for(var i = 0; i < xmlDoc[curImgId].getElementsByTagName('nextthumb').length; i++)
+			{
+				var thumbId = xmlDoc[curImgId].getElementsByTagName('nextthumb').item(i).firstChild.data;
+				this.loadImageXml(thumbId);
+			}
 		}
-		if(activeImage > 0){
-			preloadPrevImage = new Image();
-			preloadPrevImage.src = setImageUrl(imageArray[activeImage - 1][0]);
+
+		// preload prevthumb from right to left
+		if(xmlDoc[curImgId].getElementsByTagName('prevthumb').length > 0)
+		{
+			for(var i = xmlDoc[curImgId].getElementsByTagName('prevthumb').length-1; i >= 0; i--)
+			{
+				var thumbId = xmlDoc[curImgId].getElementsByTagName('prevthumb').item(i).firstChild.data;
+				this.loadImageXml(thumbId);
+			}
 		}
+	},
 	
+	/**
+	 * preloadImage()
+	 * 
+	 * will be called after getting the xml data 
+	 */
+	preloadImage: function(imgId) {
+		if(! preloadImageFinished[imgId] )
+		{
+			/**
+			 * set image width and height
+			 */
+				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 currentImgSrc = imageSrc + imgId + '&max_width=' + imgWidth + '&max_height=' + imgHeight;
+	
+			/**
+			 * preload image
+			 */
+			preloadImage[imgId] = new Image();
+	
+			preloadImage[imgId].onload=function(){
+				myLinImage.preloadImageFinished(imgId);
+			}
+			preloadImage[imgId].src = currentImgSrc;
+		}
+	},
+	
+	preloadImageFinished: function(imgId) {
+		new Effect.Appear('thumb'+imgId, { duration: 0.5, from: 0.5, to: 1.0 });
+		preloadImageFinished[imgId] = true;
 	}
 }
 
@@ -309,7 +401,7 @@
 		$('divmeta').style.left = $('mainImage').offsetLeft + 50;	
 
 		new Effect.Appear('divmeta', { duration: 0.5 });	//, from: 0.0, to: 1.0
-		new Effect.Fade('divimage', { duration: 0.5, from: 1.0, to: 0.2 });
+		new Effect.Fade('divimage', { duration: 1, from: 1.0, to: 0.2 });
 		
 		$('hrefinfolinks').style.color = colorinfonotactive;
 	}
@@ -317,8 +409,8 @@
 	{
 		showhide = 'hide';
 		
-		new Effect.Fade('divmeta', { duration: 0.5 });	// , from: 1.0, to: 0.0
-		new Effect.Appear('divimage', { duration: 0.5, from: 0.3, to: 1.0 });
+		new Effect.Fade('divmeta', { duration: 1 });	// , from: 1.0, to: 0.0
+		new Effect.Appear('divimage', { duration: 0.5, from: 0.2, to: 1.0 });
 
 		$('hrefinfolinks').style.color = colorinfoactive;
 	}
@@ -393,7 +485,9 @@
 function initLinImage()
 {
 	setInfoColors();
-	var myLinImage = new LinImage();
-	myLinImage.loadStartData();
+	myLinImage = new LinImage();
+	myLinImage.loadImage(startImgId);
+	window.onresize = myLinImage.setImageInfoLink;
+	
 }
 Event.observe(window, 'load', initLinImage, false);

Modified: trunk/linpha2/templates/default/css/view_img.css
===================================================================
--- trunk/linpha2/templates/default/css/view_img.css	2006-10-07 18:12:35 UTC (rev 4576)
+++ trunk/linpha2/templates/default/css/view_img.css	2006-10-08 15:42:12 UTC (rev 4577)
@@ -8,14 +8,20 @@
 	margin: 10px 10px 10px 10px;
 }
 #main {
-	text-align: center;
+/*	text-align: center;*/
 	position: relative;
 }
 
 #divimage {
+	text-align: center;
 }
 #mainimage {
 }
+#divloading {
+	position: absolute;
+	left: 50%;
+	top: 20px;
+}
 
 
 #divmeta {
@@ -26,6 +32,8 @@
 }
 #divinfolinks {
 	position: absolute;
+	text-align: right;
+	width: 50px;	/* hardcoded in LinImage.js setImageInfoLink() change to!*/
 }
 
 
@@ -38,7 +46,7 @@
 
 	#thumbnavi {
 		position: relative;
-		height: 120px;
+		height: 80px;
 		font-size: 0.5em;
 		text-align: center;
 	}
@@ -58,8 +66,8 @@
 	.thumbnavi_prevnextthumb {
 		/*border: 1px solid #000000;*/
 		float: left;
-		width: 90px;
-		height: 90px;
+		width: 80px;
+		height: 80px;
 		margin: 2px;
 	}
 	

Modified: trunk/linpha2/templates/default/view_img.html.php
===================================================================
--- trunk/linpha2/templates/default/view_img.html.php	2006-10-07 18:12:35 UTC (rev 4576)
+++ trunk/linpha2/templates/default/view_img.html.php	2006-10-08 15:42:12 UTC (rev 4577)
@@ -25,20 +25,20 @@
 		<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="main">
+		<div id="divloading">
+			<img src="<?php echo LINPHA_DIR; ?>/lib/classes/lightbox/images/loading.gif">
+		</div>
+
 		<noscript><h1><?php echo i18n("If you have just disabled Javascript, you will need to restart your browser."); ?></h1></noscript>
 
 		<!-- show image -->
 		<div id="divimage">
-			<img id="mainImage">
+			<img id="mainImage" style="display: none;">
 		</div>
 
-		<div id="divloading">
-			<img src="<?php echo LINPHA_DIR; ?>/lib/classes/lightbox/images/loading.gif">
-		</div>
-
 		<div id="divmeta" style="display: none;"></div>
 		
-		<div id="divinfolinks" style="color: grey;">
+		<div id="divinfolinks" style="display: none; color: grey;">
 		<a id="hrefinfolinks" href="javascript:showImgInfo()" style="color: black;">Info</a>
 		</div>
 
@@ -81,4 +81,4 @@
 	<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>
\ No newline at end of file


This was sent by the SourceForge.net collaborative development platform, the world's largest Open Source development site.