/** * Application : image library * File : _js/imageLibrary.js * @version : 0.1 * @author : acn * @copyright : copyright 05.07.2006 by http://www.getunik.com * * Long desc: * Object oriented javascript function library to build a image library. * Take notice of the example created by acn@getunik.com. * * Version-History: * 05.07.2006.getunik.acn : initial release * 25.08.2006.getunik.mvr : - checks now if description and caption elements are defined in html page * - if an element called 'imageLibrary#iIdx#Tooltip' exists it will be filled with description and caption */ /** * main function to initiate a new image library object * - open a own data storage container, containig all informations for the image library * * @param string sImageLibraryName the name of the image library. used to differ different image libraries od the same page. * @param array aImageLibraryData the data of the image library. format is not checked, must correspond to the example! */ function imageLibrary(sImageLibraryName, aImageLibraryData) { if(typeof(sImageLibraryName) == 'string' && typeof(aImageLibraryData) == 'object' && sImageLibraryName != '' && aImageLibraryData.length > 0) { // save object specific data within the scope of 'this' object this.sImageLibraryName = sImageLibraryName; this.aImageLibraryData = aImageLibraryData; this.iActPos = 0; this.iImageLibraryLength = aImageLibraryData.length this.aPrevImgs = new Array(); // generate preview image objects for(i in this.aImageLibraryData) { if(!isNaN(i)) { if(this.aImageLibraryData[i]['previmgsrc']) { this.aPrevImgs[i] = new Image(); this.aPrevImgs[i].src = this.aImageLibraryData[i]['previmgsrc']; } } } } else { alert('imageLibrary.js\nError within imageLibrary():\nSubmitted data are corrupt!'); } } /** * set the visibility of the navigation buttons * * @param string sElementName the id name of the object * @param array sVisibility the type of the new visibility status [visible|hidden] */ imageLibrary.prototype.setNavVisibility = function(sElementName, sVisibility) { if(typeof(sElementName) == 'string' && typeof(sVisibility) == 'string') { if(document.getElementById(sElementName)) { switch(sVisibility) { case "visible": document.getElementById(sElementName).style.visibility = "visible"; break; case "hidden": document.getElementById(sElementName).style.visibility = "hidden"; break; default: alert('imageLibrary.js\nError within setNavVisibility():\nVisibility value is wrong: \'' + sVisibility + '\'!'); break; } } else { alert('imageLibrary.js\nError within setNavVisibility():\nElement id doesn\'t exist: \'' + sElementName + '\'!'); } } else { alert('imageLibrary.js\nError within setNavVisibility():\nSubmitted data are corrupt!'); } } /** * function to load the first object; use this as 'onload' statement * within your html body tag, a.e.: * */ imageLibrary.prototype.loadFirstObject = function() { // load first image sImgName = this.sImageLibraryName + 'Image'; if(document.getElementById(sImgName)) { document.getElementById(sImgName).src = this.aPrevImgs[this.iActPos].src; document.getElementById(sImgName).width = this.aImageLibraryData[this.iActPos]['width']; document.getElementById(sImgName).height = this.aImageLibraryData[this.iActPos]['height']; } // load first description sDescriptionName = this.sImageLibraryName + 'Description'; if(document.getElementById(sDescriptionName) && this.aImageLibraryData[this.iActPos]['description'] != "") { document.getElementById(sDescriptionName).firstChild.data = this.aImageLibraryData[this.iActPos]['description']; } // load first caption sCaptionName = this.sImageLibraryName + 'Caption'; if(document.getElementById(sCaptionName) && this.aImageLibraryData[this.iActPos]['caption'] != "") { document.getElementById(sCaptionName).firstChild.data = this.aImageLibraryData[this.iActPos]['caption']; } // load first tooltip sTooltipName = this.sImageLibraryName + 'Tooltip'; if(document.getElementById(sTooltipName)) { document.getElementById(sTooltipName).firstChild.data = this.aImageLibraryData[this.iActPos]['description'] + '
' + this.aImageLibraryData[this.iActPos]['caption']; } // load e-card link text sLinkName = this.sImageLibraryName + 'ECard'; if(document.getElementById(sLinkName) && this.aImageLibraryData['config']['bEcard']) { document.getElementById(sLinkName).firstChild.data = this.aImageLibraryData['config']['sEcardLinkText']; } // if only one (1) image is defined for the image library, // hide informations and navigation buttons if(this.iImageLibraryLength <= 1) { // hide actual position sActPos = this.sImageLibraryName + 'ActPos'; this.setNavVisibility(sActPos, 'hidden'); // just to ensure; hide the previous button sPrevious = this.sImageLibraryName + 'Previous'; this.setNavVisibility(sPrevious, 'hidden'); // just to esure; hide the next button sNext = this.sImageLibraryName + 'Next'; this.setNavVisibility(sNext, 'hidden'); } else { // display actual position sActPos = this.sImageLibraryName + 'ActPos'; this.setNavVisibility(sActPos, 'visible'); sImagePos = this.sImageLibraryName + 'ImagePos'; if(document.getElementById(sImagePos)) { document.getElementById(sImagePos).firstChild.data = this.getActPosition(); } // just to ensure; hide the previous button sPrevious = this.sImageLibraryName + 'Previous'; this.setNavVisibility(sPrevious, 'hidden'); // just to ensure; hide the next button sNext = this.sImageLibraryName + 'Next'; this.setNavVisibility(sNext, 'visible'); } } /** * function to return the image position, a.e. '4 | 9' */ imageLibrary.prototype.getActPosition = function() { iActPos = (this.iActPos <= 0) ? 1 : this.iActPos + 1; iActPos = (this.iActPos >= this.iImageLibraryLength) ? this.iImageLibraryLength : this.iActPos + 1; sPositionInformation = String(iActPos) + this.aImageLibraryData['config']['sActPosDelimiter'] + this.iImageLibraryLength; return sPositionInformation; } /** * function to load the full view image of the actual object * important notice: it use the function 'openPopUp' which is defined a.e. within 'openPopUp.js'! */ imageLibrary.prototype.getFullviewObject = function() { if(this.aImageLibraryData[this.iActPos]['origimgsrc'] != "") { openPopUp(this.aImageLibraryData[this.iActPos]['origimgsrc'], this.aImageLibraryData['config']['PopUpWidth'], this.aImageLibraryData['config']['PopUpHeight'], this.aImageLibraryData['config']['PopUpToolbar'], this.aImageLibraryData['config']['PopUpScrollbars'], this.aImageLibraryData['config']['PopUpResizable']); } } /** * function to turn the image library to the next object */ imageLibrary.prototype.getNextObject = function() { if(this.iActPos < this.iImageLibraryLength - 1) { // eval the next pos this.iActPos = this.iActPos + 1; // load image sImgName = this.sImageLibraryName + 'Image'; document.getElementById(sImgName).src = this.aPrevImgs[this.iActPos].src; document.getElementById(sImgName).width = this.aImageLibraryData[this.iActPos]['width']; document.getElementById(sImgName).height = this.aImageLibraryData[this.iActPos]['height']; // load description sDescriptionName = this.sImageLibraryName + 'Description'; if(document.getElementById(sDescriptionName)) { document.getElementById(sDescriptionName).firstChild.data = this.removeHtml(this.aImageLibraryData[this.iActPos]['description']); } // load caption sCaptionName = this.sImageLibraryName + 'Caption'; if(document.getElementById(sCaptionName)) { document.getElementById(sCaptionName).firstChild.data = this.removeHtml(this.aImageLibraryData[this.iActPos]['caption']); } // load tooltip sTooltipName = this.sImageLibraryName + 'Tooltip'; if(document.getElementById(sTooltipName)) { document.getElementById(sTooltipName).firstChild.data = this.removeHtml(this.aImageLibraryData[this.iActPos]['description']) + '
' + this.removeHtml(this.aImageLibraryData[this.iActPos]['caption']); } // display actual position sImagePos = this.sImageLibraryName + 'ImagePos'; document.getElementById(sImagePos).firstChild.data = this.getActPosition(); // manage visibility sNext = this.sImageLibraryName + 'Next'; sPrevious = this.sImageLibraryName + 'Previous'; if(this.iActPos + 1 == this.iImageLibraryLength) { this.setNavVisibility(sNext, 'hidden'); this.setNavVisibility(sPrevious, 'visible'); } else { this.setNavVisibility(sNext, 'visible'); this.setNavVisibility(sPrevious, 'visible'); } } } /** * function to turn the image library to the previous object */ imageLibrary.prototype.getPreviousObject = function() { if(this.iActPos <= this.iImageLibraryLength - 1) { // eval the next pos this.iActPos = this.iActPos - 1; if(this.iActPos < 0) { this.iActPos = 0; } // load image sImgName = this.sImageLibraryName + 'Image'; document.getElementById(sImgName).src = this.aPrevImgs[this.iActPos].src; document.getElementById(sImgName).width = this.aImageLibraryData[this.iActPos]['width']; document.getElementById(sImgName).height = this.aImageLibraryData[this.iActPos]['height']; // load description sDescriptionName = this.sImageLibraryName + 'Description'; if(document.getElementById(sDescriptionName)) { document.getElementById(sDescriptionName).firstChild.data = this.removeHtml(this.aImageLibraryData[this.iActPos]['description']); } // load caption sCaptionName = this.sImageLibraryName + 'Caption'; if(document.getElementById(sCaptionName)) { document.getElementById(sCaptionName).firstChild.data = this.removeHtml(this.aImageLibraryData[this.iActPos]['caption']); } // load tooltip sTooltipName = this.sImageLibraryName + 'Tooltip'; if(document.getElementById(sTooltipName)) { document.getElementById(sTooltipName).firstChild.data = this.removeHtml(this.aImageLibraryData[this.iActPos]['description']) + '
' + this.removeHtml(this.aImageLibraryData[this.iActPos]['caption']); } // display actual position sImagePos = this.sImageLibraryName + 'ImagePos'; document.getElementById(sImagePos).firstChild.data = this.getActPosition(); // manage visibility sNext = this.sImageLibraryName + 'Next'; sPrevious = this.sImageLibraryName + 'Previous'; if(this.iActPos <= 0) { this.setNavVisibility(sNext, 'visible'); this.setNavVisibility(sPrevious, 'hidden'); } else { this.setNavVisibility(sNext, 'visible'); this.setNavVisibility(sPrevious, 'visible'); } } } /** * function to call the ecard template with the corresponding image id (ximg.ximg_id) */ imageLibrary.prototype.getECard = function(iFormIdx) { var sOrigUrl = top.location.href; var sFormAction = sOrigUrl; if(window.location.search != "") { sFormAction += "&"; } else { sFormAction += "?"; } sFormAction += "uECardId=" + this.aImageLibraryData['config']['iEcardId']; sFormAction += "&uMode=set"; sFormAction += "&uImgId=" + this.aImageLibraryData[this.iActPos]['img_id']; sFormId = 'imageLibrary' + iFormIdx; document.getElementById(sFormId).fImageLibraryOrigUrl.value = sOrigUrl; document.getElementById(sFormId).action = sFormAction; document.getElementById(sFormId).submit(); } /** * removes html tags from a string * attention: it removes also "" but "< this >" not! */ imageLibrary.prototype.removeHtml = function(sString) { sString = sString.replace(/<[a-z]+>/gi, ""); sString = sString.replace(/\<\/[a-z]+>/gi, ""); return sString; }