var emptyFunction = function() { }; var Slideshow = function(target, slides, settings) { this.init(target, slides, settings ); return this; } Slideshow.prototype = { createEvents: emptyFunction, target: { container: null, img: null, title: null, desc: null, buttons: null }, slides: null, settings: null, pointer: 0, INTERVAL: null, ppbtn: null, replaceSlide: function(slide, first_run) { var w = slide.cached_obj.width; var h = slide.cached_obj.height; this.target.img.parentNode.replaceChild(slide.cached_obj, this.target.img); this.target.img = slide.cached_obj; }, showSlide: function(slide, onloadEvt, first_run) { if (first_run) this.not_first_slide = false; else this.not_first_slide = true; this.replaceSlide(slide) var target = this.target; if (slide.title) { target.title.innerHTML = slide.link ? '' + slide.title + '' : slide.title; } else target.title.innerHTML = ''; if (slide.credit && this.settings.show_credits) { target.photosource.innerHTML = 'photo: ' + slide.credit; } else { target.photosource.innerHTML = ''; } target.desc.innerHTML = slide.desc ? slide.desc : ''; if (onloadEvt) onloadEvt(); }, initTarget: function() { var obj = this; var img = document.createElement('img'); var imgContainer = document.createElement('div'); imgContainer.appendChild(img); this.target.container.appendChild(imgContainer); var photosource = document.createElement('span'); photosource.className = 'photosource'; this.target.container.appendChild(photosource); this.target.container.className = 'slideshow ' + (this.settings.fullscreen ? 'fullscreen' : ''); var btns = document.createElement('div'); btns.className = 'buttons'; var trans = document.createElement('div'); trans.className = 'trans'; pbtn = document.createElement('a'); pbtn.innerHTML = '
'; pbtn.onclick = function() { obj.pauseShow(); obj.prevSlide(); }; pbtn.href = 'javascript: void(0)'; btns.appendChild(pbtn); ppbtn = document.createElement('a'); ppbtn.innerHTML = ''; ppbtn.onclick = function() { obj.playShow(); } ppbtn.href = 'javascript: void(0)'; btns.appendChild(ppbtn); var nbtn = document.createElement('a'); nbtn.innerHTML = ''; nbtn.onclick = function() { obj.pauseShow(); obj.nextSlide(); } nbtn.href = 'javascript: void(0)'; btns.appendChild(nbtn); var bbar = document.createElement('div'); bbar.className = 'ssBottomBar'; bbar.appendChild(trans); bbar.appendChild(btns); this.target.container.appendChild(bbar); var title = document.createElement('h3'); this.target.container.appendChild(title); var desc = document.createElement('p'); this.target.container.appendChild(desc); title.width = desc.width = '100%'; title.className = this.settings.fullscreen ? 'centered' : ''; desc.className = this.settings.fullscreen ? 'centered' : ''; this.target.title = title; this.target.desc = desc; this.target.img = img; this.target.buttons = bbar; this.target.photosource = photosource; this.ppbtn = ppbtn; if (this.settings.width && this.settings.height) { this.target.img.style.width = this.settings.width; this.target.img.style.height = this.settings.height; this.width = this.settings.width; this.height = this.settings.height; } else { this.width = this.target.img.offsetWidth; this.height = this.target.img.offsetHeight; } if (this.settings.fullscreen) { var w = window.innerWidth || document.documentElement.offsetWidth; var h = window.innerHeight || document.documentElement.offsetHeight; w -= 100; h -= 100; //this.target.img.style.width = w + 'px'; //this.target.img.style.height = h + 'px'; this.width = w; this.height = h; } imgContainer.style.width = this.width; imgContainer.style.height = this.height; this.target.container.style.width = this.width + 'px'; }, onPlay: function() { var obj = this; this.ppbtn.innerHTML = ''; this.ppbtn.onclick = function() { obj.pauseShow(); }; }, onPause: function() { var obj = this; this.ppbtn.innerHTML = ''; this.ppbtn.onclick = function() { obj.playShow(); }; }, nextSlide: function() { if (this.pointer < this.slides.length -1) { this.pointer++; } else this.pointer = 0; this.getSlide(); }, prevSlide: function() { if (this.pointer > 0) { this.pointer--; } else this.pointer = slides.length - 1; this.getSlide(); }, pauseShow: function() { if (!this.INTERVAL) return; clearInterval(this.INTERVAL); this.INTERVAL = null; this.onPause(); }, scaleDown: function(w, h) { var maxw = this.width; var maxh = this.height; var fw, fh; if (h > maxh) { w = Math.round((maxh / h) * w); h = maxh } if (w > maxw) { h = Math.round((maxw / w) * h); w = maxw }; return new Array(w, h) }, createObj: function(slide) { if (slide.width == undefined && slide.height == undefined) size = new Array(this.settings.width, this.settings.height); else size = new Array(slide.width, slide.height); size = this.scaleDown(size[0], size[1]); cached_obj = new Image(size[0], size[1]); cached_obj.src = slide.src; cached_obj.style.width = size[0]; cached_obj.style.height = size[1]; cached_obj.alt = 'photo: ' + slide.credit; //cached_obj.style.marginLeft = ((this.width / 2) - (size[0] / 2)) + 'px'; return cached_obj; }, processQueue: function() { var n = 0; for (var i=0; i < this.slides.length; i++) { if (n == this.settings.queue_preload) break; if (this.slides[i].cached_obj) continue; this.slides[i].cached_obj = this.createObj(this.slides[i]); n += 1 } }, getSlide: function(slide, onloadEvt, first_run) { if (!slide) { slide = this.slides[this.pointer]; } if (!slide.cached_obj) { slide.cached_obj = this.createObj(slide); } this.showSlide(slide, onloadEvt, first_run); this.processQueue(); }, playShow: function() { if (this.INTERVAL) return; var obj = this; this.INTERVAL = setInterval(function() { obj.nextSlide() }, this.settings.delay * 1000); this.onPlay(); }, preload: function() { if (document.getElementById('slideshow_preloads')) return; var d = document.createElement('slideshow_preloads'); d.style.display = 'none'; for (var i=0; i < this.settings.preload_paths.length; i++) { var img = document.createElement('img'); img.src = this.settings.preload_paths[i]; d.appendChild(img); } this.target.container.appendChild(d); }, init: function(target, slides, settings) { var default_settings = { queue_preload: 3, preload_paths: new Array('//cdn.wn.com/o25/st/notA_slideshow/prevO.png', '//cdn.wn.com/o25/st/notA_slideshow/nextO.png', '//cdn.wn.com/o25/st/notA_slideshow/pauseO.png'), fullscreen: false, delay: 4, show_credits: true } this.settings = settings || {}; for (var k in default_settings) { if (this.settings[k] == undefined) this.settings[k] = default_settings[k]; } this.target.container = target; this.preload(); this.slides = slides; this.initTarget(); this.createEvents(); var obj = this; this.getSlide(slides[0], function() { obj.playShow() ; }, true); } } $(document).ready(function(){ setInterval(function(){ $('#slideshow').css('height', $('#slideshow > div > img').height() + 10) }, 50); });