Smooth Jquery featured content slider for blogger / Really Nice ! 2

| | , ,

Smooth Jquery featured content slider for blogger




















Follow simple and easy step to adding this slider to your blog ---->>>>

* First go to your blogger Dashboard

* Now click in design tab and edit HTML.

* Click in Small box to expand your blogger Template.

* Now find this code ]]</b:skin> by CTRL+F key.

* Copy below code and paste before ]]</b:skin>

#myGallery,#myGallerySet,#flickrGallery{width:610px;height:320px;z-index:5;margin-bottom:20px;margin-top:5px;overflow:hidden;}
.jdGallery a{outline:0}
#flickrGallery{width:500px;height:334px}
#myGallery img.thumbnail,#myGallerySet img.thumbnail{display:none}
.jdGallery{overflow:hidden;position:relative}
.jdGallery img{border:0;margin:0}
.jdGallery .slideElement{width:100%;height:100%;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('http://4.bp.blogspot.com/-8A2g9if4zDs/TWrWbJVT61I/AAAAAAAAAE8/cqq4f5Ykdbc/s1600/loading-bar-black.gif')}
.jdGallery .loadingElement{width:100%;height:100%;position:absolute;left:0;top:0;background-color:#000;background-repeat:no-repeat;background-position:center center;background-image:url('http://4.bp.blogspot.com/-8A2g9if4zDs/TWrWbJVT61I/AAAAAAAAAE8/cqq4f5Ykdbc/s1600/loading-bar-black.gif')}
.jdGallery .slideInfoZone{position:absolute;z-index:10;width:100%;margin:0;left:0;bottom:0;height:120px;background:#0A0A0A;color:#fff;text-indent:0;overflow:hidden}
* html .jdGallery .slideInfoZone{bottom:-1px}
.jdGallery .slideInfoZone h2{padding:0;margin:0;margin:2px 5px;font-size:14px;font-weight:bold;color:#fff !important}
.jdGallery .slideInfoZone p{padding:0;font-size:12px;margin:2px 5px;color:#eee}
.jdGallery div.carouselContainer{position:absolute;height:135px;width:100%;z-index:10;margin:0;left:0;top:0}
.jdGallery a.carouselBtn{position:absolute;bottom:0;right:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer}
.jdGallery .carousel{position:absolute;width:100%;margin:0;left:0;top:0;height:115px;background:#333;color:#fff;text-indent:0;overflow:hidden}
.jdExtCarousel{overflow:hidden;position:relative}
.jdGallery .carousel .carouselWrapper,.jdExtCarousel .carouselWrapper{position:absolute;width:100%;height:78px;top:10px;left:0;overflow:hidden}
.jdGallery .carousel .carouselInner,.jdExtCarousel .carouselInner{position:relative}
.jdGallery .carousel .carouselInner .thumbnail,.jdExtCarousel .carouselInner .thumbnail{cursor:pointer;background:#000;background-position:center center;float:left;border:solid 1px #fff}
.jdGallery .wall .thumbnail,.jdExtCarousel .wall .thumbnail{margin-bottom:10px}
.jdGallery .carousel .label,.jdExtCarousel .label{font-size:13px;position:absolute;bottom:5px;left:10px;padding:0;margin:0}
.jdGallery .carousel .wallButton,.jdExtCarousel .wallButton{font-size:10px;position:absolute;bottom:5px;right:10px;padding:1px 2px;margin:0;background:#222;border:1px solid #888;cursor:pointer}
.jdGallery .carousel .label .number,.jdExtCarousel .label .number{color:#b5b5b5}
.jdGallery a{font-size:100%;text-decoration:none;color:#fff}
.jdGallery a.right,.jdGallery a.left{position:absolute;height:99%;width:25%;cursor:pointer;z-index:10;filter:alpha(opacity=20);-moz-opacity:0.2;-khtml-opacity:0.2;opacity:0.2}
* html .jdGallery a.right,* html .jdGallery a.left{filter:alpha(opacity=50)}
.jdGallery a.right:hover,.jdGallery a.left:hover{filter:alpha(opacity=80);-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.jdGallery a.left{left:0;top:0;background:url('http://2.bp.blogspot.com/-KxWmtBgPFv0/TWrWPulTIoI/AAAAAAAAAEk/I6w1sr6jU4g/s1600/fleche1.png') no-repeat center left}
* html .jdGallery a.left{background:url('http://2.bp.blogspot.com/-JurfkRvjBXg/TWrWPV7snnI/AAAAAAAAAEc/PpTL5FKQn_0/s1600/fleche1.gif') no-repeat center left}
.jdGallery a.right{right:0;top:0;background:url('http://1.bp.blogspot.com/-a6lRly4I5O0/TWrWbNp4X8I/AAAAAAAAAE0/dk9zW0ABu7g/s1600/fleche2.png') no-repeat center right}
* html .jdGallery a.right{background:url('http://2.bp.blogspot.com/-lp2Uo03hTYQ/TWrWPyAakNI/AAAAAAAAAEs/iw79PwpYjJ0/s1600/fleche2.gif') no-repeat center right}
.jdGallery a.open{left:0;top:0;width:100%;height:100%}
.withArrows a.open{position:absolute;top:0;left:25%;height:99%;width:50%;cursor:pointer;z-index:10;background:none;-moz-opacity:0.8;-khtml-opacity:0.8;opacity:0.8}
.withArrows a.open:hover{background:url('http://4.bp.blogspot.com/-s59mNh7M7DM/TWrWbgpBpwI/AAAAAAAAAFM/kRCVTbSHmC8/s1600/open.png') no-repeat center center}
* html .withArrows a.open:hover{background:url('http://2.bp.blogspot.com/-8M7RnQRSOiA/TWrWbVQ0rSI/AAAAAAAAAFE/Qo2qMGCkLdM/s1600/open.gif') no-repeat center center;filter:alpha(opacity=80)}
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn{z-index:15;position:absolute;top:0;left:30px;height:20px;/*width:100px;background:url('img/carousel_btn.gif') no-repeat;*/
text-align:center;padding:0 10px;font-size:13px;background:#333;color:#fff;cursor:pointer;opacity:.4;-moz-opacity:.4;-khtml-opacity:0.4;filter:alpha(opacity=40)}
.jdGallery .gallerySelector{z-index:20;width:100%;height:100%;position:absolute;top:0;left:0;background:#000}
.jdGallery .gallerySelector h2{margin:0;padding:10px 20px 10px 20px;font-size:20px;line-height:30px;color:#fff !important}
.jdGallery .gallerySelector .gallerySelectorWrapper{overflow:hidden}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton{margin-left:10px;margin-top:10px;border:1px solid #888;padding:5px;height:40px;color:#fff;cursor:pointer;float:left}
.jdGallery .gallerySelector .gallerySelectorInner div.hover{background:#333}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview{background:#000;background-position:center center;float:left;border:none;width:40px;height:40px;margin-right:5px}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff}
.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info{margin:0;padding:0;font-size:12px;font-weight:normal;color:#fff !important}

* Now again find this code </head> by CTRL+ F key 

* Copy below code and paste before </head>

<script type='text/javascript'>
//<![CDATA[

/*
    This file is part of JonDesign's SmoothGallery v2.1beta1.

    JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 3 of the License, or
    (at your option) any later version.

    JonDesign's SmoothGallery is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with JonDesign's SmoothGallery; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

    Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
    Contributed code by:
    - Christian Ehret (bugfix)
 - Nitrix (bugfix)
 - Valerio from Mad4Milk for his great help with the carousel scrolling and many other things.
 - Archie Cowan for helping me find a bugfix on carousel inner width problem.
 - Tomocchino from #mootools for the preloader class
 Many thanks to:
 - The mootools team for the great mootools lib, and it's help and support throughout the project.
 - Harald Kirschner (digitarald: http://digitarald.de/) for all his great libs. Some used here as plugins.
*/

/* some quirks to circumvent broken stuff in mt1.2 */
function isBody(element){
 return (/^(?:body|html)$/i).test(element.tagName);
};
Element.implement({
 getPosition: function(relative){
  if (isBody(this)) return {x: 0, y: 0};
  var el = this, position = {x: 0, y: 0};
  while (el){
   position.x += el.offsetLeft;
   position.y += el.offsetTop;
   el = el.offsetParent;
  }
  var rpos = (relative) ? $(relative).getPosition() : {x: 0, y: 0};
  return {x: position.x - rpos.x, y: position.y - rpos.y};
 }
});

// declaring the class
var gallery = {
 Implements: [Events, Options],
 options: {
  showArrows: true,
  showCarousel: true,
  showInfopane: true,
  embedLinks: true,
  fadeDuration: 500,
  timed: false,
  delay: 9000,
  preloader: true,
  preloaderImage: true,
  preloaderErrorImage: true,
  /* Data retrieval */
  manualData: [],
  populateFrom: false,
  populateData: true,
  destroyAfterPopulate: true,
  elementSelector: "div.imageElement",
  titleSelector: "h3",
  subtitleSelector: "p",
  linkSelector: "a.open",
  imageSelector: "img.full",
  thumbnailSelector: "img.thumbnail",
  defaultTransition: "fade",
  /* InfoPane options */
  slideInfoZoneOpacity: 0.7,
  slideInfoZoneSlide: true,
  /* Carousel options */
  carouselMinimizedOpacity: 0.4,
  carouselMinimizedHeight: 20,
  carouselMaximizedOpacity: 0.9,
  thumbHeight: 75,
  thumbWidth: 100,
  thumbSpacing: 10,
  thumbIdleOpacity: 0.2,
  textShowCarousel: 'Pictures',
  showCarouselLabel: true,
  thumbCloseCarousel: true,
  useThumbGenerator: false,
  thumbGenerator: 'resizer.php',
  useExternalCarousel: false,
  carouselElement: false,
  carouselHorizontal: true,
  activateCarouselScroller: true,
  carouselPreloader: true,
  textPreloadingCarousel: 'Loading...',
  /* CSS Classes */
  baseClass: 'jdGallery',
  withArrowsClass: 'withArrows',
  /* Plugins: HistoryManager */
  useHistoryManager: false,
  customHistoryKey: false,
  /* Plugins: ReMooz */
  useReMooz: false
 },
 initialize: function(element, options) {
  this.setOptions(options);
  this.fireEvent('onInit');
  this.currentIter = 0;
  this.lastIter = 0;
  this.maxIter = 0;
  this.galleryElement = element;
  this.galleryData = this.options.manualData;
  this.galleryInit = 1;
  this.galleryElements = Array();
  this.thumbnailElements = Array();
  this.galleryElement.addClass(this.options.baseClass);
  
  if (this.options.useReMooz&&(this.options.defaultTransition=="fade"))
   this.options.defaultTransition="crossfade";
  
  this.populateFrom = element;
  if (this.options.populateFrom)
   this.populateFrom = this.options.populateFrom;  
  if (this.options.populateData)
   this.populateData();
  element.style.display="block";
  
  if (this.options.useHistoryManager)
   this.initHistory();
  
  if ((this.options.embedLinks)|(this.options.useReMooz))
  {
   this.currentLink = new Element('a').addClass('open').setProperties({
    href: '#',
    title: ''
   }).injectInside(element);
   if ((!this.options.showArrows) && (!this.options.showCarousel))
    this.galleryElement = element = this.currentLink;
   else
    this.currentLink.setStyle('display', 'none');
  }
  
  this.constructElements();
  if ((this.galleryData.length>1)&&(this.options.showArrows))
  {
   var leftArrow = new Element('a').addClass('left').addEvent(
    'click',
    this.prevItem.bind(this)
   ).injectInside(element);
   var rightArrow = new Element('a').addClass('right').addEvent(
    'click',
    this.nextItem.bind(this)
   ).injectInside(element);
   this.galleryElement.addClass(this.options.withArrowsClass);
  }
  this.loadingElement = new Element('div').addClass('loadingElement').injectInside(element);
  if (this.options.showInfopane) this.initInfoSlideshow();
  if (this.options.showCarousel) this.initCarousel();
  this.doSlideShow(1);
 },
 populateData: function() {
  currentArrayPlace = this.galleryData.length;
  options = this.options;
  var data = $A(this.galleryData);
  data.extend(this.populateGallery(this.populateFrom, currentArrayPlace));
  this.galleryData = data;
  this.fireEvent('onPopulated');
 },
 populateGallery: function(element, startNumber) {
  var data = [];
  options = this.options;
  currentArrayPlace = startNumber;
  element.getElements(options.elementSelector).each(function(el) {
   elementDict = $H({
    image: el.getElement(options.imageSelector).getProperty('src'),
    number: currentArrayPlace,
    transition: this.options.defaultTransition
   });
   if ((options.showInfopane) | (options.showCarousel))
    elementDict.extend({
     title: el.getElement(options.titleSelector).innerHTML,
     description: el.getElement(options.subtitleSelector).innerHTML
    });
   if ((options.embedLinks) | (options.useReMooz))
    elementDict.extend({
     link: el.getElement(options.linkSelector).href||false,
     linkTitle: el.getElement(options.linkSelector).title||false,
     linkTarget: el.getElement(options.linkSelector).getProperty('target')||false
    });
   if ((!options.useThumbGenerator) && (options.showCarousel))
    elementDict.extend({
     thumbnail: el.getElement(options.thumbnailSelector).getProperty('src')
    });
   else if (options.useThumbGenerator)
    elementDict.extend({
     thumbnail: options.thumbGenerator + '?imgfile=' + elementDict.image + '&max_width=' + options.thumbWidth + '&max_height=' + options.thumbHeight
    });
   
   data.extend([elementDict]);
   currentArrayPlace++;
   if (this.options.destroyAfterPopulate)
    el.dispose();
  });
  return data;
 },
 constructElements: function() {
  el = this.galleryElement;
  if (this.options.embedLinks && (!this.options.showArrows))
   el = this.currentLink;
  this.maxIter = this.galleryData.length;
  var currentImg;
  for(i=0;i<this.galleryData.length;i++)
  {
   var currentImg = new Fx.Morph(
    new Element('div').addClass('slideElement').setStyles({
     'position':'absolute',
     'left':'0px',
     'right':'0px',
     'margin':'0px',
     'padding':'0px',
     'backgroundPosition':"center center",
     'opacity':'0'
    }).injectInside(el),
    {duration: this.options.fadeDuration}
   );
   if (this.options.preloader)
   {
    currentImg.source = this.galleryData[i].image;
    currentImg.loaded = false;
    currentImg.load = function(imageStyle, i) {
     if (!imageStyle.loaded) {
      this.galleryData[i].imgloader = new Asset.image(imageStyle.source, {
                              'onload'  : function(img, i){
             img.element.setStyle(
             'backgroundImage',
             "url('" + img.source + "')")
             img.loaded = true;
             img.width = this.galleryData[i].imgloader.width;
             img.height = this.galleryData[i].imgloader.height;
            }.pass([imageStyle, i], this)
      });
     }
    }.pass([currentImg, i], this);
   } else {
    currentImg.element.setStyle('backgroundImage',
         "url('" + this.galleryData[i].image + "')");
   }
   this.galleryElements[parseInt(i)] = currentImg;
  }
 },
 destroySlideShow: function(element) {
  var myClassName = element.className;
  var newElement = new Element('div').addClass('myClassName');
  element.parentNode.replaceChild(newElement, element);
 },
 startSlideShow: function() {
  this.fireEvent('onStart');
  this.loadingElement.style.display = "none";
  this.lastIter = this.maxIter - 1;
  this.currentIter = 0;
  this.galleryInit = 0;
  this.galleryElements[parseInt(this.currentIter)].set({opacity: 1});
  if (this.options.showInfopane)
   this.showInfoSlideShow.delay(1000, this);
  if (this.options.useReMooz)
   this.makeReMooz.delay(1000, this);
  var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
  if (this.options.showCarousel&&(!this.options.carouselPreloader)&&(!this.options.useExternalCarousel))
   this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
  this.prepareTimer();
  if (this.options.embedLinks)
   this.makeLink(this.currentIter);
 },
 nextItem: function() {
  this.fireEvent('onNextCalled');
  this.nextIter = this.currentIter+1;
  if (this.nextIter >= this.maxIter)
   this.nextIter = 0;
  this.galleryInit = 0;
  this.goTo(this.nextIter);
 },
 prevItem: function() {
  this.fireEvent('onPreviousCalled');
  this.nextIter = this.currentIter-1;
  if (this.nextIter <= -1)
   this.nextIter = this.maxIter - 1;
  this.galleryInit = 0;
  this.goTo(this.nextIter);
 },
 goTo: function(num) {
  this.clearTimer();
  if(this.options.preloader)
  {
   this.galleryElements[num].load();
   if (num==0)
    this.galleryElements[this.maxIter - 1].load();
   else
    this.galleryElements[num - 1].load();
   if (num==(this.maxIter - 1))
    this.galleryElements[0].load();
   else
    this.galleryElements[num + 1].load();
    
  }
  if (this.options.embedLinks)
   this.clearLink();
  if (this.options.showInfopane)
  {
   this.slideInfoZone.clearChain();
   this.hideInfoSlideShow().chain(this.changeItem.pass(num, this));
  } else
   this.currentChangeDelay = this.changeItem.delay(500, this, num);
  if (this.options.embedLinks)
   this.makeLink(num);
  this.prepareTimer();
  /*if (this.options.showCarousel)
   this.clearThumbnailsHighlights();*/
 },
 changeItem: function(num) {
  this.fireEvent('onStartChanging');
  this.galleryInit = 0;
  if (this.currentIter != num)
  {
   for(i=0;i<this.maxIter;i++)
   {
    if ((i != this.currentIter)) this.galleryElements[i].set({opacity: 0});
   }
   gallery.Transitions[this.galleryData[num].transition].pass([
    this.galleryElements[this.currentIter],
    this.galleryElements[num],
    this.currentIter,
    num], this)();
   this.currentIter = num;
   if (this.options.useReMooz)
    this.makeReMooz();
  }
  var textShowCarousel = formatString(this.options.textShowCarousel, num+1, this.maxIter);
  if ((this.options.showCarousel)&&(!this.options.useExternalCarousel))
   this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
  this.doSlideShow.bind(this)();
  this.fireEvent('onChanged');
 },
 clearTimer: function() {
  if (this.options.timed)
   $clear(this.timer);
 },
 prepareTimer: function() {
  if (this.options.timed)
   this.timer = this.nextItem.delay(this.options.delay, this);
 },
 doSlideShow: function(position) {
  if (this.galleryInit == 1)
  {
   imgPreloader = new Image();
   imgPreloader.onload=function(){
    this.startSlideShow.delay(10, this);
   }.bind(this);
   imgPreloader.src = this.galleryData[0].image;
   if(this.options.preloader)
    this.galleryElements[0].load();
  } else {
   if (this.options.showInfopane)
   {
    if (this.options.showInfopane)
    {
     this.showInfoSlideShow.delay((500 + this.options.fadeDuration), this);
    } else
     if ((this.options.showCarousel)&&(this.options.activateCarouselScroller))
      this.centerCarouselOn(position);
   }
  }
 },
 createCarousel: function() {
  var carouselElement;
  if (!this.options.useExternalCarousel)
  {
   var carouselContainerElement = new Element('div').addClass('carouselContainer').injectInside(this.galleryElement);
   this.carouselContainer = new Fx.Morph(carouselContainerElement, {transition: Fx.Transitions.Expo.easeOut});
   this.carouselContainer.normalHeight = carouselContainerElement.offsetHeight;
   this.carouselContainer.set({'opacity': this.options.carouselMinimizedOpacity, 'top': (this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight)});
   this.carouselBtn = new Element('a').addClass('carouselBtn').setProperties({
    title: this.options.textShowCarousel
   }).injectInside(carouselContainerElement);
   if(this.options.carouselPreloader)
    this.carouselBtn.set('html', this.options.textPreloadingCarousel);
   else
    this.carouselBtn.set('html', this.options.textShowCarousel);
   this.carouselBtn.addEvent(
    'click',
    function () {
     this.carouselContainer.cancel();
     this.toggleCarousel();
    }.bind(this)
   );
   this.carouselActive = false;
 
   carouselElement = new Element('div').addClass('carousel').injectInside(carouselContainerElement);
   this.carousel = new Fx.Morph(carouselElement);
  } else {
   carouselElement = $(this.options.carouselElement).addClass('jdExtCarousel');
  }
  this.carouselElement = new Fx.Morph(carouselElement, {transition: Fx.Transitions.Expo.easeOut});
  this.carouselElement.normalHeight = carouselElement.offsetHeight;
  if (this.options.showCarouselLabel)
   this.carouselLabel = new Element('p').addClass('label').injectInside(carouselElement);
  carouselWrapper = new Element('div').addClass('carouselWrapper').injectInside(carouselElement);
  this.carouselWrapper = new Fx.Morph(carouselWrapper, {transition: Fx.Transitions.Expo.easeOut});
  this.carouselWrapper.normalHeight = carouselWrapper.offsetHeight;
  this.carouselInner = new Element('div').addClass('carouselInner').injectInside(carouselWrapper);
  if (this.options.activateCarouselScroller)
  {
   this.carouselWrapper.scroller = new Scroller(carouselWrapper, {
    area: 100,
    velocity: 0.2
   })
   
   this.carouselWrapper.elementScroller = new Fx.Scroll(carouselWrapper, {
    duration: 400,
    onStart: this.carouselWrapper.scroller.stop.bind(this.carouselWrapper.scroller),
    onComplete: this.carouselWrapper.scroller.start.bind(this.carouselWrapper.scroller)
   });
  }
 },
 fillCarousel: function() {
  this.constructThumbnails();
  this.carouselInner.normalWidth = ((this.maxIter * (this.options.thumbWidth + this.options.thumbSpacing + 2))+this.options.thumbSpacing) + "px";
  if (this.options.carouselHorizontal)
   this.carouselInner.style.width = this.carouselInner.normalWidth;
 },
 initCarousel: function () {
  this.createCarousel();
  this.fillCarousel();
  if (this.options.carouselPreloader)
   this.preloadThumbnails();
 },
 flushCarousel: function() {
  this.thumbnailElements.each(function(myFx) {
   myFx.element.dispose();
   myFx = myFx.element = null;
  });
  this.thumbnailElements = [];
 },
 toggleCarousel: function() {
  if (this.carouselActive)
   this.hideCarousel();
  else
   this.showCarousel();
 },
 showCarousel: function () {
  this.fireEvent('onShowCarousel');
  this.carouselContainer.start({
   'opacity': this.options.carouselMaximizedOpacity,
   'top': 0
  }).chain(function() {
   this.carouselActive = true;
   this.carouselWrapper.scroller.start();
   this.fireEvent('onCarouselShown');
   this.carouselContainer.options.onComplete = null;
  }.bind(this));
 },
 hideCarousel: function () {
  this.fireEvent('onHideCarousel');
  var targetTop = this.options.carouselMinimizedHeight - this.carouselContainer.normalHeight;
  this.carouselContainer.start({
   'opacity': this.options.carouselMinimizedOpacity,
   'top': targetTop
  }).chain(function() {
   this.carouselActive = false;
   this.carouselWrapper.scroller.stop();
   this.fireEvent('onCarouselHidden');
   this.carouselContainer.options.onComplete = null;
  }.bind(this));
 },
 constructThumbnails: function () {
  element = this.carouselInner;
  for(i=0;i<this.galleryData.length;i++)
  {
   var currentImg = new Fx.Morph(new Element ('div').addClass("thumbnail").setStyles({
     backgroundImage: "url('" + this.galleryData[i].thumbnail + "')",
     backgroundPosition: "center center",
     backgroundRepeat: 'no-repeat',
     marginLeft: this.options.thumbSpacing + "px",
     width: this.options.thumbWidth + "px",
     height: this.options.thumbHeight + "px"
    }).injectInside(element), {duration: 200}).start({
     'opacity': this.options.thumbIdleOpacity
    });
   currentImg.element.addEvents({
    'mouseover': function (myself) {
     myself.cancel();
     myself.start({'opacity': 0.99});
     if (this.options.showCarouselLabel)
      $(this.carouselLabel).set('html', '<span class="number">' + (myself.relatedImage.number + 1) + "/" + this.maxIter + ":</span> " + myself.relatedImage.title);
    }.pass(currentImg, this),
    'mouseout': function (myself) {
     myself.cancel();
     myself.start({'opacity': this.options.thumbIdleOpacity});
    }.pass(currentImg, this),
    'click': function (myself) {
     this.goTo(myself.relatedImage.number);
     if (this.options.thumbCloseCarousel&&(!this.options.useExternalCarousel))
      this.hideCarousel();
    }.pass(currentImg, this)
   });
   
   currentImg.relatedImage = this.galleryData[i];
   this.thumbnailElements[parseInt(i)] = currentImg;
  }
 },
 log: function(value) {
  if(console.log)
   console.log(value);
 },
 preloadThumbnails: function() {
  var thumbnails = [];
  for(i=0;i<this.galleryData.length;i++)
  {
   thumbnails[parseInt(i)] = this.galleryData[i].thumbnail;
  }
  this.thumbnailPreloader = new Preloader();
  if (!this.options.useExternalCarousel)
   this.thumbnailPreloader.addEvent('onComplete', function() {
    var textShowCarousel = formatString(this.options.textShowCarousel, this.currentIter+1, this.maxIter);
    this.carouselBtn.set('html', textShowCarousel).setProperty('title', textShowCarousel);
   }.bind(this));
  this.thumbnailPreloader.load(thumbnails);
 },
 clearThumbnailsHighlights: function()
 {
  for(i=0;i<this.galleryData.length;i++)
  {
   this.thumbnailElements[i].cancel();
   this.thumbnailElements[i].start(0.2);
  }
 },
 changeThumbnailsSize: function(width, height)
 {
  for(i=0;i<this.galleryData.length;i++)
  {
   this.thumbnailElements[i].cancel();
   this.thumbnailElements[i].element.setStyles({
    'width': width + "px",
    'height': height + "px"
   });
  }
 },
 centerCarouselOn: function(num) {
  if (!this.carouselWallMode)
  {
   var carouselElement = this.thumbnailElements[num];
   var position = carouselElement.element.offsetLeft + (carouselElement.element.offsetWidth / 2);
   var carouselWidth = this.carouselWrapper.element.offsetWidth;
   var carouselInnerWidth = this.carouselInner.offsetWidth;
   var diffWidth = carouselWidth / 2;
   var scrollPos = position-diffWidth;
   this.carouselWrapper.elementScroller.start(scrollPos,0);
  }
 },
 initInfoSlideshow: function() {
  /*if (this.slideInfoZone.element)
   this.slideInfoZone.element.remove();*/
  this.slideInfoZone = new Fx.Morph(new Element('div').addClass('slideInfoZone').injectInside($(this.galleryElement))).set({'opacity':0});
  var slideInfoZoneTitle = new Element('h2').injectInside(this.slideInfoZone.element);
  var slideInfoZoneDescription = new Element('p').injectInside(this.slideInfoZone.element);
  this.slideInfoZone.normalHeight = this.slideInfoZone.element.offsetHeight;
  this.slideInfoZone.element.setStyle('opacity',0);
 },
 changeInfoSlideShow: function()
 {
  this.hideInfoSlideShow.delay(10, this);
  this.showInfoSlideShow.delay(500, this);
 },
 showInfoSlideShow: function() {
  this.fireEvent('onShowInfopane');
  this.slideInfoZone.cancel();
  element = this.slideInfoZone.element;
  element.getElement('h2').set('html', this.galleryData[this.currentIter].title);
  element.getElement('p').set('html', this.galleryData[this.currentIter].description);
  if(this.options.slideInfoZoneSlide)
   this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity], 'height': [0, this.slideInfoZone.normalHeight]});
  else
   this.slideInfoZone.start({'opacity': [0, this.options.slideInfoZoneOpacity]});
  if (this.options.showCarousel)
   this.slideInfoZone.chain(this.centerCarouselOn.pass(this.currentIter, this));
  return this.slideInfoZone;
 },
 hideInfoSlideShow: function() {
  this.fireEvent('onHideInfopane');
  this.slideInfoZone.cancel();
  if(this.options.slideInfoZoneSlide)
   this.slideInfoZone.start({'opacity': 0, 'height': 0});
  else
   this.slideInfoZone.start({'opacity': 0});
  return this.slideInfoZone;
 },
 makeLink: function(num) {
  this.currentLink.setProperties({
   href: this.galleryData[num].link,
   title: this.galleryData[num].linkTitle
  })
  if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
   this.currentLink.setStyle('display', 'block');
 },
 clearLink: function() {
  this.currentLink.setProperties({href: '', title: ''});
  if (!((this.options.embedLinks) && (!this.options.showArrows) && (!this.options.showCarousel)))
   this.currentLink.setStyle('display', 'none');
 },
 makeReMooz: function() {
  this.currentLink.setProperties({
   href: '#'
  });
  this.currentLink.setStyles({
   'display': 'block'
  });
  
  this.galleryElements[this.currentIter].element.set('title', this.galleryData[this.currentIter].title + ' :: ' + this.galleryData[this.currentIter].description);
  this.ReMooz = new ReMooz(this.galleryElements[this.currentIter].element, {
   link: this.galleryData[this.currentIter].link,
   shadow: false,
   dragging: false,
   addClick: false,
   resizeOpacity: 1
  });
  var img = this.galleryElements[this.currentIter];
  var coords = img.element.getCoordinates();
  delete coords.right;
  delete coords.bottom;
  
  widthDiff = coords.width - img.width;
  heightDiff = coords.height - img.height;
  
  coords.width = img.width;
  coords.height = img.height;
  
  coords.left += Math.ceil(widthDiff/2)+1;
  coords.top += Math.ceil(heightDiff/2)+1;
  
  this.ReMooz.getOriginCoordinates = function(coords) {
   return coords;
  }.bind(this, coords);
  this.currentLink.onclick = function () {
   this.ReMooz.open.bind(this.ReMooz)();
   return false;
  }.bind(this);
 },
 /* To change the gallery data, those two functions : */
 flushGallery: function() {
  this.galleryElements.each(function(myFx) {
   myFx.element.dispose();
   myFx = myFx.element = null;
  });
  this.galleryElements = [];
 },
 changeData: function(data) {
  this.galleryData = data;
  this.clearTimer();
  this.flushGallery();
  if (this.options.showCarousel) this.flushCarousel();
  this.constructElements();
  if (this.options.showCarousel) this.fillCarousel();
  if (this.options.showInfopane) this.hideInfoSlideShow();
  this.galleryInit=1;
  this.lastIter=0;
  this.currentIter=0;
  this.doSlideShow(1);
 },
 /* Plugins: HistoryManager */
 initHistory: function() {
  this.fireEvent('onHistoryInit');
  this.historyKey = this.galleryElement.id + '-picture';
  if (this.options.customHistoryKey)
   this.historyKey = this.options.customHistoryKey;
  
  this.history = new History.Route({
   defaults: [1],
   pattern: this.historyKey + '\\((\\d+)\\)',
   generate: function(values) {
    return [this.historyKey, '(', values[0], ')'].join('')
   }.bind(this),
   onMatch: function(values, defaults) {
    if (parseInt(values[0])-1 < this.maxIter)
     this.goTo(parseInt(values[0])-1);
   }.bind(this)
  });
  this.addEvent('onChanged', function(){
   this.history.setValue(0, this.currentIter+1);
   this.history.defaults=[this.currentIter+1];
  }.bind(this));
  this.fireEvent('onHistoryInited');
 }
};
gallery = new Class(gallery);

gallery.Transitions = new Hash ({
 fade: function(oldFx, newFx, oldPos, newPos){
  oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
  oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
  if (newPos > oldPos) newFx.start({opacity: 1});
  else
  {
   newFx.set({opacity: 1});
   oldFx.start({opacity: 0});
  }
 },
 crossfade: function(oldFx, newFx, oldPos, newPos){
  oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
  oldFx.options.duration = newFx.options.duration = this.options.fadeDuration;
  newFx.start({opacity: 1});
  oldFx.start({opacity: 0});
 },
 fadebg: function(oldFx, newFx, oldPos, newPos){
  oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
  oldFx.options.duration = newFx.options.duration = this.options.fadeDuration / 2;
  oldFx.start({opacity: 0}).chain(newFx.start.pass([{opacity: 1}], newFx));
 }
});

/* All code copyright 2007 Jonathan Schemoul */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Follows: Preloader (class)
 * Simple class for preloading images with support for progress reporting
 * Copyright 2007 Tomocchino.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

var Preloader = new Class({
  
  Implements: [Events, Options],

  options: {
    root        : '',
    period      : 100
  },
  
  initialize: function(options){
    this.setOptions(options);
  },
  
  load: function(sources) {
    this.index = 0;
    this.images = [];
    this.sources = this.temps = sources;
    this.total = this. sources.length;
    
    this.fireEvent('onStart', [this.index, this.total]);
    this.timer = this.progress.periodical(this.options.period, this);
    
    this.sources.each(function(source, index){
      this.images[index] = new Asset.image(this.options.root + source, {
        'onload'  : function(){ this.index++; if(this.images[index]) this.fireEvent('onLoad', [this.images[index], index, source]); }.bind(this),
        'onerror' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this),
        'onabort' : function(){ this.index++; this.fireEvent('onError', [this.images.splice(index, 1), index, source]); }.bind(this)
      });
    }, this);
  },
  
  progress: function() {
    this.fireEvent('onProgress', [Math.min(this.index, this.total), this.total]);
    if(this.index >= this.total) this.complete();
  },
  
  complete: function(){
    $clear(this.timer);
    this.fireEvent('onComplete', [this.images]);
  },
  
  cancel: function(){
    $clear(this.timer);
  }
  
});

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Follows: formatString (function)
 * Original name: Yahoo.Tools.printf
 * Copyright Yahoo.
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

function formatString() {
 var num = arguments.length;
 var oStr = arguments[0];
 for (var i = 1; i < num; i++) {
  var pattern = "\\{" + (i-1) + "\\}"; 
  var re = new RegExp(pattern, "g");
  oStr = oStr.replace(re, arguments[i]);
 }
 return oStr; 
}

//]]>
</script>
<script type='text/javascript'>
//<![CDATA[

/*
    This file is part of JonDesign's SmoothGallery v2.1beta1.

    JonDesign's SmoothGallery is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 3 of the License, or
    (at your option) any later version.

    JonDesign's SmoothGallery is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with JonDesign's SmoothGallery; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA

    Main Developer: Jonathan Schemoul (JonDesign: http://www.jondesign.net/)
*/

gallery.Transitions.extend({
 fadeslideleft: function(oldFx, newFx, oldPos, newPos){
  oldFx.options.transition = newFx.options.transition = Fx.Transitions.Cubic.easeOut;
  oldFx.options.duration = newFx.options.duration = 1500;
  if (newPos > oldPos)
  {
   newFx.start({
    left: [this.galleryElement.offsetWidth, 0],
    opacity: 1
   });
   oldFx.start({opacity: [1,0]});
  } else {
   newFx.start({opacity: [0,1]});
   oldFx.start({
    left: [0, this.galleryElement.offsetWidth],
    opacity: 0
   }).chain(function(fx){fx.set({left: 0});}.pass(oldFx));
  }
 },
 continuoushorizontal: function(oldFx, newFx, oldPos, newPos){
  oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
  if (
   ((newPos > oldPos) || ((newPos==0) && (oldPos == (this.maxIter-1) ))) &&
   (!((newPos == (this.maxIter-1 )) && (oldPos == 0)))
  ) {
   oldFx.set({opacity: 1});
   oldFx.start({
    left: [0, this.galleryElement.offsetWidth * -1]
   });
   newFx.set({opacity: 1, left: this.galleryElement.offsetWidth});
   newFx.start({
    left: [this.galleryElement.offsetWidth, 0]
   });
  } else  {
   oldFx.set({opacity: 1});
   oldFx.start({
    left: [0, this.galleryElement.offsetWidth]
   });
   newFx.set({opacity: 1, left: this.galleryElement.offsetWidth * -1});
   newFx.start({
    left: [this.galleryElement.offsetWidth * -1, 0]
   });
  }
 },
 continuousvertical: function(oldFx, newFx, oldPos, newPos){
  oldFx.options.transition = newFx.options.transition = Fx.Transitions.linear;
  if (
   ((newPos > oldPos) || ((newPos==0) && (oldPos == (this.maxIter-1) ))) &&
   (!((newPos == (this.maxIter-1 )) && (oldPos == 0)))
  ) {
   oldFx.set({opacity: 1});
   oldFx.start({
    top: [0, this.galleryElement.offsetHeight * -1]
   });
   newFx.set({opacity: 1, top: this.galleryElement.offsetHeight});
   newFx.start({
    top: [this.galleryElement.offsetHeight, 0]
   });
  } else  {
   oldFx.set({opacity: 1});
   oldFx.start({
    top: [0, this.galleryElement.offsetHeight]
   });
   newFx.set({opacity: 1, top: this.galleryElement.offsetHeight * -1});
   newFx.start({
    top: [this.galleryElement.offsetHeight * -1, 0]
   });
  }
 }
});

//]]>
</script>

* Now click to save your blogger Template.

* Again go to your blogger Dashboard and click in design tab.

* Now you Are here --->>> Page Element.

* Click in Add Gadget which is at your blogger sidebar.

* When open new window click in HTML/javascript from list.

* When open new blank box copy below code and paste in blank  box.

<script type='text/javascript'>
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: true,
delay: 6000,
slideInfoZoneOpacity: 0.8,
showCarousel: false,
slideInfoZoneSlide: false
});
}
window.addEvent('domready', startGallery);
</script>

<div class='fullbox_excerpt'>
<div class='fullbox_content'>
<div class='smooth_gallery'>
<div id='myGallery'>
<div class='imageElement'>
<h3>POST1 TITLE HERE</h3>
<p>ADD HERE POST1 SHORT DESCRIPTION...</p>
<a class='open' href='POST1 URL HERE' title='POST1 TITLE HERE'></a>
<img alt='' class='full' src='http://3.bp.blogspot.com/-2ximqRLxH_Q/Th32yr8lrkI/AAAAAAAABS4/aHlEi6Oef4w/s1600/1.jpg'/>
</div>
<div class='imageElement'>
<h3>POST2 TITLE HERE</h3>
<p>ADD HERE POST2 SHORT DESCRIPTION...</p>

<a class='open' href='POST2 URL HERE' title='TPOST2 TITLE HERE'></a>
<img alt='' class='full' src='http://2.bp.blogspot.com/-g1OQP46p9is/Th32y7Yn-II/AAAAAAAABTA/LOzzW0tEepg/s1600/2.jpg'/>
</div>
<div class='imageElement'>
<h3>POST3 TITLE HERE</h3>
<p>ADD HERE POST3 SHORT DESCRIPTION....</p>
<a class='open' href='POST3 URL HERE' title='POST3 TITLE HERE'></a>
<img alt='' class='full' src='http://3.bp.blogspot.com/-omWeIzS3A78/Th32zIsvCDI/AAAAAAAABTI/8q8XtxQjc08/s1600/3.jpg'/>
</div>
<div class='imageElement'>
<h3>POST4 TITLE HERE</h3>
<p>ADD HERE POST4 SHORT DESCRIPTION...</p>
<a class='open' href='POST4 URL HERE' title='POST4 TITLE HERE'></a>

<img alt='' class='full' src='http://2.bp.blogspot.com/-er3TqGJs52c/Th32zOZiEbI/AAAAAAAABTQ/B0HJxTqdbwQ/s1600/4.jpg'/>
</div>
<div class='imageElement'>
<h3>POST5 TITLE HERE</h3>
<p>ADD HERE POST5 SHORT DESCRIPTION....</p>
<a class='open' href='POST5 URL HERE' title='POST5 TITLE HERE'></a>
<img alt='' class='full' src='http://4.bp.blogspot.com/-eq_1Y-Qu_hg/Th32zaevxUI/AAAAAAAABTY/NoK4W4GfhxE/s1600/5.jpg'/>
</div>
</div></div></div></div>

NOTE:- Remove Highlighted text from above code with your own ok.

* Now click to save your HTML/javascript and after saving this element drag and drop below blogger header and again click to save button and now you are done... CHEERS.

StumpleUpon DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google I'm reading: Smooth Jquery featured content slider for blogger / Really Nice ! ~ Twitter FaceBook

2 Responses So Far:

chetaru said...

Hi..
Thanks for sharing this information and resources it's really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

Narender said...

I was just looking for such a awesome slider.Many-2 thanks for this.

Categories

Select Your Categories