February 25, 2019

Home » » How to Add jShowOff jQuery Content Slider to Blogger

How to Add jShowOff jQuery Content Slider to Blogger

By No comments

How to Add jShowOff jQuery Content Slider to Blogger

 
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating 'slides' from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site.
To include jShowOff jQuery Content Slider to your blogger blog, follow the steps given below.
jShowOff jQuery Featured Content Slider to Blogger
Login to your Blogger account and go to "Template"--> "Edit HTML" of your blog.
Now add below code just before </head> tag:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'></script>
<script src='http://ajax.aspnetcdn.com/ajax/jquery.migrate/jquery-migrate-1.2.1.min.js' type='text/javascript'></script>

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

/*

Title:  jShowOff: a jQuery Content Rotator Plugin
Author:  Erik Kallevig
Version: 0.1.2
Website: http://ekallevig.com/jshowoff
License:  Dual licensed under the MIT and GPL licenses.

*/

(function($){$.fn.jshowoff=function(settings){var config={animatePause:true,autoPlay:true,changeSpeed:600,controls:true,controlText:{play:'Play',pause:'Pause',next:'Next',previous:'Previous'},effect:'fade',hoverPause:true,links:true,speed:3000};if(settings)$.extend(true,config,settings);if(config.speed<(config.changeSpeed+20)){alert('jShowOff: Make speed at least 20ms longer than changeSpeed; the fades aren\'t always right on time.');return this;};this.each(function(i){var $cont=$(this);var gallery=$(this).children().remove();var timer='';var counter=0;var preloadedImg=[];var howManyInstances=$('.jshowoff').length+1;var uniqueClass='jshowoff-'+howManyInstances;var cssClass=config.cssClass!=undefined?config.cssClass:'';$cont.css('position','relative').wrap('<div class="jshowoff '+uniqueClass+'" />');var $wrap=$('.'+uniqueClass);$wrap.css('position','relative').addClass(cssClass);$(gallery[0]).clone().appendTo($cont);preloadImg();if(config.controls){addControls();if(config.autoPlay==false){$('.'+uniqueClass+'-play').addClass(uniqueClass+'-paused jshowoff-paused').text(config.controlText.play);};};if(config.links){addSlideLinks();$('.'+uniqueClass+'-slidelinks a').eq(0).addClass(uniqueClass+'-active jshowoff-active');};if(config.hoverPause){$cont.hover(function(){if(isPlaying())pause('hover');},function(){if(isPlaying())play('hover');});};if(config.autoPlay&&gallery.length>1){timer=setInterval(function(){play();},config.speed);};if(gallery.length<1){$('.'+uniqueClass).append('<p>For jShowOff to work, the container element must have child elements.</p>');};function transitionTo(gallery,index){var oldCounter=counter;if((counter>=gallery.length)||(index>=gallery.length)){counter=0;var e2b=true;}
else if((counter<0)||(index<0)){counter=gallery.length-1;var b2e=true;}
else{counter=index;}
if(config.effect=='slideLeft'){var newSlideDir,oldSlideDir;function slideDir(dir){newSlideDir=dir=='right'?'left':'right';oldSlideDir=dir=='left'?'left':'right';};counter>=oldCounter?slideDir('left'):slideDir('right');$(gallery[counter]).clone().appendTo($cont).slideIt({direction:newSlideDir,changeSpeed:config.changeSpeed});if($cont.children().length>1){$cont.children().eq(0).css('position','absolute').slideIt({direction:oldSlideDir,showHide:'hide',changeSpeed:config.changeSpeed},function(){$(this).remove();});};}else if(config.effect=='fade'){$(gallery[counter]).clone().appendTo($cont).hide().fadeIn(config.changeSpeed,function(){if($.browser.msie)this.style.removeAttribute('filter');});if($cont.children().length>1){$cont.children().eq(0).css('position','absolute').fadeOut(config.changeSpeed,function(){$(this).remove();});};}else if(config.effect=='none'){$(gallery[counter]).clone().appendTo($cont);if($cont.children().length>1){$cont.children().eq(0).css('position','absolute').remove();};};if(config.links){$('.'+uniqueClass+'-active').removeClass(uniqueClass+'-active jshowoff-active');$('.'+uniqueClass+'-slidelinks a').eq(counter).addClass(uniqueClass+'-active jshowoff-active');};};function isPlaying(){return $('.'+uniqueClass+'-play').hasClass('jshowoff-paused')?false:true;};function play(src){if(!isBusy()){counter++;transitionTo(gallery,counter);if(src=='hover'||!isPlaying()){timer=setInterval(function(){play();},config.speed);}
if(!isPlaying()){$('.'+uniqueClass+'-play').text(config.controlText.pause).removeClass('jshowoff-paused '+uniqueClass+'-paused');}};};function pause(src){clearInterval(timer);if(!src||src=='playBtn')$('.'+uniqueClass+'-play').text(config.controlText.play).addClass('jshowoff-paused '+uniqueClass+'-paused');if(config.animatePause&&src=='playBtn'){$('<p class="'+uniqueClass+'-pausetext jshowoff-pausetext">'+config.controlText.pause+'</p>').css({fontSize:'62%',textAlign:'center',position:'absolute',top:'40%',lineHeight:'100%',width:'100%'}).appendTo($wrap).addClass(uniqueClass+'pauseText').animate({fontSize:'600%',top:'30%',opacity:0},{duration:500,complete:function(){$(this).remove();}});}};function next(){goToAndPause(counter+1);};function previous(){goToAndPause(counter-1);};function isBusy(){return $cont.children().length>1?true:false;};function goToAndPause(index){$cont.children().stop(true,true);if((counter!=index)||((counter==index)&&isBusy())){if(isBusy())$cont.children().eq(0).remove();transitionTo(gallery,index);pause();};};function preloadImg(){$(gallery).each(function(i){$(this).find('img').each(function(i){preloadedImg[i]=$('<img>').attr('src',$(this).attr('src'));});});};function addControls(){$wrap.append('<p class="jshowoff-controls '+uniqueClass+'-controls"><a class="jshowoff-play '+uniqueClass+'-play" href="#null">'+config.controlText.pause+'</a> <a class="jshowoff-prev '+uniqueClass+'-prev" href="#null">'+config.controlText.previous+'</a> <a class="jshowoff-next '+uniqueClass+'-next" href="#null">'+config.controlText.next+'</a></p>');$('.'+uniqueClass+'-controls a').each(function(){if($(this).hasClass('jshowoff-play'))$(this).click(function(){isPlaying()?pause('playBtn'):play();return false;});if($(this).hasClass('jshowoff-prev'))$(this).click(function(){previous();return false;});if($(this).hasClass('jshowoff-next'))$(this).click(function(){next();return false;});});};function addSlideLinks(){$wrap.append('<p class="jshowoff-slidelinks '+uniqueClass+'-slidelinks"></p>');$.each(gallery,function(i,val){var linktext=$(this).attr('title')!=''?$(this).attr('title'):i+1;$('<a class="jshowoff-slidelink-'+i+' '+uniqueClass+'-slidelink-'+i+'" href="#null">'+linktext+'</a>').bind('click',{index:i},function(e){goToAndPause(e.data.index);return false;}).appendTo('.'+uniqueClass+'-slidelinks');});};});return this;};})(jQuery);(function($){$.fn.slideIt=function(settings,callback){var config={direction:'left',showHide:'show',changeSpeed:600};if(settings)$.extend(config,settings);this.each(function(i){$(this).css({left:'auto',right:'auto',top:'auto',bottom:'auto'});var measurement=(config.direction=='left')||(config.direction=='right')?$(this).outerWidth():$(this).outerHeight();var startStyle={};startStyle['position']=$(this).css('position')=='static'?'relative':$(this).css('position');startStyle[config.direction]=(config.showHide=='show')?'-'+measurement+'px':0;var endStyle={};endStyle[config.direction]=config.showHide=='show'?0:'-'+measurement+'px';$(this).css(startStyle).animate(endStyle,config.changeSpeed,callback);});return this;};})(jQuery);

