// Our ImageBrowser Class ImageBrowser = new Class({ // Define our variables. unit : -74, // The distance to animate size : 0, // The length of our 'overflow' DIV position: 0, // Current position of our 'overflow' DIV images : [ 'images/catalogue/vitaminee/vitaminee0.jpg', 'images/catalogue/vitaminee/vitaminee1.jpg', 'images/catalogue/vitaminee/vitaminee2.jpg', 'images/catalogue/vitaminee/vitaminee3.jpg', 'images/catalogue/vitaminee/vitaminee6.jpg' ], // The image array - can be defined from a database, or loaded via AJAX, etc. moving : false, // Set the initial moving status of the 'overflow' DIV animationDuration : 500, // The speed of our animation 500 = 0.5 of a second. // Initialize the function initialize : function(){ // Create the outer content DIV this.frame = new Element('div').setProperty('class','frame'); this.browser = new Element('div').setProperty('class','imgBrowser').injectInside(this.frame); // Create our navigation Left DIV this.navleft = new Element('div').setProperty('class','navleft').injectInside(this.browser); // Create the DIV that holds the scroller this.container = new Element('div').setProperty('class','container').injectInside(this.browser); // Overflow is the DIV that we are scrolling, it is injected into the 'container' DIV this.overflow = new Element('div').setStyle('margin-left', '0') .setProperty('class','overflow') .setProperty('id','overflowdiv').injectInside(this.container); // Create our navigation Right DIV this.navright = new Element('div').setProperty('class','navright').injectInside(this.browser); // Add our "LEFT" button, left being "PREVIOUS/LESS" and add it's Events, then inject it inside our 'nav' DIV this.left = new Element('span') .setStyle('visibility','hidden').adopt( new Element('img').setProperty('src','images/moreleft.gif') .setProperty('class','mousecursor') .addEvent('mouseover',function(){this.src = 'images/moreleft_over.gif';}) .addEvent('mouseout', function(){this.src = 'images/moreleft.gif';}) .addEvent('click', this.animate.pass('left',this)) ).injectInside(this.navleft); // Add our "RIGHT" button, right being "NEXT/MORE" and add it's Events, then inject it inside our 'nav' DIV this.right = new Element('span') .setStyle('visibility','hidden').adopt( new Element('img').setProperty('src','images/moreright.gif') .setProperty('class','mousecursor') .addEvent('mouseover',function(){this.src = 'images/moreright_over.gif';}) .addEvent('mouseout', function(){this.src = 'images/moreright.gif';}) .addEvent('click', this.animate.pass('right',this)) ).injectInside(this.navright); }, // Inserts our code generated HTML into the body of the page injectInside : function(elm){ // If our images array is greater than 1, set our "MORE/NEXT" button to visible if(this.images.length > 1) this.right.setStyle('visibility','hidden'); // Now inject! $(elm).adopt(this.frame); }, // Adds the images to our 'overflow' DIV. We specify the images on DOM Ready, but eventually can automatically generate via AJAX if need be addImages : function(limit, numlimit, newsrc){ // If we have an initial limit to display - or - we are loading the page for the first time, create our initial amount of images if(limit){ var i = 0; this.images.each(function(src,idx){ if(i < numlimit){ // Create a new IMG element, set the src property to the defined image location, and inject it into our 'overflow' DIV newDiv = new Element('div').injectInside(this.overflow).setHTML('Blf'); //new Element('img').setProperty('src',src).injectInside(this.overflow); // Now update the size variable this.size += this.unit; i++; } },this); // Else, just add } else { // Create a new IMG element, set the src property to the defined image location, and inject it into our 'overflow' DIV newDiv = new Element('div').injectInside(this.overflow).setHTML('Blf'); // Now update the size variable this.size += this.unit; } // Update the width of our 'overflow' DIV to be the amount of images * our image size (defined at the top of this script 'unit') this.overflow.setStyle('width',Math.abs(this.size)+'px'); }, // The animation process, we pass 'direction' from our navigation buttons LEFT/RIGHT animate : function(direction){ //console.log("Starting position:" + this.position); // If the user has clicked, but our animation is in progress, exit if(this.moving) return; // Get our current margin var margin = this.unit * this.position; // If we're moving our DIV to the right, add if(direction == 'right') this.position++; else this.position--; // else minus // Set our new margin var newMargin = this.unit * this.position; // Now we have our direction and margin variables, animate it! new Fx.Style(this.overflow, 'margin-left', { duration: this.animationDuration, // Defined at the top of this script. onStart: function(){this.moving = true;}.bind(this), // We are now moving, bind our variable back into this sub onComplete: function(){ this.moving = false; // Load IMG on the fly if(direction == "right"){ if(this.images[this.position-2] != null){ // Clear the IMG src. $('overflowdiv').getElements('img')[this.position-2].src = ""; // If there's an IMG to add on the END of the DIV, do it! this.addImages(false, 1, this.position+2); } }else{ if(this.images[this.position-1] != null){ // Remove the IMG $('overflowdiv').getElements('img')[this.position+3]; // If there's an IMG to add on the END of the DIV, do it! $('overflowdiv').getElements('img')[this.position-1].src = this.images[this.position-1]; } } }.bind(this) // We have finished moving, bind our variable back into this sub }).start(margin,newMargin); // Use our new margin variables // If our position is less than or equal to 0, then hide our "PREVIOUS/LESS" button if(!this.position) this.left.setStyle('visibility','hidden'); // Else if our position is greater than 0 show our "PREVIOUS/LESS" button else this.left.setStyle('visibility','visible'); // Do the same for our "NEXT/MORE" button if(this.position == (this.images.length-5)) this.right.setStyle('visibility','hidden'); else this.right.setStyle('visibility','visible'); } }); // on DOM Ready window.addEvent('domready', function (){ // Initialize our class ib = new ImageBrowser(); // Inject our images ib.addImages(true, 5); // Insert it into our page ib.injectInside($('slider')); }); function showpict(content) { var el = $('imagebig'); new Ajax('php/vitaminee-slideimages.php',{ postBody:'showpict='+content, update: el, method: 'post' }).request(); }