/* Script: simple.img.gallery Makes a very, very simple image gallery with a collection of images and previous and next buttons. Author: Aaron Newton Dependencies: mootools - , , , , , , , , , cnet - Class: SimpleGallery Makes a very, very simple image gallery with a collection of images and previous and next buttons. Arguments: options - an object with key/value settings. Options: startIndex - (integer) the first image to show imgUrls - (array) a list of urls for the images; these will be added to the dom. If the images are already in the page, use the imgs option (see below) imgs - (array) a collection of images already in the dom. If the images are not already in the page, use imgUrls. imgClass - (string) a class to add to each image container - (dom element or id) container into which the images should be inserted currentIndexContainer - (dom element or id) container to display the the currently shown image index (i.e. "showing *2* of 3") maxContainer - (dom element or id) container to display the maximum number of images available nextImg - (dom element or id) image to capture clicks to show the next image prevImg - (dom element or id) image to capture clicks to show the next image wrap - (boolean) when the user clicks next at the end of a set, go back to the start (and if they click prev at the begining, go to the end); defaults to true disabledClass - (string) class to add to next/prev images when there are no next or prev imgs onNext - (function) callback for when the user clicks next onPrev - (function) callback for when the user clicks prev onImgClick - (function) callback for when the user clicks an image, this function will be passed the image clicked and the index in the imgUrls of the image. crossFadeOptions - (object) options object to be passed to the opacity effects. Example: (start code) new SimpleGallery({ startIndex: 0, imgUrls: ['http://download.com/i/dl/media/dlimage/10/87/78/108778_medium.jpeg', 'http://download.com/i/dl/media/dlimage/10/87/79/108779_medium.jpeg', 'http://download.com/i/dl/media/dlimage/10/87/81/108781_medium.jpeg'], container: 'screenShotImgs', currentIndexContainer: 'imgNow', maxContainer: 'imgMax', nextImg: 'nextImg', prevImg: 'prevImg', }); (end) */ var SimpleGallery = new Class({ getDefaultOptions: function(){ return { startIndex: 0, imgUrls: [], imgs:[], imgClass: 'screenshot', container: false, currentIndexContainer: false, maxContainer: false, nextImg: false, prevImg: false, wrap: true, disabledClass: 'disabled', onNext: Class.create(), onPrev: Class.create(), onImgClick: Class.create(), crossFadeOptions: {}, buttonsContainer: false } }, initialize: function(options){ this.setOptions(this.getDefaultOptions(), options); this.imgs = this.options.imgs; if($(this.options.container)) { this.makeImgs(); this.setUpNav(); this.cycleForward(); } }, setCounters: function(){ if($(this.options.currentIndexContainer))$(this.options.currentIndexContainer).setHTML(this.now+1); if($(this.options.maxContainer))$(this.options.maxContainer).setHTML(this.imgs.length); }, makeImgs: function(){ if(this.options.imgUrls.length>0) { this.options.imgUrls.each(function(url){ this.addImg(url); }, this); } //hide them all this.imgs.each(function(img){ img.setStyle('display', 'none'); }); }, /* Property: addImg Adds a new image to the group */ addImg: function(url){ var img = new Element('img').setProperties({ 'src': url, 'id': this.options.imgClass+this.imgs.length }).addClass(this.options.imgClass).setStyle( 'display', 'none').injectInside($(this.options.container)).addEvent( 'click', this.imgClick.bind(this)); this.imgs.push(img); this.setCounters(); }, setUpNav: function(){ if($(this.options.nextImg)) $(this.options.nextImg).addEvent('click', function(){ this.cycleForward(); }.bind(this)); if($(this.options.prevImg)) $(this.options.prevImg).addEvent('click', function(){ this.cycleBack(); }.bind(this)); if ($(this.options.buttonsContainer)) { // add buttons this.imgs.each(function(img, index){ theLink = new Element('a').setHTML(index+1); theLink.addEvent('click', function(e){ evnt = new Event(e); evnt.stop(); this.showImg(index); }.bind(this)); theLink.setProperties({ 'href': img.src, 'title': img.alt }); theLink.injectInside($(this.options.buttonsContainer)); }.bind(this)); } }, /* Property: cycleForward Shows the next image. */ cycleForward: function(){ if($type(this.now) && this.now < this.imgs.length-1) this.showImg(this.now+1); else if($type(this.now) && this.options.wrap) this.showImg(0); else this.showImg(this.options.startIndex); this.fireEvent('onNext'); if(this.now == this.imgs.length && !this.options.wrap) $(this.options.nextImg).addClass(this.options.disabledClass); else if ($(this.options.nextImg)) $(this.options.nextImg).removeClass(this.options.disabledClass); }, /* Property: cycleBack Shows the prev image. */ cycleBack: function(){ if(this.now > 0) this.showImg(this.now-1); else if(this.options.wrap) this.showImg(this.imgs.length-1); this.fireEvent('onPrev'); if(this.now == 0 && !this.options.wrap) $(this.options.prevImg).addClass(this.options.disabledClass); else $(this.options.prevImg).removeClass(this.options.disabledClass); }, /* Property: showImg Shows a specific image. Arguments: iToShow - (integer) index of the image to show. */ showImg: function(iToShow){ var now = this.now; if(this.imgs[iToShow]) { if($type(this.now) && this.now != iToShow){ this.imgs[this.now].effect('opacity', this.options.crossFadeOptions).start(0).chain(function(){ this.imgs[now].hide(); this.imgs[iToShow].setStyles({ 'display':'block', 'opacity':0 }).effect('opacity', this.options.crossFadeOptions).start(1); }.bind(this)); } else this.imgs[iToShow].setStyles({ 'display':'block', 'opacity':0 }).effect('opacity', this.options.crossFadeOptions).start(1); this.now = iToShow; this.setCounters(); } }, imgClick: function(){ this.fireEvent('onImgClick', [this.imgs[this.now], this.now]); } }); SimpleGallery.implement(new Events); SimpleGallery.implement(new Options); /* do not edit below this line */ /* Section: Change Log $Source: $ $Log: $ */