// --- /* JaS is developed by Robert Nyman, http://www.robertnyman.com For more information, please see http://www.robertnyman.com/jas */ var JaS = { // Customization parameters imagePath : "/images/producten/", images : [ ["houten_delen.jpg", "Houten delen", "producten"],["villa1.jpg", "Villa", "producten"],["villa4.jpg", "Villa", "producten"],["monumentaal1.jpg", "Monumentale gevel", "producten"],["villa5.jpg", "Villa", "producten"],["hoteldeuren.jpg", "Deuren monumentaal hotel Amsterdam", "producten"],["hotelraam.jpg", "Raam monumentaal hotel Amsterdam", "producten"],["villa8.jpg", "Villa", "producten"],["villa3.jpg", "Villa", "producten"] ], fadeContainerId : "bg_img_2", imageContainerId : "product-image", imageTextContainerId : "jas-image-text", previousLinkId : "previous-image", nextLinkId : "next-image", imageCounterId : "image-counter", startSlideShowId : "start-slideshow", stopSlideShowId : "stop-slideshow", thumbnailContainerId: "jas-thumbnails", tagsContainerId: "jas-tags", tagsSelectAllId: "jas-select-all-tags", useImageText : false, useThumbnails : false, useTags : false, useKeyboardShortcuts : false, useFadingIn : true, useFadingOut : true, useFadeWhenNotSlideshow : false, useFadeForSlideshow : true, useFadeAtInitialLoad : true, fadeIncrement : 0.1, fadeInterval : 150, // Milliseconds timeForSlideInSlideshow : 4500, // Milliseconds // JaS function parameters allImages : null, currentImages : null, fadeContainer : null, imageContainer : null, imageTextContainer : null, previousLink : null, nextLink : null, imageCounter : null, startSlideShowLink : null, stopSlideShowLink : null, thumbnailContainer : null, thumbnailCollection : [], currentThumbnailSelected : null, tagsContainer : null, tagsSelectAll : null, tagsList : null, tags : [], tagsCheckboxes : [], selectAllTags : true, imageText : null, imageText : "", imageSource : "", imageIndex : 0, fadingIn : true, fadeLevel : 0, fadeEndLevel : 1, fadeTimer : null, hasOpacitySupport : false, useMSFilter : false, useMSCurrentStyle : false, slideshowIsSupported : false, slideshowIsPlaying : true, functionAfterFade : null, isInitialLoad : false, init : function (){ if(document.getElementById){ this.fadeContainer = document.getElementById(this.fadeContainerId); this.imageContainer = document.getElementById(this.imageContainerId); this.slideshowIsSupported = this.fadeContainer && this.imageContainer; if(this.slideshowIsSupported){ this.allImages = this.images; this.currentImages = this.images; this.hasOpacitySupport = typeof this.fadeContainer.style.filter != "undefined" || typeof this.fadeContainer.style.opacity != "undefined"; this.useMSFilter = typeof this.fadeContainer.style.filter != "undefined"; this.useMSCurrentStyle = typeof this.fadeContainer.currentStyle != "undefined"; this.startSlideshow(); } } }, setImage : function (){ if(this.currentImages.length > 0){ this.imageContainer.style.visibility = "visible"; this.imageSource = this.currentImages[this.imageIndex][0]; if(this.useFadingOut && (this.slideshowIsPlaying && this.useFadeForSlideshow) || (!this.slideshowIsPlaying && this.useFadeWhenNotSlideshow) && (this.useFadeAtInitialLoad && this.isInitialLoad || !this.isInitialLoad)){ this.fadeOut(); } else{ this.imageContainer.setAttribute("src", (this.imagePath + this.imageSource)); if((this.useFadeAtInitialLoad && this.isInitialLoad || !this.isInitialLoad) && ((this.slideshowIsPlaying && this.useFadeForSlideshow) || (!this.slideshowIsPlaying && this.useFadeWhenNotSlideshow))){ this.fadeIn(); } } } else{ this.imageContainer.style.visibility = "hidden"; } }, nextImage : function (){ if(this.imageIndex < (this.currentImages.length - 1)){ ++this.imageIndex; this.setImage(); } else if(this.slideshowIsPlaying){ this.imageIndex = 0; this.setImage(); } }, previousImage : function (){ if(this.imageIndex > 0){ --this.imageIndex; this.setImage(); } }, startSlideshow : function (){ if(this.currentImages.length > 0){ this.slideshowIsPlaying = true; this.fadeTimer = setTimeout("JaS.nextImage()", JaS.timeForSlideInSlideshow); } }, stopSlideshow : function (){ /*if(this.currentImages.length > 0){ this.startSlideShowLink.style.display = "inline"; this.stopSlideShowLink.style.display = "none"; this.slideshowIsPlaying = false; this.setFadeParams(false, 1, 0); this.setFade(); clearTimeout(this.fadeTimer); }*/ }, fadeIn : function (){ this.setFadeParams(true, 0, 1); this.functionAfterFade = null; this.fade(); if(this.slideshowIsPlaying){ this.functionAfterFade = "this.startSlideshow()"; } }, fadeOut : function (){ this.setFadeParams(false, 1, 0); this.functionAfterFade = "this.fadeOutDone()"; this.fade(); }, fadeOutDone : function (){ this.imageContainer.setAttribute("src", (this.imagePath + this.imageSource)); if(this.useFadingIn){ this.fadeIn(); } else{ this.fadeLevel = 1; this.setFade(); } }, fade : function (){ if((this.fadingIn && this.fadeLevel < this.fadeEndLevel) || !this.fadingIn && this.fadeLevel > this.fadeEndLevel){ this.fadeLevel = (this.fadingIn)? this.fadeLevel + this.fadeIncrement : this.fadeLevel - this.fadeIncrement; // This line is b/c of a floating point bug in JavaScript this.fadeLevel = Math.round(this.fadeLevel * 10) / 10; this.setFade(); this.fadeTimer = setTimeout("JaS.fade()", this.fadeInterval); } else{ clearTimeout(this.fadeTimer); if(this.functionAfterFade){ eval(this.functionAfterFade); } } }, setFade : function (){ if(this.useMSFilter){ this.fadeContainer.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=" + (this.fadeLevel * 100) + ")"; } else{ this.fadeContainer.style.opacity = this.fadeLevel; } }, setFadeParams : function (bFadingIn, intStartLevel, intEndLevel){ this.fadingIn = bFadingIn; this.fadeLevel = intStartLevel; this.fadeEndLevel = intEndLevel; }, closeSession : function (oEvent){ JaS = null; delete JaS; }, preventDefaultEventBehavior : function (oEvent){ if(oEvent){ oEvent.returnValue = false; if(oEvent.preventDefault){ oEvent.preventDefault(); } } } }; // --- addEvent(window, "load", function(){JaS.init();}, false); addEvent(window, "unload", function(){JaS.closeSession();}, false); // --- // Utility functions function addEvent(oObject, strEvent, oFunction, bCapture){ if(oObject){ if(oObject.addEventListener){ oObject.addEventListener(strEvent, oFunction, bCapture); } else if(window.attachEvent){ oObject.attachEvent(("on" + strEvent), oFunction) } } } // --- if(typeof Array.prototype.push != "function"){ Array.prototype.push = ArrayPush; function ArrayPush(value){ this[this.length] = value; } } // ---