//]]>
</script>

<style type="text/css">
/* jShowOff jQuery Content Slider to Blogger : www.bloggertipandtrick.net */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
#bttjshowoffslider{background:#efefef; position:relative; overflow:hidden; width:600px; height:300px; font-family:Droid Serif,sans-serif; font-size:13px}
.jshowoff{width:600px; margin:10px 0}
.jshowoff div{width:600px; height:300px}
.jshowoff div, .jshowoff img, .jshowoff{}
#basicFeatures, .jshowoff.basicFeatures, .jshowoff.basicFeatures img, .jshowoff.basicFeatures div{}
.jshowoff div p, .jshowoff div h2{_background-color:#efefef}
.jshowoff h2, .jshowoff p{font-size:18px; padding:15px 20px 0px; margin:0}
.jshowoff p{font-size:13px; line-height:15px}
.float-right{float:right; padding:15px 20px 15px 20px}
.jshowoff p.jshowoff-slidelinks{position:absolute; bottom:5px; right:5px; margin:0; padding:0}
.jshowoff-slidelinks a, .jshowoff-controls a{display:block; color:#fff; padding:5px 7px 5px; margin:5px 0 0 5px; float:none; text-decoration:none; outline:none; font-size:11px; line-height:14px; display:inline-block; font-family:Droid Serif,sans-serif}
.jshowoff-slidelinks a:hover, .jshowoff-controls a:hover{color:#fff}
.jshowoff-slidelinks a.jshowoff-active, .jshowoff-slidelinks a.jshowoff-active:hover{background-color:#fff; color:#000}
p.jshowoff-controls{background:#333; overflow:auto; height:1%; padding:0 0 5px 5px; margin:0 auto; text-align:center}
.jshowoff-controls a{margin:5px 5px 0 0; font-size:12px; line-height:15px; padding:4px 8px 5px}
.jshowoff-pausetext{color:#fff}
</style>

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

jQuery.noConflict();
jQuery(document).ready(function () {
    jQuery('#bttjshowoffslider').jshowoff({
     animatePause: true, // Whether to use 'Pause' animation text when pausing
     autoPlay: true, // Whether to start playing immediately
  changeSpeed: 600, // Speed of transition in milliseconds
  controls: true, // Whether to create & display controls (Play/Pause, Previous, Next) 
  controlText:{play:'Play',pause:'Pause',previous:'&#8249; Previous',next:'Next &#8250;'}, // Text to use for controls
  cssClass: 'bttjshowoff', // Add an additional custom class to the .jshowoff wrapper
  effect: 'slideLeft', // Type of transition effect: 'fade', 'slideLeft' or 'none'
  hoverPause: true, // Whether to pause on hover
  links: false, // Whether to create & display numeric links to each slide
  speed: 3000 // Time each slide is shown in milliseconds
 });
});

//]]>
</script>
Save your template and go to "Layout:.
Start new "HTML/JavaScript" box and include below code into that:
<!-- jShowOff Slider Started : www.bloggertipandtrick.net -->
<div id="bttjshowoffslider">

   <!-- Slide 1 Started -->
   <div><a href="SLIDE-1-LINK-HERE" title="Enter Slide 1 Title Here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5FcjVmXMRqHPpceB3eYifVXqhe7HTbFXzeElOUIIU6e4QGO5AW2ZZy52qan4iLYFCCLUTt3nWZ3gK0fvsp2JSUaj3GLpVuWECkjkeq27Euc0vtiySjC9bS7mDm4hynRmzr_NGr6xiTgy9/s1600/slide-image-1.jpg"/></a></div>
   <!-- Slide 1 End -->
   
   <!-- Slide 2 Started -->
   <div>
      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoiFYtEbao-1LH5ILXC9HqZOvjNKj33AtCYBozgf4XrB7BP7A-ZNXgEgFkSXpjLjX-aKuUDkk3Q_z1nbHdRTvvBGSK9BPFIx2ay9vyAiVt-LmRczyzA9IDZVXtdDEVleu9gTH-VCHMNFBm/s1600/slide-image-2.jpg" class="float-right" />
      <h2>HTML Slide</h2>
      <p>Example of an HTML slide.</p>
      <p>Lorem ipsum dolor sit amet, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam.</p>
      <p><a href="SLIDE-2-LINK-HERE" title="Enter Slide 2 Title Here">Learn More &#8250;</a></p>
   </div>
   <!-- Slide 2 End -->
   
   <!-- Slide 3 Started -->
   <div><a href="SLIDE-3-LINK-HERE" title="Enter Slide 3 Title Here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZSTsqC2n7alYnyMv7NAqTKbb_qjMKcFvoRNayZpNeKuGXdllUhylyQdjXZlSOD4mrPpaNC3cIINhkqtOfFi8lkZ9L3CWgi5iyMMsqVi6cm3DHtUnIqf4k4dxeTRfXrXAuOQo0RJvtKYeY/s1600/slide-image-3.jpg"/></a></div>
   <!-- Slide 3 End -->
   
   <!-- Slide 4 Started -->
   <div><a href="SLIDE-4-LINK-HERE" title="Enter Slide 4 Title Here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVXmGHX_k4WwTJlgYhjN11t8ByPBW4i6EAoTlsL6tE9A6p75Vq0PMCUsGJ4v-KjIcKXy7oFhrCG1LpcIM4gGMbHQHbifSblWH8U7jrGtnSMgXq15-LcphfGDzHqPaRoy23DNxPmnd956kj/s1600/slide-image-4.jpg"/></a></div>
   <!-- Slide 4 End -->
   
</div>
<!-- jShowOff Slider End : www.howtoblogacademy.blogspot.com -->
You can change/replace slide links, slide images and other HTML content with your own content.
Click "Save".
Now you have successfully added jShowOff jQuery content slider to Blogger.

0 Comments:

Post a Comment