Facebook Fan Page Tutorials With All Latest Codes: Latest Imege Slideshow for Facebook Static FBML tab

Demo Video:

Code:

<!-- FanPageTutorials.blogspot.com/ --> <style> .slider { width: 480px; } .slider a.sliderNext, .slider a.sliderPrev { border: none; text-decoration: none; float: left; display: block; height: 25px; width: 14px; } .slider a.sliderNext { margin-top: 24px; margin-left: 5px; background: url(http://weavora.com/blog/fx-images/next.png) no-repeat 0 0; } .slider a.sliderPrev { margin-top: 25px; margin-right: 5px; background: url(http://weavora.com/blog/fx-images/prev.png) no-repeat 0 0; } .slider a.sliderNext.inactive { background: url(http://weavora.com/blog/fx-images/next_inactive.png) no-repeat 0 0; } .slider a.sliderPrev.inactive { background: url(http://weavora.com/blog/fx-images/prev_inactive.png) no-repeat 0 0; } .slider .clear { float: none; clear: both; } .slider .sliderImage { border: 2px solid #ccc; float: left; margin: 0 3px 0 3px; line-height: 0; } .slider .sliderImage:hover, .slider .sliderImageCurrent { border-color: #519dd0; } .slider .sliderImage img{ border: none; } .sliderWindow { overflow: hidden; width: 440px; float: left; } .slider .sliderImagesContainer { width: 10000px; } .bigImage { width: 480px; text-align: center; } </style><br /> <div id="app" onclick="appObserver.init();" onkeypress="appObserver.init();" onmousedown="appObserver.init();"><br /> <br /> <div id="bigImage_0" class="bigImage"><img src="http://weavora.com/blog/fx-images/400/400-0.jpg" /></div><div id="bigImage_1" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-1.jpg" /></div><div id="bigImage_2" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-2.jpg" /></div><div id="bigImage_3" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-3.jpg" /></div><div id="bigImage_4" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-4.jpg" /></div><div id="bigImage_5" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-5.jpg" /></div><div id="bigImage_6" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-6.jpg" /></div><div id="bigImage_7" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-7.jpg" /></div><div id="bigImage_8" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-8.jpg" /></div><div id="bigImage_9" class="bigImage" style="display: none"><img src="http://weavora.com/blog/fx-images/400/400-9.jpg" /></div><div class="slider" id="slider"><a href="#" class="sliderPrev inactive"></a><br /> <div class="sliderWindow"><div class="sliderImagesContainer"><a href="#" class="sliderImage sliderImageCurrent"><img src="http://weavora.com/blog/fx-images/100/100-0.jpg" /></a><br /> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-1.jpg" /></a><br /> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-2.jpg" /></a><br /> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-3.jpg" /></a><br /> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-4.jpg" /></a><br /> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-5.jpg" /></a><br /> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-6.jpg" /></a><br /> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-7.jpg" /></a><br /> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-8.jpg" /></a><br /> <a href="#" class="sliderImage"><img src="http://weavora.com/blog/fx-images/100/100-9.jpg" /></a><br /> </div></div><a href="#" class="sliderNext"></a><br /> <div class="clear"></div></div></div><script> var appObserver = { isInited: false, init: function() { if (!appObserver.isInited) { (new fx(document.getElementById('accordion'))).accordion(); (new fx(document.getElementById('slider'))).slider( { onclick: function(next, prev) { (new fx(document.getElementById('bigImage_' + prev))).fadeIn( function() { // document.getElementById('bigImage_' + next).setStyle('display','block'); (new fx(document.getElementById('bigImage_' + next))).fadeOut(); } ) } } ); appObserver.isInited = true; } } }; </script><br /> <script> var utils = { hasClass: function(element, className) { return element.getClassName().match(new RegExp('(\\s|^)'+className+'(\\s|$)')); }, addClass: function(element, className) { if (!utils.hasClass(element,className)) element.setClassName(element.getClassName() + " " + className); }, removeClass: function(element, className) { if (utils.hasClass(element,className)) { var reg = new RegExp('(\\s|^)'+className+'(\\s|$)'); element.setClassName(element.getClassName().replace(reg,' ')); } }, findByClass: function(className, rootElement) { var root = rootElement || document.getRootElement(); var elements = []; var child = root.getChildNodes(); for(var i = 0; i < child.length; i++) { if (utils.hasClass(child[i], className)) { elements.push(child[i]); } else { elements = elements.concat(utils.findByClass(className, child[i])); } } return elements; } }; function fx(element) { // make this instance visible in private functions var self = this; this.element = element; // set default slide direction this.direction = fx.VERTICAL; /** * Slide down * * @param duration integer slide down duration * @param callback function callback for slide down ending * @return fx */ this.slideDown = function(duration, callback) { slide('down', duration, callback); return this; }; /** * Slide up * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.slideUp = function(duration, callback) { slide('up', duration, callback); return this; }; /** * Slide toggle * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.slideToggle = function(duration, callback) { if (this.element.getStyle('display') == 'none' || this.element.getClientHeight() == 0 || this.element.getClientWidth() == 0) return this.slideDown(duration, callback); else return this.slideUp(duration, callback); }; /** * Fade in * * @param duration integer slide down duration * @param callback function callback for slide down ending * @return fx */ this.fadeIn = function(duration, callback) { fade('in', duration, callback); return this; }; /** * Fade out * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.fadeOut = function(duration, callback) { fade('out', duration, callback); return this; }; /** * Fade toggle * * @param duration integer slide up duration * @param callback function callback for slide up ending * @return fx */ this.fadeToggle = function(duration, callback) { if (this.element.getStyle('display') == 'none' || this.element.getClientHeight() == 0 || this.element.getClientWidth() == 0) return this.fadeOut(duration, callback); else return this.fadeIn(duration, callback); }; /** * Set slide direction * * @param direction fx.HORIZONTAL, fx.VERTICAL or fx.DIAGONAL * @return fx */ this.direction = function(direction) { if (direction == fx.HORIZONTAL || direction == fx.VERTICAL || direction == fx.DIAGONAL) this.direction = direction; return this; }; this.accordion = function(params) { // extend default options var options = { header: 'header', section: 'section', expanded: 'expanded' }; if (params) for(var key in params) options[key] = params[key]; // find all headers and section var headers = utils.findByClass(options.header, this.element); var sections = utils.findByClass(options.section, this.element); // now we should walk through header and bind click action to them var index = 0; for(var i = 0; i < headers.length; i++) { headers[i].addEventListener('click', function(event){ var targetSection = event.target.getTabIndex(); // hide open section for(var index = 0; index < sections.length; index++) { if (index != targetSection) { (new fx(sections[index])).slideUp(); utils.removeClass(headers[index], options.expanded); } } // open target section (new fx(sections[targetSection])).slideToggle(function(a, b){ if (!utils.hasClass(headers[targetSection], options.expanded)) utils.addClass(headers[targetSection], options.expanded); else utils.removeClass(headers[targetSection], options.expanded); }); }); headers[i].setTabIndex(i); sections[i].setTabIndex(i); } }; this.slider = function(params) { // extend default options var options = { prev: 'sliderPrev', next: 'sliderNext', image: 'sliderImage', imageContainer: 'sliderImagesContainer', imageCurrent: 'sliderImageCurrent', inactive: 'inactive', imageLeftMargin: 6, onclick: null }; if (params) for(var key in params) options[key] = params[key]; var imageContainer = utils.findByClass(options.imageContainer, this.element)[0]; // find all images var images = utils.findByClass(options.image, imageContainer); // set up default position var currentPosition = 0; // calculate positions' offsets var positionOffsets = []; for(var position = 0; position < images.length; position++) { if (position == 0) { positionOffsets[position] = 0; } else { positionOffsets[position] = positionOffsets[position - 1]; positionOffsets[position] -= images[position].getOffsetWidth(); positionOffsets[position] -= options.imageLeftMargin; } } // find next and prev buttons var next = utils.findByClass(options.next, this.element); var prev = utils.findByClass(options.prev, this.element); // bind next navigation if (next.length) { next[0].addEventListener('click', function(event){ if (currentPosition < images.length - 4) { currentPosition++; (new fx(imageContainer)).move(positionOffsets[currentPosition]); } if (currentPosition == 0) { utils.addClass(prev[0], options.inactive); } else { utils.removeClass(prev[0], options.inactive); } if (currentPosition >= images.length - 4) { utils.addClass(next[0], options.inactive); } else { utils.removeClass(next[0], options.inactive); } }); } // bind previous navigation if (prev.length) { prev[0].addEventListener('click', function(event){ if (currentPosition > 0) { currentPosition--; (new fx(imageContainer)).move(positionOffsets[currentPosition]); } if (currentPosition == 0) { utils.addClass(prev[0], options.inactive); } else { utils.removeClass(prev[0], options.inactive); } if (currentPosition >= images.length - 4) { utils.addClass(next[0], options.inactive); } else { utils.removeClass(next[0], options.inactive); } }); } // bind item onclick callback for(var i = 0; i < images.length; i++) { images[i].setTabIndex(i).addEventListener('click', function(event){ var currentImage = utils.findByClass(options.imageCurrent, self.element)[0]; utils.removeClass(currentImage, options.imageCurrent); var target = (utils.removeClass(event.target, options.image)) ? event.target : event.target.getParentNode(); utils.addClass(target, options.imageCurrent); if (options.onclick) options.onclick.apply(target, [target.getTabIndex(), currentImage.getTabIndex()]); }); } }; this.move = function(step, duration, callback) { if (!duration) { duration = fx.NORMAL; // set default duration } else if (typeof duration == "function") { callback = duration; duration = fx.NORMAL; // set default duration } else if (duration != parseInt(duration) || Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <= 0) { duration = fx.NORMAL; // set default duration } else { duration = Math.abs(parseInt(duration)); } var animationObject = Animation(self.element); animationObject.duration(duration); animationObject.to('marginLeft', step); // set slide ending callback if (typeof callback == "function") animationObject .checkpoint(1, callback); animationObject.ease().blind().go(); }; /** * Slide animation * * @private * * @param type could by up or down * @param duration integer slide up duration * @param callback function callback for slide up ending * */ function slide(type, duration, callback) { // check duration and callback if (!duration) { duration = fx.NORMAL; // set default duration } else if (typeof duration == "function") { callback = duration; duration = fx.NORMAL; // set default duration } else if (duration != parseInt(duration) || Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <= 0) { duration = fx.NORMAL; // set default duration } else { duration = Math.abs(parseInt(duration)); } var animationObject = Animation(self.element); // first of all we need to show or hide element if (type == 'down') animationObject.show(); else animationObject.hide(); // set slide direction if (self.direction == fx.DIAGONAL) animationObject .to('width', (type == 'down') ? 'auto': 0) .to('height', (type == 'down') ? 'auto': 0); else if (self.direction == fx.HORIZONTAL) animationObject .to('width', (type == 'down') ? 'auto': 0); else animationObject .to('height', (type == 'down') ? 'auto': 0); if (type == 'down') { if (self.direction == fx.DIAGONAL) animationObject .from('width', 0) .from('height', 0); else if (self.direction == fx.HORIZONTAL) animationObject .from('width', 0); else animationObject .from('height', 0); } animationObject.duration(duration); // set slide ending callback if (typeof callback == "function") animationObject .checkpoint(1, callback); animationObject.blind().go(); } /** * Fade animation * * @private * * @param type could by in or out * @param duration integer slide up duration * @param callback function callback for slide up ending * */ function fade(type, duration, callback) { // check duration and callback if (!duration) { duration = fx.NORMAL; // set default duration } else if (typeof duration == "function") { callback = duration; duration = fx.NORMAL; // set default duration } else if (duration != parseInt(duration) || Math.abs(parseInt(duration)) == Math.NaN || parseInt(duration) <= 0) { duration = fx.NORMAL; // set default duration } else { duration = Math.abs(parseInt(duration)); } var animationObject = Animation(self.element); // first of all we need to show or hide element // and set initial opacity if (type == 'out') { animationObject.show().from('opacity', 0); } else { animationObject.hide().from('opacity', 1); } // set fade animation animationObject .to('opacity', (type == 'out') ? 1 : 0); animationObject.duration(duration); // set slide ending callback if (typeof callback == "function") animationObject .checkpoint(1, callback); animationObject.blind().go(); } this._debug = function(msg) { (new Dialog()).showMessage('Debug', msg, 'Close'); } }; // duration constants fx.SLOW = 800; fx.NORMAL = 500; // default fx.FAST = 200; // direction constants fx.HORIZONTAL = 'horizontal'; fx.VERTICAL = 'vertical'; // default fx.DIAGONAL = 'diagonal'; </script> <br> <!-- This code from http://www.facebook.com/pages/FBML-Maker-2012-Latest/255098647879868?sk=wall--> <!-- FanPageTutorials.blogspot.com/ -->