/* JAVASCRIPT IMAGE GALLERY W/ mootools Description: A easy, non destructive javascript image gala. Version: 1.1 Author: Devin Ross Author URI: http://tutorialdog.com */ /* Release notes: 1.1 - Adds loading animation, and properly fades in images when fully loaded 1.1.1 - Fixes displaying description, Fades out current image, Works with Mootools 1.2 */ window.addEvent('domready', function() { // CHANGE THIS !! var slides = 6; // NUMBER OF SLIDES IN SLIDESHOW, CHANGE ACCORDINGLY var pos = 0; var offset = 260; // HOW MUCH TO SLIDE WITH EACH CLICK var currentslide = 1; // CURRENT SLIDE IS THE FIRST SLIDE var inspector = $('fullimg'); // WHERE THE LARGE IMAGES WILL BE PLACE var fx = new Fx.Morph(inspector, {duration: 300, transition: Fx.Transitions.Sine.easeOut}); var fx2 = new Fx.Morph(inspector, {duration: 200, transition: Fx.Transitions.Sine.easeOut}); /* THUMBNAIL IMAGE SCROLL */ var imgscroll = new Fx.Scroll('wrapper', { offset: {'x': 0, 'y': 0}, transition: Fx.Transitions.Cubic.easeOut // HOW THE SCROLLER SCROLLS }).toLeft(); /* EVENTS - WHEN AN ARROW IS CLICKED THE THUMBNAILS SCROLL */ $('moveleft').addEvent('click', function(event) { event = new Event(event).stop(); if(currentslide == 1) return; currentslide--; // CURRENT SLIDE IS ONE LESS pos += -(offset); // CHANGE SCROLL POSITION imgscroll.start(pos); // SCROLL TO NEW POSITION }); $('moveright').addEvent('click', function(event) { event = new Event(event).stop(); if(currentslide >= slides) return; currentslide++; pos += offset; imgscroll.start(pos); }); });