Sunday, 12 August 2012

Smooth Jquery featured content slider for blogger



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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBe4aEuWvdyvAnfddSiR1ckvz8b6UD-mIo28xB5HMIuPnQwLbSbZFS6fphF3diE4p0C6INBZW9StHhfNGIVcVnQ-ZhTTQ1Lnm29QgGHpdXYFIXqGwszTCoB4ITQBVm55-GErwDbNZw0E/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikBe4aEuWvdyvAnfddSiR1ckvz8b6UD-mIo28xB5HMIuPnQwLbSbZFS6fphF3diE4p0C6INBZW9StHhfNGIVcVnQ-ZhTTQ1Lnm29QgGHpdXYFIXqGwszTCoB4ITQBVm55-GErwDbNZw0E/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja9Jur13ogyb9TqohhunlwDIXOQsMdzH5Dqg-jcCDlDjOsekDI8QgZ8A38avbghaXhBM7AzXgDZlwghpzWabgs-saMeKzV40ltk247ToY9FQfkIEb8InKffcsR6HHT4CmnxrIZ1rdm63U/s1600/fleche1.png') no-repeat center left}
* html .jdGallery a.left{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCuXznslWRksGS3PCuOqow5XOfNKrjpQlQSmATO2ahRDFFUB1TreeCcK3F630Gl-aZwzRbIIL1I0KL3t-WU_8BBvBWe0bTnwB7QV7mHxMaRIc0NIxgFncgNfIdlEXLMHhZ5RHD3ud0vBg/s1600/fleche1.gif') no-repeat center left}
.jdGallery a.right{right:0;top:0;background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFihEeMdekIVwl-TjvKVZBvCnbmhRYYioKefxakQi0RvZBA4OXxVI4FqJyWnORGZtixGiLobAYgE_S34oC9YBLnKHkXuZvbSA_Pfjo8f4MAPACffH7ml4AwidmCSoQpJ3Ofo5pGA6lX5k/s1600/fleche2.png') no-repeat center right}
* html .jdGallery a.right{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimAs4j-CPUeiDOqm5yBB_STzdRta4nZfxMPRS8z4HZYsMgM00Aw2UzUTaFlAdLPYGthNJXLlad9GvXZtN_t35pXgfdQMHCK9Aaqmt9L39acvfP3tU_Bg27lfsr61zsnMD2IwWlFdHLq9M/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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8jFlee5wVmGC0ubDkjYqLBLkgXno4M-gvhqV7F570VXIprYGHjMYtBUZROWayiX3S0jTQivNcLDjxuIvfksCBF0hdrxAHuk7DAQCRbH1KkV5nfMUcU0SVEC8lB7K7hcg6GFS3ILlB-xw/s1600/open.png') no-repeat center center}
* html .withArrows a.open:hover{background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbUXhC2elcO-p78ZApNHZ93hl4W_OyYWW0SAQEO-tTIAqNOxdGNjW8BQ5A3urc8CYw-sti3oj6Ti5EFnhUSczzRe_NaYdnBLp_hC-L3DmVPvvj5e5AfY3T0iVHHXYEFG9bP5pYFU5d_qQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLe-i-9xqv0kM-3iTzBMBL21osdCWmxPfQhBSzlWORMVTNOY4lWGANod-OkxXpcfKzGh59M6x57uB7Qvh4ldlPrMsAJnTBVaDtlbZHfge-xCpqDxgohqOZssr-6gK3AIcxKIIwhA45DEmh/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisJ3mASyDomXH8ZRJ_D3yLzYg_3JwihY9WB6aFCZOy-WpswC1JQ5-L4hT_0imxl2X4wHrnyz4bd6mYfJIac6iljGbExYmXHuPZcPGie_Xa6MtZ7V3EGbTxplSPVwx3viYtMbm-rVAYx4zQ/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyqnmecNSOwNg_xgGRu88GT8RRPoSZRnuABAP0cdlNFNp1xi1U5I0UhSi6ed90o4Z6_u74ou3408CQag7DlGfR-NvxKJaguwLydOta5IE9bzp_959UfG2t0mEij29i3NSfvrJODS-csroH/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0_rMO73MMaPIGVJjnp9mQ3T24ZjNlN4Es4dfeZ23dY9fkqvDscAzp1AZktaR-k609kRibBmuhW4HKKs0TIWIf71JUeKDWB6bnXW3QY-QpllRmTDRohh162QCYPWXSImtTJRmArbQjPdrr/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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6DnEVENC_vx3_XCKpIGZauCPQtHK94fu1kkhyphenhyphenbPuYqe1ewHm8X6186h8K6VrvgtwZ0S8MObUAtwN_xJhukiCnuJo5ibX93zmTdPOtwE6_YB7W_1PznuoDSAsnQbMYCCxtH6O0SNDkSexA/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..
Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)