[Linpha-cvs] SF.net SVN: linpha: [4904] trunk/linpha2/lib/js
Status: Inactive
Brought to you by:
bzrudi
Menu
▾
▴
[Linpha-cvs] SF.net SVN: linpha: [4904] trunk/linpha2/lib/js
|
From: <fan...@us...> - 2008-03-16 08:51:50
|
Revision: 4904
http://linpha.svn.sourceforge.net/linpha/?rev=4904&view=rev
Author: fangehrn
Date: 2008-03-16 01:51:49 -0700 (Sun, 16 Mar 2008)
Log Message:
-----------
2008-03-15 flo
* fixed some IE bugs
everything should now work fine on firefox/opera/IE
2008-03-13 flo
* finished fullscreen/slideshow/navigation
2008-03-09 flo
* re-design thumb and image view
Modified Paths:
--------------
trunk/linpha2/lib/js/LinYUIAlbumNavigation.js
Added Paths:
-----------
trunk/linpha2/lib/js/LinYUIAlbum.js
trunk/linpha2/lib/js/LinYUIGlobal.js
trunk/linpha2/lib/js/LinYUIPage.js
Added: trunk/linpha2/lib/js/LinYUIAlbum.js
===================================================================
--- trunk/linpha2/lib/js/LinYUIAlbum.js (rev 0)
+++ trunk/linpha2/lib/js/LinYUIAlbum.js 2008-03-16 08:51:49 UTC (rev 4904)
@@ -0,0 +1,549 @@
+YAHOO.namespace("linpha");
+
+// linpha.Album
+YAHOO.linpha.Album = function() {
+ YAHOO.log('linpha.Album()');
+
+ this.currentIndex = null;
+ this.currentFileType = null;
+
+ this.mode = 'init';
+ //this.initHistoryManager();
+ this.album = null;
+
+ this.fullscreenActive = false;
+ this.fullscreenInitialised = false;
+ this.fullscreenOldMaxWidth, this.fullscreenOldMaxHeight, this.previousBodyOverflow;
+ this.slideshowActive = false;
+ this.ssCurrentTimerID;
+ this.ssCurrentDelay = 5000;
+ this.ssRandom = false;
+ this.ssLoop = false;
+
+ this.preloadImageSrc = new Array(); // image array, will contain a lot of preloaded images
+ this.finishedPreloadedImages = new Array(); // set to true after preload completed
+
+ this.TabView = null;
+ this.Tabs = new Array();
+ this.activeTabLabel = null;
+};
+
+// initHistoryManager()
+YAHOO.linpha.Album.prototype.initHistoryManager = function() {
+
+ try {
+ var myModuleBookmarkedState = YAHOO.util.History.getBookmarkedState("linphaViewer");
+ var myModuleInitialState = myModuleBookmarkedState || "album";
+ YAHOO.util.History.register("linphaViewer", myModuleInitialState, this.historyChangeHandler); //, this, true
+ YAHOO.util.History.onReady(function () {
+ myLinAlbum.historyChangeHandler( YAHOO.util.History.getCurrentState("linphaViewer") );
+ });
+ YAHOO.util.History.initialize("yui-history-field", "yui-history-iframe");
+ YAHOO.log("Successfully initialized history manager");
+ }
+ catch(e)
+ {
+ YAHOO.log("Error initializing history manager");
+ myLinAlbum.showAlbum(); // opera fallback
+ }
+};
+
+// historyChangeHandler()
+YAHOO.linpha.Album.prototype.historyChangeHandler = function(state) {
+ YAHOO.log("historyChangeHandler() " + state);
+
+ if (state=="album") {
+ myLinAlbum.showAlbum();
+ } else {
+ var parts = state.split('_');
+ if (parts[0] == "image") {
+ YAHOO.log("navigate to image: " + parts[1]);
+ myLinAlbum.changeImage( parseInt(parts[1]) );
+ } else {
+ YAHOO.log("Error: Unknown bookmark state");
+ }
+ }
+};
+
+// loadAlbum()
+YAHOO.linpha.Album.prototype.loadAlbum = function() {
+ YAHOO.log('linpha.Album.loadAlbum()');
+
+ //YAHOO.util.Dom.setStyle('linDivNav', "display", "block");
+ YAHOO.util.Dom.setStyle('linDivImage', "display", "none");
+ YAHOO.util.Dom.setStyle('linDivThumbs', "display", "none");
+ YAHOO.util.Dom.setStyle('linDivTabs', "display", "none");
+
+ myLinGlobal.asyncRequest('GET', 'album.txt' /*linUrlBase + '&loadAlbum'*/, this.storeAlbum, this, null);
+
+};
+
+// storeAlbum()
+YAHOO.linpha.Album.prototype.storeAlbum = function(t) {
+ try {
+ this.album = YAHOO.lang.JSON.parse(t.responseText);
+
+ /**
+ * translate linId to index
+ * i have no better idea at the moment (its already late...)
+ * whats the best solution to store the array
+ * we need access with the index (for prev/next/first/last/image x of y)
+ * and we need access with the id (for history manager/open image directly with id)
+ *
+ * benchmark is not bad: 0ms for 100000 iterations
+ */
+ this.ThumbIds = [];
+ for(index in this.album.Thumbs)
+ {
+ this.ThumbIds[ this.album.Thumbs[index].id ] = parseInt(index);
+ this.preloadImageSrc[ this.album.Thumbs[index].id ] = new Array(); // init two dimensional array for easy access
+ this.finishedPreloadedImages[ this.album.Thumbs[index].id ] = new Array(); // init two dimensional array for easy access
+ }
+
+ this.initHistoryManager(); // this will call showAlbum() or showImage()
+ //this.showAlbum();
+ }
+ catch (e) {
+ alert("Error loading album (" + e + ")");
+ }
+}
+
+// openAlbum()
+YAHOO.linpha.Album.prototype.openAlbum = function() {
+ try {
+ YAHOO.util.History.navigate("linphaViewer", "album");
+ } catch (e) {
+ this.showAlbum(); // opera fallback
+ }
+};
+
+// showAlbum()
+YAHOO.linpha.Album.prototype.showAlbum = function(t) {
+
+ YAHOO.log("showAlbum()");
+
+ YAHOO.util.Dom.setStyle('linDivThumbs', "display", "none");
+ myLinPage.setTitle(this.album.TitleUrl);
+
+
+ htmlstr = [];
+ idx = 0;
+ for (imgIndex in this.album.Thumbs)
+ {
+ htmlstr[idx++] = '<div id="linDivThumb'+imgIndex+'" class="linDivThumb"><a href="javascript:myLinAlbum.openImage(';
+ htmlstr[idx++] = this.album.Thumbs[imgIndex].id + ')"><img src="' + linThumbSrc + this.album.Thumbs[imgIndex].id;
+ htmlstr[idx++] = '" alt="' + this.album.Thumbs[imgIndex].title;
+ htmlstr[idx++] = '" title="' + this.album.Thumbs[imgIndex].title + '" class="linImgThumb" /></a></div>';
+ }
+ htmlstr[idx++] = '<div style="clear: both;"></div>'; // needed by IE
+ document.getElementById('linDivThumbs').innerHTML = htmlstr.join("");
+
+ YAHOO.util.Dom.setStyle('linDivTabs', "display", "none");
+ YAHOO.util.Dom.setStyle('linDivImage', "display", "none");
+ //YAHOO.util.Dom.setStyle('linDivNav', "display", "block");
+
+
+ myLinPage.setResizeMode('thumb');
+
+ if (this.mode == 'image') {
+ (new YAHOO.util.Element('linDivThumbs')).removeClass("linDivThumbsSmall"); // would give an warning if the class does not exist
+ }
+ this.mode = 'thumb';
+
+ YAHOO.util.Dom.setStyle('linDivThumbs', "display", "block");
+};
+
+// openImage()
+YAHOO.linpha.Album.prototype.openImage = function(imgId) {
+ try {
+ YAHOO.util.History.navigate("linphaViewer", "image_"+imgId);
+ } catch (e) {
+ this.changeImage(imgId); // opera fallback
+ }
+};
+
+// changeImage()
+YAHOO.linpha.Album.prototype.changeImage = function(imgId) {
+
+ YAHOO.log("showImage(): " + imgId);
+
+ linIdCurrent = imgId;
+ this.currentIndex = this.ThumbIds[imgId];
+ this.currentFileType = this.album.Thumbs[this.currentIndex].type;
+
+
+ // handle direct entry
+ if (this.mode == 'init') {
+ this.showAlbum(); // load thumbnails (will set this.mode = 'thumb')
+ }
+
+
+ /**
+ * set title and thumbnail border
+ */
+ // set thumbnail border
+ if (this.prevSelection != 'undefined') {
+ (new YAHOO.util.Element('linDivThumb'+this.prevSelection)).removeClass("linImgThumbActive");
+ this.prevSelection = this.currentIndex;
+ }
+ (new YAHOO.util.Element('linDivThumb'+this.currentIndex)).addClass("linImgThumbActive");
+
+ myLinPage.setTitle(this.album.TitleUrl + ' > <a href="javascript:myLinAlbum.openImage('+imgId+')">'
+ + this.album.Thumbs[this.currentIndex].title + '</a>' );
+
+ /**
+ * hide elements
+ */
+ //YAHOO.util.Dom.setStyle('linDivImgInfo', "display", "none");
+ YAHOO.util.Dom.setStyle('linHrefPanoLink', "display", "none");
+ YAHOO.util.Dom.setStyle('linDivVideoInfo', "display", "none");
+ YAHOO.util.Dom.setStyle('linDivOtherInfo', "display", "none");
+
+ // handle coming from thumb (or init)
+ if (this.mode != 'image') {
+
+ YAHOO.util.Dom.setStyle('linDivDescription', "display", "none");
+ YAHOO.util.Dom.setStyle('linImgMainImage', "display", "none");
+
+ YAHOO.util.Dom.setStyle('linDivThumbs', "display", "none");
+ this.mode = 'image';
+
+ //YAHOO.util.Dom.setStyle('linDivThumbs', "display", "none");
+ (new YAHOO.util.Element('linDivThumbs')).addClass("linDivThumbsSmall");
+ //YAHOO.util.Dom.setStyle('linDivNav', "display", "none");
+
+ YAHOO.util.Dom.setStyle('linDivImage', "display", "block");
+ YAHOO.util.Dom.setStyle('linDivThumbs', "display", "block"); // its good to hide thumbnails during calculation to prevent flicker when coming from thumbnails
+ YAHOO.util.Dom.setStyle('linDivTabs', "display", "block");
+
+ myLinPage.setResizeMode('image'); // if possible this should be at the end to know if have scrollbars or not (if necessary we could also add enough padding)
+ }
+ else
+ {
+ /*if(! this.fullscreenActive)
+ {*/
+ YAHOO.util.Dom.setStyle('linDivMainImage', "height",
+ (document.getElementById('linImgMainImage').offsetHeight + document.getElementById('linDivDescription').offsetHeight)+'px'
+ );
+ /*}*/
+
+ //document.getElementById('linDivDescription').innerHTML = ' ';
+ YAHOO.util.Dom.setStyle('linDivDescription', "display", "none"); // do not hide whole block to keep the right height
+ //YAHOO.util.Dom.setStyle('linDivDescription', "height", document.getElementById('linDivDescription').offsetHeight + 'px');
+ //YAHOO.util.Dom.setStyle('linDivDescription', "visibility", "hidden");
+
+ YAHOO.util.Dom.setStyle('linImgMainImage', "display", "none");
+ }
+
+
+ /**
+ * prepare image
+ */
+ switch( this.currentFileType )
+ {
+ case 1: // image
+
+ /**
+ * calc image width and height
+ */
+ imgDim = myLinPage.scaleToFit( this.album.Thumbs[this.currentIndex].w, this.album.Thumbs[this.currentIndex].h,
+ myLinPage.maxImgWidth, myLinPage.maxImgHeight, true);
+
+ if (!this.finishedPreloadedImages[linIdCurrent][imgDim[0]])
+ {
+ YAHOO.util.Dom.setStyle('linDivLoading', "display", "block");
+ }
+
+
+ /**
+ * preload image
+ */
+ var currentImgSrc = linImageSrc + this.album.Thumbs[this.currentIndex].id + '&width=' + imgDim[0] + '&height=' + imgDim[1];
+ imgPreloader = new Image();
+
+ /**
+ * once image is preloaded, resize image container
+ *
+ * pay attention with the other image preloader!
+ * if imgWidth and imgWidth was not set with trailing 'var' it got overlapping with the other variables
+ * and this caused the image not resized correctly in resizeImageContainer() !!!
+ */
+ imgPreloader.onload=function(){
+ myLinAlbum.finishedPreloadedImages[linIdCurrent][imgDim[0]] = true;
+ document.getElementById('linImgMainImage').src = currentImgSrc;
+ myLinAlbum.showImage(imgDim[0], imgDim[1]);
+ }
+ imgPreloader.src = currentImgSrc;
+ break;
+
+ case 2: // video
+
+ document.getElementById('linImgMainImage').src = linThumbSrc + this.album.Thumbs[this.currentIndex].id;
+ this.showImage(0, 0);
+ break;
+
+ case 0: // others
+
+ document.getElementById('linImgMainImage').src = linThumbSrc + this.album.Thumbs[this.currentIndex].id;
+ this.showImage(0, 0);
+ break;
+ }
+};
+
+// resizeImageContainer()
+YAHOO.linpha.Album.prototype.resizeImageContainer = function(imgWidth, imgHeight, comingFromEvent) {
+
+ if (this.currentFileType != 1)
+ {
+ imgWidth = linTnSizeOther;
+ imgHeight = linTnSizeOther;
+ }
+
+ YAHOO.util.Dom.setStyle('linDivMainImage', "width", imgWidth + 'px');
+
+ if (comingFromEvent) {
+ YAHOO.util.Dom.setStyle('linDivMainImage', "height", 'auto');
+ } else {
+ YAHOO.util.Dom.setStyle('linDivMainImage', "height", imgHeight + 'px'); // it will be reset to 'auto' after showing the image
+ }
+ YAHOO.util.Dom.setStyle('linDivLoading', "display", "none");
+ YAHOO.util.Dom.setStyle('linImgMainImage', "width", imgWidth + 'px');
+ YAHOO.util.Dom.setStyle('linImgMainImage', "height", imgHeight + 'px');
+}
+
+// showImage()
+YAHOO.linpha.Album.prototype.showImage = function(imgWidth, imgHeight) {
+
+ var imgIndex = this.currentIndex;
+
+ this.resizeImageContainer( imgWidth, imgHeight, false );
+
+ switch( this.currentFileType )
+ {
+ case 1: // image
+ //YAHOO.util.Dom.setStyle('linDivImgInfo', "display", "block");
+ break;
+ case 2: // video
+ YAHOO.util.Dom.setStyle('linDivVideoInfo', "display", "block");
+ break;
+ default: // other
+ YAHOO.util.Dom.setStyle('linDivOtherInfo', "display", "block");
+ break;
+ }
+
+ YAHOO.util.Dom.setStyle('linImgMainImage', "display", "block");
+ /*if (!this.fullscreenActive)
+ {*/
+ //$('linDivMainimage').style.height = $('linImgMainimage').style.height;
+ YAHOO.util.Dom.setStyle('linDivMainImage', "height", 'auto'); // reset to correct height to prevent trouble if image is bigger or smaller
+ /*}*/
+
+ document.getElementById('linDivDescription').innerHTML = this.album.Thumbs[imgIndex].descr;
+ //YAHOO.util.Dom.setStyle('linDivDescription', "height", "auto");
+ //YAHOO.util.Dom.setStyle('linDivDescription', "visibility", "visible");
+ YAHOO.util.Dom.setStyle('linDivDescription', "display", "block");
+
+
+ // disable buttons when end/start reached
+ if (this.fullscreenActive) {
+ if (this.album.Thumbs[imgIndex+1]) {
+ //YAHOO.util.Dom.setStyle('linSsImgNext', "opacity", 1); does not work correctly because apear effect just overwrites it again
+ YAHOO.util.Dom.setStyle('linSsImgLast', "opacity", 1);
+ } else {
+ //YAHOO.util.Dom.setStyle('linSsImgNext', "opacity", 0.7);
+ YAHOO.util.Dom.setStyle('linSsImgLast', "opacity", 0.7);
+ }
+
+ if (this.album.Thumbs[imgIndex-1]) {
+ //YAHOO.util.Dom.setStyle('linSsImgPrev', "opacity", 1);
+ YAHOO.util.Dom.setStyle('linSsImgFirst', "opacity", 1);
+ } else {
+ //YAHOO.util.Dom.setStyle('linSsImgPrev', "opacity", 0.7);
+ YAHOO.util.Dom.setStyle('linSsImgFirst', "opacity", 0.7);
+ }
+
+ }
+
+ /**
+ * remove old tabs
+ */
+ if (this.TabView != null)
+ {
+ this.activeTabLabel = this.TabView.get('activeTab').get('label');
+
+ document.getElementById('linUlTabNav').innerHTML = '';
+ document.getElementById('linDivTabContent').innerHTML = '';
+ this.Tabs = [];
+ /* when using removeTab and the active tab gets removed, another the next one gets active and will load data from the server
+ for (tabIndex in this.Tabs) {
+ this.TabView.removeTab( this.Tabs[tabIndex] );
+ }
+ this.TabView = null;*/
+ }
+
+ // add new tabs
+ idx = 0;
+
+ for (tabIndex in linTabs) {
+ linTabs[tabIndex].dataSrc = LINPHA_LINK+'linCat=image&linTab='+tabIndex+'&linId='+linIdCurrent;
+
+ // restore previous selection
+ if (this.activeTabLabel != null)
+ {
+ if (linTabs[tabIndex].label == this.activeTabLabel) {
+ linTabs[tabIndex].active = true;
+ } else {
+ linTabs[tabIndex].active = false;
+ }
+ }
+ }
+
+ this.indexCommentTab = idx; // used by saveComment()
+ this.Tabs[idx++] = new YAHOO.widget.Tab(linTabs['comments']);
+
+ switch( this.currentFileType )
+ {
+ case 1: // image
+ this.Tabs[idx++] = new YAHOO.widget.Tab(linTabs['imageInfo']);
+
+ if (this.album.Thumbs[imgIndex].opt != null && this.album.Thumbs[imgIndex].opt.gps) {
+ this.Tabs[idx++] = new YAHOO.widget.Tab(linTabs['gps']);
+ }
+
+ if (linEXIFEnabled) {
+ this.Tabs[idx++] = new YAHOO.widget.Tab(linTabs['exif']);
+ }
+
+ if (linITPCXMPEnabled) {
+ this.Tabs[idx++] = new YAHOO.widget.Tab(linTabs['iptcXmp']);
+ }
+
+ if (linPermMetaEdit) {
+ this.Tabs[idx++] = new YAHOO.widget.Tab(linTabs['editMeta']);
+
+ if (linITPCXMPEnabled) {
+ this.Tabs[idx++] = new YAHOO.widget.Tab(linTabs['editIptcXmp']);
+ }
+ }
+ break;
+ case 2: // video
+ this.Tabs[idx++] = new YAHOO.widget.Tab(linTabs['videoInfo']);
+ if (linPermMetaEdit) {
+ this.Tabs[idx++] = new YAHOO.widget.Tab(linTabs['editMeta']);
+ }
+ break;
+ default: // other
+ if (linPermMetaEdit) {
+ this.Tabs[idx++] = new YAHOO.widget.Tab(linTabs['editMeta']);
+ }
+ break;
+ }
+
+ this.TabView = new YAHOO.widget.TabView("linDivTabs");
+ for (tabIndex in this.Tabs) {
+ this.TabView.addTab( this.Tabs[tabIndex] );
+ }
+
+ for(i = 1; i <= linPreloadImages; i++)
+ {
+ if ( this.album.Thumbs[imgIndex+i] )
+ this.preloadImage(this.album.Thumbs[imgIndex+i].id);
+ }
+
+ this.enableKeyboardNav();
+};
+
+// preloadImage()
+YAHOO.linpha.Album.prototype.preloadImage = function(imgId) {
+
+ YAHOO.log('preloadImage(): ' + imgId);
+
+ var imgIndex = this.ThumbIds[imgId];
+
+ if (this.album.Thumbs[imgIndex].type == 1)
+ {
+ /**
+ * set image width and height
+ */
+ var sizeArray = myLinPage.scaleToFit(this.album.Thumbs[imgIndex].w, this.album.Thumbs[imgIndex].h, myLinPage.maxImgWidth, myLinPage.maxImgHeight, true);
+ var imgWidth = sizeArray[0];
+ var imgHeight = sizeArray[1];
+
+ if (!this.finishedPreloadedImages[imgId][imgWidth] )
+ {
+ /**
+ * preload image
+ */
+ this.preloadImageSrc[imgId][imgWidth] = new Image();
+
+ this.preloadImageSrc[imgId][imgWidth].onload=function(){
+ myLinAlbum.preloadImageFinished(imgId, imgWidth);
+ }
+ this.preloadImageSrc[imgId][imgWidth].src = linImageSrc + imgId + '&width=' + imgWidth + '&height=' + imgHeight;
+ }
+ }
+};
+
+// preloadImageFinished()
+YAHOO.linpha.Album.prototype.preloadImageFinished = function(imgId, imgWidth) {
+
+ YAHOO.log('preloadImageFinished(): ' + imgId);
+
+ this.finishedPreloadedImages[imgId][imgWidth] = true;
+
+ //if( $('thumb'+imgId) ) // maybe its not here anymore
+ //{
+ // new Effect.Appear('thumb'+imgId, { duration: 0.5, from: 0.5, to: 1.0 });
+ //}
+
+ //YAHOO.util.Dom.setStyle('linDivThumb' + this.ThumbIds[imgId], "opacity", 0.75);
+ if (linUseEffects) {
+ (new YAHOO.util.Anim('linDivThumb' + this.ThumbIds[imgId], {opacity: {from: 0.1, to: 1}}, 1)).animate();
+ }
+};
+
+// saveComment(formElem)
+YAHOO.linpha.Album.prototype.saveComment = function(formElem) {
+
+ YAHOO.util.Connect.setForm(formElem);
+ myLinGlobal.asyncRequest("POST", LINPHA_LINK+'linCat=image&linTab=comments&linId='+linIdCurrent, this.saveCommentFinish, this, null);
+
+ /*this.Tabs[this.indexCommentTab].set('cacheData', false);
+ this.Tabs[this.indexCommentTab].set('loadMethod', "POST");
+ this.Tabs[this.indexCommentTab].set('activeIndex', this.indexCommentTab);
+ this.Tabs[this.indexCommentTab].set('cacheData', true);
+ this.Tabs[this.indexCommentTab].set('loadMethod', "GET");*/
+};
+
+// saveCommentFinish()
+YAHOO.linpha.Album.prototype.saveCommentFinish = function(t) {
+
+ this.Tabs[this.indexCommentTab].set('content', t.responseText);
+};
+
+// openTextarea()
+YAHOO.linpha.Album.prototype.openTextarea = function() {
+ //Element.show('linDivAddCommentTextarea');
+ //Element.hide('linDivAddCommentText');
+ YAHOO.util.Dom.setStyle('linDivAddCommentText', 'display', 'none');
+ YAHOO.util.Dom.setStyle('linDivAddCommentTextarea', 'display', 'block');
+
+ document.getElementById('linInputAddCommentTextarea').value = document.getElementById('linInputAddCommentText').value;
+};
+
+// closeTextarea()
+YAHOO.linpha.Album.prototype.closeTextarea = function() {
+ //Element.show('linDivAddCommentTextarea');
+ //Element.hide('linDivAddCommentText');
+ YAHOO.util.Dom.setStyle('linDivAddCommentText', 'display', 'block');
+ YAHOO.util.Dom.setStyle('linDivAddCommentTextarea', 'display', 'none');
+
+ document.getElementById('linInputAddCommentText').value = document.getElementById('linInputAddCommentTextarea').value;
+};
+
+
+myLinPage.enableOnResize('thumb');
+
+var myLinAlbum = new YAHOO.linpha.Album();
+myLinAlbum.loadAlbum();
+
Modified: trunk/linpha2/lib/js/LinYUIAlbumNavigation.js
===================================================================
--- trunk/linpha2/lib/js/LinYUIAlbumNavigation.js 2008-03-16 08:51:31 UTC (rev 4903)
+++ trunk/linpha2/lib/js/LinYUIAlbumNavigation.js 2008-03-16 08:51:49 UTC (rev 4904)
@@ -1,1186 +1,511 @@
-/**
- * class and global definitions
- */
-var LinImage = Class.create();
-var myLinImage;
-
-LinImage.prototype = {
+// movePrev()
+YAHOO.linpha.Album.prototype.movePrev = function() {
- /**
- * initialize()
- *
- * Constructor runs on completion of the DOM loading.
- */
- initialize: function()
+ if (this.slideshowActive)
{
- /*this.imgInfoColorNotActive = $('linDivInfoLink').style.color;
- this.imgInfoColorActive = $('linHrefInfoLink').style.color;*/
- this.imgInfoShowHide = 'hide';
-
-
- this.fullscreenActive = false;
- this.fullscreenOldMaxWidth, this.fullscreenOldMaxHeight, this.previousBodyOverflow;
- this.slideshowActive = false;
- this.ssCurrentTimerID;
- this.ssCurrentDelay = 5000;
- this.ssRandom = false;
- this.ssLoop = false;
-
- this.xmlDoc = new Array();
- this.nextThumbs = new Array();
- this.prevThumbs = new Array();
- this.preloadImageSrc = new Array(); // image array, will contain a lot of preloaded images
- this.finishedPreloadedImages = new Array(); // set to true after preload completed
- this.preloadXmlFinished = new Array();
-
- this.currentFileType; // 1 = image, 2 = video, 3 = others
-
- this.curLocationHash;
- //this.timerResize;
- },
-
-
- // -----------------------------------------------------------------------------------
- // functions to load xml data of images
- // -----------------------------------------------------------------------------------
-
- loadImage: function(imgId) {
- if(IdCurrent != imgId)
- {
- IdCurrent = imgId;
- //myLinGlobal.menuNeedsUpdating = true; // IdCurrent changed, update menu on next hover of the menu
- location.hash = 'idCurrent='+IdCurrent;
- }
-
- this.curLocationHash = location.hash; // update current Hash, this value is periodically checked to reload the image if neccessary
-
- // do not load the data again if it is already cached
- if(this.preloadXmlFinished[imgId] && typeof this.xmlDoc[imgId] != "undefined" ) // use typeof to work in IE
- {
- this.changeImage();
- }
- else
- {
- this.loadImageXml(imgId);
- }
- },
+ clearTimeout(this.ssCurrentTimerID);
+ }
- loadImageXml: function(imgId) {
- myLinGlobal.AjaxPost(linUrlBase + '&linId=' + imgId + '&xml', '', myLinImage.loadImageContinue);
- },
-
- loadImageContinue: function(t) {
- var loadedimgid = t.responseXML.documentElement.getElementsByTagName('imgid').item(0).firstChild.data;
-
- // save xml data
- myLinImage.xmlDoc[loadedimgid] = t.responseXML.documentElement;
- myLinImage.preloadXmlFinished[loadedimgid] = true;
-
- if( loadedimgid == IdCurrent ) // coming from loadImage()
- {
- myLinImage.changeImage();
+ if (this.album.Thumbs[this.currentIndex-1])
+ {
+ if (this.fullscreenActive && linUseEffects) {
+ (new YAHOO.util.Anim('linSsImgPrev', {opacity: {from: 0.7, to: 1}}, 0.5)).animate();
+ //Element.setOpacity('linSsImgPrev',0.7);
+ //new Effect.Appear('linSsImgPrev', { duration: 0.5, from: 0.7, to: 1.0 });
}
- else // coming from preloadImage()
+ myLinAlbum.openImage( this.album.Thumbs[this.currentIndex-1].id );
+
+ if (this.slideshowActive)
{
- myLinImage.preloadImage(loadedimgid);
- }
- },
-
-
- // -----------------------------------------------------------------------------------
- // Navigation functions
- // -----------------------------------------------------------------------------------
-
- movePrev: function() {
- if( this.slideshowActive )
- {
clearTimeout(this.ssCurrentTimerID);
+ this.ssCurrentTimerID = setTimeout("myLinAlbum.slideshowPlay()", this.ssCurrentDelay);
}
+ }
+ else // end reached, do nothing but enable keyboard navigation again
+ {
+ myLinAlbum.enableKeyboardNav();
+ }
+
+ if (this.slideshowActive)
+ {
+ this.ssCurrentTimerID = setTimeout("myLinAlbum.slideshowPlay()", this.ssCurrentDelay);
+ }
+};
- if(this.prevThumbs[ this.prevThumbs.length - 1 ])
- {
- Element.setOpacity('linSsImgPrev',0.7);
- new Effect.Appear('linSsImgPrev', { duration: 0.5, from: 0.7, to: 1.0 });
- myLinImage.loadImage(this.prevThumbs[ this.prevThumbs.length - 1 ]);
-
- if( this.slideshowActive )
- {
- clearTimeout(this.ssCurrentTimerID);
- this.ssCurrentTimerID = setTimeout("myLinImage.slideshowPlay()", this.ssCurrentDelay);
- }
- }
- else // end reached, do nothing but enable keyboard navigation again
- {
- myLinImage.enableKeyboardNav();
- }
+// moveNext()
+YAHOO.linpha.Album.prototype.moveNext = function() {
- if( this.slideshowActive )
- {
- this.ssCurrentTimerID = setTimeout("myLinImage.slideshowPlay()", this.ssCurrentDelay);
- }
- },
- moveNext: function() {
- if( this.slideshowActive )
- {
- clearTimeout(this.ssCurrentTimerID);
- }
+ if (this.slideshowActive)
+ {
+ clearTimeout(this.ssCurrentTimerID);
+ }
+
+ if (this.ssRandom)
+ {
+ if (this.fullscreenActive && linUseEffects) {
+ (new YAHOO.util.Anim('linSsImgNext', {opacity: {from: 0.7, to: 1}}, 0.5)).animate();
+ //Element.setOpacity('linSsImgNext',0.7);
+ //new Effect.Appear('linSsImgNext', { duration: 0.5, from: 0.7, to: 1.0 });
+ }
+
+ var nextIndex = Math.round( Math.random()*myLinAlbum.album.Thumbs.length );
+ myLinAlbum.openImage( this.album.Thumbs[nextIndex].id );
+ }
+ else if (this.album.Thumbs[this.currentIndex+1])
+ {
+ if (this.fullscreenActive && linUseEffects) {
+ (new YAHOO.util.Anim('linSsImgNext', {opacity: {from: 0.7, to: 1}}, 0.5)).animate();
+ //Element.setOpacity('linSsImgNext',0.7);
+ //new Effect.Appear('linSsImgNext', { duration: 0.5, from: 0.7, to: 1.0 });
+ }
+ myLinAlbum.openImage( this.album.Thumbs[this.currentIndex+1].id );
+ }
+ else if (this.ssLoop)
+ {
+ if (this.fullscreenActive && linUseEffects) {
+ (new YAHOO.util.Anim('linSsImgNext', {opacity: {from: 0.7, to: 1}}, 0.5)).animate();
+ //Element.setOpacity('linSsImgNext',0.7);
+ //new Effect.Appear('linSsImgNext', { duration: 0.5, from: 0.7, to: 1.0 });
+ }
+ this.moveFirst();
+ }
+ else // end reached, do nothing but enable keyboard navigation again
+ {
+ myLinAlbum.enableKeyboardNav();
+ }
- if(this.nextThumbs[0])
- {
- Element.setOpacity('linSsImgNext',0.7);
- new Effect.Appear('linSsImgNext', { duration: 0.5, from: 0.7, to: 1.0 });
- myLinImage.loadImage(this.nextThumbs[0]);
- }
- else if( this.ssLoop )
- {
- Element.setOpacity('linSsImgNext',0.7);
- new Effect.Appear('linSsImgNext', { duration: 0.5, from: 0.7, to: 1.0 });
- this.moveFirst();
- }
- else // end reached, do nothing but enable keyboard navigation again
- {
- myLinImage.enableKeyboardNav();
- }
+ if (this.slideshowActive)
+ {
+ this.ssCurrentTimerID = setTimeout("myLinAlbum.slideshowPlay()", this.ssCurrentDelay);
+ }
+};
- if( this.slideshowActive )
- {
- this.ssCurrentTimerID = setTimeout("myLinImage.slideshowPlay()", this.ssCurrentDelay);
- }
- },
- moveFirst: function() {
- if( this.slideshowActive )
- {
- clearTimeout(this.ssCurrentTimerID);
- }
+// moveFirst()
+YAHOO.linpha.Album.prototype.moveFirst = function() {
- Element.setOpacity('linSsImgFirst',0.7);
- new Effect.Appear('linSsImgFirst', { duration: 0.5, from: 0.7, to: 1.0 });
- myLinImage.loadImage( firstImgId );
+ if (this.slideshowActive)
+ {
+ clearTimeout(this.ssCurrentTimerID);
+ }
- if( this.slideshowActive )
- {
- this.ssCurrentTimerID = setTimeout("myLinImage.slideshowPlay()", this.ssCurrentDelay);
- }
- },
- moveLast: function() {
- if( this.slideshowActive )
- {
- clearTimeout(this.ssCurrentTimerID);
- }
+ /*if (this.fullscreenActive && linUseEffects) {
+ (new YAHOO.util.Anim('linSsImgFirst', {opacity: {from: 0.7, to: 1}}, 0.5)).animate();
+ //Element.setOpacity('linSsImgFirst',0.7);
+ //new Effect.Appear('linSsImgFirst', { duration: 0.5, from: 0.7, to: 1.0 });
+ }*/
- Element.setOpacity('linSsImgLast',0.7);
- new Effect.Appear('linSsImgLast', { duration: 0.5, from: 0.7, to: 1.0 });
- myLinImage.loadImage( lastImgId );
+ myLinAlbum.openImage( this.album.Thumbs[0].id );
- if( this.slideshowActive )
- {
- this.ssCurrentTimerID = setTimeout("myLinImage.slideshowPlay()", this.ssCurrentDelay);
- }
- },
+ if (this.slideshowActive)
+ {
+ this.ssCurrentTimerID = setTimeout("myLinAlbum.slideshowPlay()", this.ssCurrentDelay);
+ }
+};
- // -----------------------------------------------------------------------------------
- // Change image functions
- // -----------------------------------------------------------------------------------
+// moveLast()
+YAHOO.linpha.Album.prototype.moveLast = function() {
- /**
- * changeImage()
- */
- changeImage: function() {
-
- /**
- * set height of outer div to prevent the whole page getting smaller, and if the image is loaded getting bigger again
- * but in fullscreen, we want no activities in background
- */
- if(! this.fullscreenActive) {
- $('linDivMainimage').style.height = $('linImgMainimage').style.height;
- //$('linDivMain').style.height = $('linDivMain').offsetHeight;
- //alert($('linDivMain').offsetHeight);
- }
-
- /**
- * hide elements during transition
- */
- this.hideImgInfoNow(); // hide text info link immediately
- Element.hide('linImgMainimage'); // hide mainimage while changing image to prevent flicker
- Element.hide('linDivInfoLink');
-
- this.currentFileType = this.xmlDoc[IdCurrent].getElementsByTagName('filetype').item(0).firstChild.data;
-
- switch( this.currentFileType )
- {
- case '1': // image
-
- if(! this.finishedPreloadedImages[IdCurrent] )
- {
- Element.show('linDivloading');
- }
-
- //$('linImgMainimage').style.marginLeft = 0; // restore left margin, set when viewing videos
-
- /**
- * calc image width and height
- */
- var orgWidth = this.xmlDoc[IdCurrent].getElementsByTagName('imgwidth').item(0).firstChild.data;
- var orgHeight = this.xmlDoc[IdCurrent].getElementsByTagName('imgheight').item(0).firstChild.data;
- var sizeArray = this.scaleToFit(orgWidth,orgHeight,maxImageWidth,maxImageHeight,1);
- var imgWidth = sizeArray[0];
- var imgHeight = sizeArray[1];
+ if (this.slideshowActive)
+ {
+ clearTimeout(this.ssCurrentTimerID);
+ }
- /**
- * preload image
- */
- var currentImgSrc = imageSrc + IdCurrent + '&width=' + imgWidth + '&height=' + imgHeight;
- imgPreloader = new Image();
-
- /**
- * once image is preloaded, resize image container
- *
- * pay attention with the other image preloader!
- * if imgWidth and imgWidth was not set with trailing 'var' it got overlapping with the other variables
- * and this caused the image not resized correctly in resizeImageContainer() !!!
- */
- imgPreloader.onload=function(){
- myLinImage.finishedPreloadedImages[IdCurrent] = true;
- $('linImgMainimage').src = currentImgSrc;
- myLinImage.resizeImageContainer(imgWidth, imgHeight);
- }
- imgPreloader.src = currentImgSrc;
+ /*if (this.fullscreenActive && linUseEffects) {
+ (new YAHOO.util.Anim('linSsImgLast', {opacity: {from: 0.7, to: 1}}, 0.5)).animate();
+ //Element.setOpacity('linSsImgLast',0.7);
+ //new Effect.Appear('linSsImgLast', { duration: 0.5, from: 0.7, to: 1.0 });
+ }*/
- break;
- case '2': // video
+ myLinAlbum.openImage( this.album.Thumbs [this.album.Thumbs.length-1].id );
- //$('linImgMainimage').style.marginLeft = 200;
-
- /**
- * show video thumbnail
- */
- $('linImgMainimage').src = thumbSrc + IdCurrent ;
- $('linImgMainimage').style.width = 'auto';
- $('linImgMainimage').style.height = 'auto';
+ if (this.slideshowActive)
+ {
+ this.ssCurrentTimerID = setTimeout("myLinAlbum.slideshowPlay()", this.ssCurrentDelay);
+ }
+};
- /**
- * show image and set div height
- */
- this.showImage();
- break;
- case '0': // others
- break;
- }
- },
- /**
- * resizeImageContainer()
- */
- resizeImageContainer: function( imgWidth, imgHeight) {
+// -----------------------------------------------------------------------------------
+// Slideshow functions
+// -----------------------------------------------------------------------------------
- // get current height and width
- /*this.wCur = $('linImgMainimage').offsetWidth;
- this.hCur = $('linImgMainimage').offsetHeight;
+// initFullscreen()
+YAHOO.linpha.Album.prototype.initFullscreen = function() {
- // scalars based on change from old to new
- this.xScale = ((imgWidth + (borderSize * 2)) / this.wCur) * 100;
- this.yScale = ((imgHeight + (borderSize * 2)) / this.hCur) * 100;
+ /**
+ * append the slideshow divs to the body
+ * we need to append to body to be sure to get the real fullscreen
+ * even if we are locked in another div
+ */
+ var myDiv = document.createElement("div");
+ var attrId = document.createAttribute("id");
+ attrId.nodeValue = "linDivSlideshowBody";
+ myDiv.setAttributeNode( attrId );
+ document.getElementsByTagName("body").item(0).appendChild(myDiv);
+
+ // copy html from slideshow.js.php
+ document.getElementById('linDivSlideshowBody').innerHTML = linSlideshowHtml;
- // calculate size difference between new and old image, and resize if necessary
- wDiff = (this.wCur - borderSize * 2) - imgWidth;
- hDiff = (this.hCur - borderSize * 2) - imgHeight;
+
+ /*var objBody = document.getElementsByTagName("body").item(0);
+ objBody.appendChild( Builder.node('div', {id: "linDivSlideshowOverlay", style: "display: none;"}) );
+ objBody.appendChild( Builder.node('div', {id: "linDivSlideshowImage", style: "display: none;"}) );
+ objBody.appendChild( Builder.node('div', {id: "linDivSlideshowControlsOuter", style: "display: none;"}) );*/
+
+ //$('linDivSlideshowControlsOuter').innerHTML = linSlideshowHtml;
+
+ YAHOO.util.Event.addListener('linDivSlideshowBody', "dblclick", this.fullscreenStop, this, true);
+ //YAHOO.util.Event.addListener('linDivSlideshowBody', "dblclick", myLinAlbum.fullscreenStop());
+
+ this.fullscreenInitialised = true;
+}
- if(!( hDiff == 0)){ new Effect.Scale('linImgMainimage', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
- if(!( wDiff == 0)){ new Effect.Scale('linImgMainimage', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
+// fullscreenStart()
+YAHOO.linpha.Album.prototype.fullscreenStart = function() {
- // 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);}
- }*/
-
- $('linImgMainimage').style.width = imgWidth + 'px';
- $('linImgMainimage').style.height = imgHeight + 'px';
-
+ if (!this.fullscreenInitialised)
+ {
+ this.initFullscreen();
+ }
- /*Element.setHeight('prevLink', imgHeight);
- Element.setHeight('nextLink', imgHeight);
- Element.setWidth( 'imageDataContainer', imgWidth + (borderSize * 2));*/
-
- /**
- * show panorama link
- * the only reason why do this at this point is, because this is only done on images
- * and we just know the width and height
- */
- if( imgWidth/imgHeight >= 2 || imgHeight/imgWidth >= 2 )
- {
- Element.show('linHrefPanoLink');
- }
- this.showImage();
- },
-
/**
- * showImage()
- *
- * Display image and begin preloading next images.
+ * save old values to restore if slideshow ends
*/
- showImage: function(){
- Element.hide('linDivloading');
-
- if( useEffects )
- {
- new Effect.Appear('linImgMainimage', { duration: 0.2, afterFinish: function(){ myLinImage.setImageData(); } });
- }
- else
- {
- Element.show('linImgMainimage');
- this.setImageData()
- }
+ //this.fullscreenOldMaxWidth = maxImageWidth;
+ //this.fullscreenOldMaxHeight = maxImageHeight;
- if(! this.fullscreenActive)
- {
- $('linDivMainimage').style.height = $('linImgMainimage').style.height; // reset to correct height to prevent trouble if image is bigger or smaller
- //$('linDivMain').style.height = 'auto';
- }
- },
-
/**
- * setImageData()
+ * disable scrollbars
+ * IE requires html tag, firefox and opera dont care
*/
- setImageData: function()
- {
- this.enableKeyboardNav();
-
- /**
- * set title
- */
- if( typeof $('linDivTitle') != 'undefined' )
- {
- $('linDivTitle').innerHTML = this.xmlDoc[IdCurrent].getElementsByTagName('title').item(0).firstChild.data;
- }
-
- /**
- * update the menu
- *
- * replace the image ids in the menu
- * replace( /linId=[0-9]* /g , "linId=" + IdCurrent );
- * its just an search/replace of 'linId=x' in the menu
- * its very fast (about 0 - 15ms) and its executed every time the image changes
- *
- * but only in menuMore and menuAdmin, because we have in menuLogin
- * linId='+IdCurrent, and ooh this will create very unexpected results..!!
- */
- /*if( typeof $('linMenuAdmin') != 'undefined' )
- {*/
- //$('linMenuAdmin').innerHTML = $('linMenuAdmin').innerHTML.replace( /linId=[0-9]*/g , "linId=" + IdCurrent );
- /*}*/
-
- /**
- * menuMore
- */
- /*if( typeof $('linMenuMore') != 'undefined' )
- {*/
- //$('linMenuMore').innerHTML = $('linMenuMore').innerHTML.replace( /linId=[0-9]*/g , "linId=" + IdCurrent );
-
- // replace the width and height dimensions of the view at fullscreen link
- //var orgWidth = this.xmlDoc[IdCurrent].getElementsByTagName('imgwidth').item(0).firstChild.data;
- //var orgHeight = this.xmlDoc[IdCurrent].getElementsByTagName('imgheight').item(0).firstChild.data;
- //$('linLiViewAtFullscreen').innerHTML = $('linLiViewAtFullscreen').innerHTML.replace( /width=[0-9]*/ , "width=" + orgWidth );
- //$('linLiViewAtFullscreen').innerHTML = $('linLiViewAtFullscreen').innerHTML.replace( /height=[0-9]*/ , "height=" + orgHeight );
- //$('linLiViewAtFullscreen').innerHTML = $('linLiViewAtFullscreen').innerHTML.replace( /[0-9]*x[0-9]*/ , orgWidth + "x" + orgHeight );
- /*}*/
-
- /**
- * set current thumb
- */
- $('linDivThumbnavi_Current').innerHTML = '<a href="javascript:myLinImage.loadImage(' + IdCurrent + ')"><img class="linImgThumbnavi_Current" src="' + thumbSrc + IdCurrent + '" /></a>';
+ //this.previousBodyOverflow = document.getElementsByTagName("html")[0].style.overflow;
+ this.previousHtmlCSS = document.getElementsByTagName("html")[0].style.cssText;
+ document.getElementsByTagName("html")[0].style.overflow='hidden';
- /**
- * set prev thumbs
- */
- $('linDivThumbnavi_Prev').innerHTML = '';
- this.prevThumbs = new Array();
- if(this.xmlDoc[IdCurrent].getElementsByTagName('prevthumb').length > 0)
- {
- for(var i = 0; i < this.xmlDoc[IdCurrent].getElementsByTagName('prevthumb').length; i++)
- {
- var thumbId = this.xmlDoc[IdCurrent].getElementsByTagName('prevthumb').item(i).firstChild.data;
- this.prevThumbs[i] = thumbId;
- this.setPrevNextThumb(thumbId, 'linDivThumbnavi_Prev');
- }
- }
-
- /**
- * set next thumbs
- */
- $('linDivThumbnavi_Next').innerHTML = '';
- this.nextThumbs = new Array();
- if(this.xmlDoc[IdCurrent].getElementsByTagName('nextthumb').length > 0)
- {
- for(var i = 0; i < this.xmlDoc[IdCurrent].getElementsByTagName('nextthumb').length; i++)
- {
- var thumbId = this.xmlDoc[IdCurrent].getElementsByTagName('nextthumb').item(i).firstChild.data;
- this.nextThumbs[i] = thumbId;
- this.setPrevNextThumb(thumbId, 'linDivThumbnavi_Next');
- }
- }
-
- /**
- * set meta data
- */
- $('linDivMeta').innerHTML = '';
- if(this.xmlDoc[IdCurrent].getElementsByTagName('meta').length > 0)
- {
- var table = Builder.node('table', {id: 'linTableMeta'} );
- var tbody = Builder.node('tbody');
+ if (YAHOO.env.ua.ie) { // required for width=100%
+ this.previousBodyCSS = document.getElementsByTagName("body")[0].style.cssText;
+ document.getElementsByTagName("body")[0].style.margin = 0;
+ }
- for(var i = 0; i < this.xmlDoc[IdCurrent].getElementsByTagName('meta').length; i++)
- {
- var meta = this.xmlDoc[IdCurrent].getElementsByTagName('meta').item(i);
- var metaname = meta.getElementsByTagName('name').item(0).firstChild.data;
- if(meta.getElementsByTagName('value').item(0).hasChildNodes()) { // prevent error in IE
- var metavalue = meta.getElementsByTagName('value').item(0).firstChild.data;
- } else {
- var metavalue = '';
- }
+ /**
+ * steal the mainimage
+ */
+ YAHOO.util.Dom.setStyle('linDivThumbs', "visibility", "hidden");
+ YAHOO.util.Dom.setStyle('linDivMainImage', "visibility", "hidden");
- var tr = Builder.node('tr');
- var tdleft = Builder.node('td', {className: 'linTdMetaLeftColumn'}, metaname );
- var tdright = Builder.node('td', metavalue );
+ document.getElementById('linDivMainImage').id = 'linDivMainImageNormal';
+ document.getElementById('linDivLoading').id = 'linDivLoadingNormal';
+ document.getElementById('linImgMainImage').id = 'linImgMainImageNormal';
+ document.getElementById('linDivDescription').id = 'linDivDescriptionNormal';
+
+ document.getElementById('linDivMainImageSlideshow').id = 'linDivMainImage';
+ document.getElementById('linDivLoadingSlideshow').id = 'linDivLoading';
+ document.getElementById('linImgMainImageSlideshow').id = 'linImgMainImage';
+ document.getElementById('linDivDescriptionSlideshow').id = 'linDivDescription';
- tr.appendChild(tdleft);
- tr.appendChild(tdright);
- tbody.appendChild(tr);
- }
+ //$('linDivMainimage').innerHTML = '';
+ //$('linDivSlideshowImage').innerHTML = '<img id="linImgMainimage" style="display: none;" class="linImgSlideshow">';
- table.appendChild(tbody);
-
- $('linDivMeta').appendChild(table);
- }
-
- /**
- * file type specific meta data stuff
- */
- switch( this.currentFileType )
- {
- case '1': // image
- this.setImageInfoLink(); // show the "info" link, must be called after Appear('linImgMainimage')
-
- //Element.hide('linDivVideoLink');
- //Element.show('linDivExifLink');
- //$('linAMetaExif').href = '#' + $('linAMetaExif').href;
- //myLinGlobal.enableTab( 'linDivTab', 3, 'linAMetaExif' );
-
- break;
- case '2': // video
-
- //Element.show('linDivVideoLink');
- //Element.hide('linDivExifLink');
- //$('linAMetaExif').href = $('linAMetaExif').href.substring(1);
- //$('linAMetaExif').href = '#' + $('linAMetaExif').href;
-
- //myLinGlobal.disableTab( 'linDivTab', 3, 'linAMetaExif' );
-
- /*$('linDivMetaOuter').style.top = $('linImgMainimage').offsetTop + 'px';
- $('linDivMetaOuter').style.height = $('linImgMainimage').offsetHeight + 'px'; // 'auto'
- Element.show('linDivMetaOuter');*/
-
- break;
- }
-
- this.initTextareaAddComment();
- this.setComments();
-
- /**
- * set image nr
- * currently only in slideshow used
- */
- $('linDivSlideshowImgNr').innerHTML = this.xmlDoc[IdCurrent].getElementsByTagName('imgnr').item(0).firstChild.data;
-
-
- /**
- * and at last, start preloading next and previous images
- */
- this.preloadXml();
-
+ /**
+ * start slideshow with some superduper effects
+ */
+ //Effect.Appear('linDivSlideshowOverlay', { queue: 'end', duration: 1.0, from: 0.0, to: 0.9 });
+ //Effect.BlindDown('linDivSlideshowControlsOuter', { queue: 'end'} );
+ //Element.show('linDivSlideshowImage');
+
+ if (linUseEffects) {
+ YAHOO.util.Dom.setStyle('linDivSlideshowBody', "opacity", 0);
+ YAHOO.util.Dom.setStyle('linDivSlideshowBody', "display", "block");
+ (new YAHOO.util.Anim('linDivSlideshowBody', {opacity: {from: 0, to: 1}}, 1)).animate();
+ } else {
+ YAHOO.util.Dom.setStyle('linDivSlideshowBody', "display", "block");
+ }
+ if (linUseEffects) {
+ YAHOO.util.Dom.setStyle('linDivSlideshowControlsOuter', "top", '-100px');
+ YAHOO.util.Dom.setStyle('linDivSlideshowControlsOuter', "display", "block");
+ (new YAHOO.util.Anim('linDivSlideshowControlsOuter', {top: {from: -100, to: 0}}, 1)).animate();
+ } else {
+ YAHOO.util.Dom.setStyle('linDivSlideshowControlsOuter', "display", "block");
+ }
+
+ YAHOO.util.Dom.setStyle('linDivImageSlideshow', "display", "block");
- },
+ this.fullscreenActive = true;
+
/**
- * setPrevNextThumb()
- *
- * code to generate a thumbnail with a <div><a><img> tag
+ * reload image with new position and size
*/
- setPrevNextThumb: function(thumbId, divId)
- {
- var ElemImg = Builder.node('img', {id: 'thumb'+thumbId, className: 'linImgThumbnavi_PrevNext', src: thumbSrc + thumbId});
- var ElemA = Builder.node('a', {href: 'javascript:myLinImage.loadImage(' + thumbId + ')'});
- var ElemDiv = Builder.node('div', {className: 'linDivThumbnavi_PrevNext'});
-
- ElemA.appendChild( ElemImg );
- ElemDiv.appendChild( ElemA );
- $(divId).appendChild(ElemDiv);
-
- if(! this.finishedPreloadedImages[thumbId]) {
- Element.setOpacity('thumb'+thumbId,0.5);
- }
-
- },
+ //linOnResizeWrapper();
+ myLinPage.setResizeMode('image');
+ this.changeImage( linIdCurrent );
+}
- // -----------------------------------------------------------------------------------
- // Keyboard actions
- // -----------------------------------------------------------------------------------
+// fullscreenStop()
+YAHOO.linpha.Album.prototype.fullscreenStop = function() {
- /**
- * enableKeyboardNav()
- */
- enableKeyboardNav: function() {
- document.onkeydown = this.keyboardAction;
- },
+ if (!this.fullscreenActive)
+ {
+ return;
+ }
+ this.fullscreenActive = false;
/**
- * disableKeyboardNav()
+ * end slideshow with some superduper effects
*/
- disableKeyboardNav: function() {
- document.onkeydown = '';
- },
+ //Effect.Fold('linDivSlideshowControlsOuter', { queue: 'end'} );
+ //Effect.Fade('linDivSlideshowOverlay', { queue: 'end', duration: 0.5, from: 0.9, to: 0.0 } );
+ //Element.hide('linDivSlideshowImage');
+
+ if (linUseEffects) {
+ var myAnimObj = new YAHOO.util.Anim('linDivSlideshowBody', {opacity: {from: 1, to: 0}}, 1);
+ myAnimObj.onComplete.subscribe( function() { YAHOO.util.Dom.setStyle('linDivSlideshowBody', "display", "none"); } );
+ myAnimObj.animate();
+ } else {
+ YAHOO.util.Dom.setStyle('linDivSlideshowBody', "display", "none");
+ }
+ if (linUseEffects) {
+ var myAnimObj = new YAHOO.util.Anim('linDivSlideshowControlsOuter', {top: {from: 0, to: -100}}, 1);
+ myAnimObj.onComplete.subscribe( function() {
+ YAHOO.util.Dom.setStyle('linDivSlideshowControlsOuter', "display", "none");
+ document.getElementsByTagName("body")[0].style.overflow = myLinAlbum.previousBodyOverflow; /* to prevent jump of control div */
+ } );
+ myAnimObj.animate();
+ } else {
+ YAHOO.util.Dom.setStyle('linDivSlideshowControlsOuter', "display", "none");
+ }
/**
- * keyboardAction()
- *
- * very nice
- * http://www.mediaevent.de/javascript/needful_tables.html
+ * re-enable scrollbars
+ * IE requires html tag, firefox and opera dont care
*/
- keyboardAction: function(e) {
-
- if (e == null) { // ie
- keycode = event.keyCode;
- ctrlKey = event.ctrlKey;
- } else { // mozilla
- keycode = e.which;
- ctrlKey = e.ctrlKey;
- }
-
- /*if( ctrlKey )
- {
- alert('ctrl pressed');
- return;
- }*/
-
- //alert(keycode);
-
- key = String.fromCharCode(keycode).toLowerCase();
+ document.getElementsByTagName("html")[0].style.cssText = this.previousHtmlCSS;
+ if (YAHOO.env.ua.ie) {
+ this.previousBodyCSS = document.getElementsByTagName("body")[0].style.cssText;
+ document.getElementsByTagName("body")[0].style.cssText = this.previousBodyCSS;
+ }
+
- //if ((keycode == 39) && (ctrlKey == true)) // ctrl + arrow right
- if (keycode == 34) // page down
- {
- myLinImage.disableKeyboardNav();
- myLinImage.moveNext();
- return false;
- }
- //else if ((keycode == 37) && (ctrlKey == true)) // ctrl + arrow left
- else if (keycode == 33) // page up
- {
- myLinImage.disableKeyboardNav();
- myLinImage.movePrev();
- return false;
- }
- else if ((keycode == 32) && (ctrlKey == true)) // ctrl + space
- {
- myLinImage.slideshowStartStop();
- }
- else if ((keycode == 122)) // F11
- {
- if( myLinImage.fullscreenActive ) {
- $('linDivSlideshowExit').show(); // hide exit button to force exit again with F11
- myLinImage.fullscreenStop();
- } else {
- $('linDivSlideshowExit').hide();
- myLinImage.fullscreenStart();
- }
- }
- else if ((keycode == 36) && (ctrlKey == true)) // ctrl + home
- //else if (keycode == 36) // home
- {
- myLinImage.moveFirst();
- return false;
- }
- else if ((keycode == 35) && (ctrlKey == true)) // ctrl + end
- //else if (keycode == 35) // end
- {
- myLinImage.moveLast();
- return false;
- }
- else if( myLinImage.fullscreenActive && ((key == 'f') || (key == 'x') || (key == 'o') || (key == 'c') ) ) // close fullscreen
- {
- myLinImage.fullscreenStop();
- }
- else if(myLinImage.fullscreenActive && key == 's') // start/stop slideshow
- {
- myLinImage.slideshowStartStop();
- }
- else if(myLinImage.fullscreenActive && key == 'p') // display previous image
- {
- myLinImage.disableKeyboardNav();
- myLinImage.movePrev();
- }
- else if(myLinImage.fullscreenActive && key == 'n') // display next image
- {
- myLinImage.disableKeyboardNav();
- myLinImage.moveNext();
- }
- },
-
- // -----------------------------------------------------------------------------------
- // Preload functions
- // -----------------------------------------------------------------------------------
-
+
+ YAHOO.util.Dom.setStyle('linDivImageSlideshow', "display", "none");
+
/**
- * preloadXml()
- * Preload previous and next images.
- *
- * normally, loadImageXml() will call also preloadImage()
- * but we also need to call preloadImage() if the Xml data is preloaded,
- * but not yet the image (this may occur if we change to fullscreen,
- * then, the images need to be re preloaded all
+ * give back the mainimage
*/
- preloadXml: function() {
+ //$('linDivSlideshowImage').innerHTML = '';
+ //$('linDivMainimage').innerHTML = '<img id="linImgMainimage" style="display: none;">';
+
+ document.getElementById('linDivMainImage').id = 'linDivMainImageSlideshow';
+ document.getElementById('linDivLoading').id = 'linDivLoadingSlideshow';
+ document.getElementById('linImgMainImage').id = 'linImgMainImageSlideshow';
+ document.getElementById('linDivDescription').id = 'linDivDescriptionSlideshow';
- // preload nextthumb from left to right
- if(this.xmlDoc[IdCurrent].getElementsByTagName('nextthumb').length > 0)
- {
- for(var i = 0; i < this.xmlDoc[IdCurrent].getElementsByTagName('nextthumb').length; i++)
- {
- var imgId = this.xmlDoc[IdCurrent].getElementsByTagName('nextthumb').item(i).firstChild.data;
+ document.getElementById('linDivMainImageNormal').id = 'linDivMainImage';
+ document.getElementById('linDivLoadingNormal').id = 'linDivLoading';
+ document.getElementById('linImgMainImageNormal').id = 'linImgMainImage';
+ document.getElementById('linDivDescriptionNormal').id = 'linDivDescription';
+
+ YAHOO.util.Dom.setStyle('linDivMainImage', "visibility", "visible");
+ YAHOO.util.Dom.setStyle('linDivThumbs', "visibility", "visible");
- if(! this.preloadXmlFinished[imgId])
- {
- this.loadImageXml(imgId);
- }
- else if(! this.finishedPreloadedImages[imgId] )
- {
- this.preloadImage(imgId);
- }
- }
- }
- // preload prevthumb from right to left
- if(this.xmlDoc[IdCurrent].getElementsByTagName('prevthumb').length > 0)
- {
- for(var i = this.xmlDoc[IdCurrent].getElementsByTagName('prevthumb').length-1; i >= 0; i--)
- {
- var imgId = this.xmlDoc[IdCurrent].getElementsByTagName('prevthumb').item(i).firstChild.data;
-
- if(! this.preloadXmlFinished[imgId])
- {
- this.loadImageXml(imgId);
- }
- else if(! this.finishedPreloadedImages[imgId] )
- {
- this.preloadImage(imgId);
- }
- }
- }
- },
-
/**
- * preloadImage()
- *
- * will be called after getting the xml data
+ * reload image with old position and size
*/
- preloadImage: function(imgId)
- {
- if(! this.finishedPreloadedImages[imgId] )
- {
- switch(this.xmlDoc[imgId].getElementsByTagName('filetype').item(0).firstChild.data)
- {
- case '1': // image
- /**
- * set image width and height
- */
- var orgWidth = this.xmlDoc[imgId].getElementsByTagName('imgwidth').item(0).firstChild.data;
- var orgHeight = this.xmlDoc[imgId].getElementsByTagName('imgheight').item(0).firstChild.data;
- var sizeArray = this.scaleToFit(orgWidth,orgHeight,maxImageWidth,maxImageHeight,1);
- var imgWidth = sizeArray[0];
- var imgHeight = sizeArray[1];
-
- /**
- * preload image
- */
- this.preloadImageSrc[imgId] = new Image();
-
- this.preloadImageSrc[imgId].onload=function(){
- myLinImage.preloadImageFinished(imgId);
- }
- this.preloadImageSrc[imgId].src = imageSrc + imgId + '&width=' + imgWidth + '&height=' + imgHeight;
-
- break;
- case '2': // video
- this.preloadImageFinished(imgId);
- break;
- case '0': // other
- break;
- }
- }
- },
-
- preloadImageFinished: function(imgId) {
+ myLinPage.setResizeMode('image');
+ this.changeImage( linIdCurrent );
+};
- this.finishedPreloadedImages[imgId] = true;
+// slideshowStartStop()
+YAHOO.linpha.Album.prototype.slideshowStartStop = function() {
- if( $('thumb'+imgId) ) // maybe its not here anymore
- {
- new Effect.Appear('thumb'+imgId, { duration: 0.5, from: 0.5, to: 1.0 });
- }
-
- },
-
-
- // -----------------------------------------------------------------------------------
- // Slideshow functions
- // -----------------------------------------------------------------------------------
-
- fullscreenStart: function()
+ // start Slideshow
+ if (!this.slideshowActive)
{
- this.fullscreenActive = true;
-
- /**
- * save old values to restore if slideshow ends
- */
- this.fullscreenOldMaxWidth = maxImageWidth;
- this.fullscreenOldMaxHeight = maxImageHeight;
-
- /**
- * disable scrollbars
- */
- this.previousBodyOverflow = document.getElementsByTagName("body")[0].style.overflow;
- document.getElementsByTagName("body")[0].style.overflow='hidden';
-
- /**
- * start slideshow with some superduper effects
- */
- Effect.Appear('linDivSlideshowOverlay', { queue: 'end', duration: 1.0, from: 0.0, to: 0.9 });
- Effect.BlindDown('linDivSlideshowControlsOuter', { queue: 'end'} );
- Element.show('linDivSlideshowImage');
-
- /**
- * steal the mainimage
- */
- $('linDivMainimage').innerHTML = '';
- $('linDivSlideshowImage').innerHTML = '<img id="linImgMainimage" style="display: none;" class="linImgSlideshow">';
-
- /**
- * reload image with new position and size
- */
- //this.resizeWindow();
- //linOnResizeCreateTrigger();
- linOnResizeWrapper();
- },
- fullscreenStop: function()
+ this.slideshowActive = true;
+ //Element.setOpacity('linSsImgStart',0.7);
+ YAHOO.util.Dom.setStyle('linSsImgStart', "opacity", 0.7);
+ this.ssCurrentTimerID = setTimeout("myLinAlbum.slideshowPlay()", this.ssCurrentDelay);
+ }
+ else // stop Slideshow
{
- this.fullscreenActive = false;
+ this.slideshowActive = false;
+ YAHOO.util.Dom.setStyle('linSsImgStart', "opacity", 1);
+ //Element.setOpacity('linSsImgStart',1);
+ clearTimeout(this.ssCurrentTimerID);
+ }
+};
- /**
- * restore max image size
- */
- maxImageWidth = this.fullscreenOldMaxWidth;
- maxImageHeight = this.fullscreenOldMaxHeight;
+// slideshowPlay()
+YAHOO.linpha.Album.prototype.slideshowPlay = function() {
- /**
- * re-enable scrollbars
- */
- document.getElementsByTagName("body")[0].style.overflow = this.previousBodyOverflow;
-
- /**
- * delete preloaded images after stopping fullscreen
- */
- this.finishedPreloadedImages = new Array();
-
- /**
- * end slideshow with some superduper effects
- */
- Effect.Fold('linDivSlideshowControlsOuter', { queue: 'end'} );
- Effect.Fade('linDivSlideshowOverlay', { queue: 'end', duration: 0.5, from: 0.9, to: 0.0 } );
- Element.hide('linDivSlideshowImage');
-
- /**
- * give back the mainimage
- */
- $('linDivSlideshowImage').innerHTML = '';
- $('linDivMainimage').innerHTML = '<img id="linImgMainimage" style="display: none;">';
-
- /**
- * reload image with old position and size
- */
- this.loadImage( IdCurrent );
- },
-
- slideshowStartStop: function()
+ if (this.album.Thumbs[this.currentIndex+1] || this.ssLoop || this.ssRandom)
{
- // start Slideshow
- if(! this.slideshowActive)
- {
- this.slideshowActive = true;
- Element.setOpacity('linSsImgStart',0.7);
- this.ssCurrentTimerID = setTimeout("myLinImage.slideshowPlay()", this.ssCurrentDelay);
- }
- else // stop Slideshow
- {
- this.slideshowActive = false;
- Element.setOpacity('linSsImgStart',1);
- clearTimeout(this.ssCurrentTimerID);
- }
- },
- slideshowPlay: function()
+ this.moveNext();
+ //this.ssCurrentTimerID = setTimeout("myLinAlbum.slideshowPlay()", this.ssCurrentDelay);
+ }
+ else
{
- if(this.nextThumbs[0] || this.ssLoop)
- {
- this.moveNext();
- //this.ssCurrentTimerID = setTimeout("myLinImage.slideshowPlay()", this.ssCurrentDelay);
- }
- else
- {
- // force stop slideshow
- this.slideshowActive = true;
- this.slideshowStartStop();
- }
- },
+ // force stop slideshow
+ this.slideshowActive = true;
+ this.slideshowStartStop();
+ }
+};
- slideshowChangeDelay: function()
- {
- this.ssCurrentDelay = $('linSsDelay').options[ $('linSsDelay').selectedIndex ].value * 1000;
- //document.optionsForm.delay.options[document.optionsForm.delay.selectedIndex].value * 1000;
- },
- slideshowChangeLoop: function()
- {
- if(! this.ssLoop) {
- this.ssLoop = true;
- Element.setOpacity('linSsImgLoop',0.7);
- } else {
- this.ssLoop = false;
- Element.setOpacity('linSsImgLoop',1);
- }
- },
- slideshowChangeRandom: function()
- {
- if(! this.ssRandom) {
- this.ssRandom = true;
- Element.setOpacity('linSsImgRandom',0.7);
- } else {
- this.ssRandom = false;
- Element.setOpacity('linSsImgRandom',1);
- }
- alert('This feature is currently not implemented, do we really need that?');
- },
+// slideshowChangeDelay()
+YAHOO.linpha.Album.prototype.slideshowChangeDelay = function() {
+ this.ssCurrentDelay = document.getElementById('linSsDelay').options[ document.getElementById('linSsDelay').selectedIndex ].value * 1000;
+ //document.optionsForm.delay.options[document.optionsForm.delay.selectedIndex].value * 1000;
+};
- // -----------------------------------------------------------------------------------
- // Image info functions
- // -----------------------------------------------------------------------------------
+// slideshowChangeLoop()
+YAHOO.linpha.Album.prototype.sl...
[truncated message content] |
