How to Add jShowOff jQuery Content Slider to Blogger

Posted by Lasantha Bandara on April 23rd, 2014 File Under : css, html, java script, jquery, widget3 Comments

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="http://2.bp.blogspot.com/-ulJH_fzUjsA/U1cvTCYFnII/AAAAAAAAIgw/yP_p7Nwkk0s/s1600/slide-image-1.jpg"/></a></div>
   <!-- Slide 1 End -->
   
   <!-- Slide 2 Started -->
   <div>
      <img src="http://2.bp.blogspot.com/-aGtNHQQmZHw/U1czbdsZR8I/AAAAAAAAIhE/xA7mEHa7IQg/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="http://1.bp.blogspot.com/-9kaEeWmMii8/U1cvTJnsqzI/AAAAAAAAIgo/yRYms2nwYo0/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="http://1.bp.blogspot.com/-n_pKyFa46go/U1cvVJ9xwUI/AAAAAAAAIg4/QzLE_EjTK-k/s1600/slide-image-4.jpg"/></a></div>
   <!-- Slide 4 End -->
   
</div>
<!-- jShowOff Slider End : www.bloggertipandtrick.net -->

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.

File Under : css, html, java script, jquery, widget

3 Responses to “How to Add jShowOff jQuery Content Slider to Blogger”

  1. David says:

    How would I change the time interval for the slides to rotate?

  2. Joram says:

    Thanks for you wonderful tips that has just set me off to blogging!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.