Implementing jCarousel + Captify in Blogger

This plugin is a combination jQuery jCarousel and jQuery Captify together to create a slick and cool way of showing the thumbnails and captions. Thumbnails can be scrolled with the use of previous and next buttons and when rolling/hovering over any thumbnail, the caption or the title of the thumbnail will slide up.





             See Demo                                                                                            Download



Steps to Add it to Blogger:

1.Login to the Blogger account

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="jcarousellite_1.0.1.pack.js"></script> 
<script type="text/javascript" src="captify.tiny.js"></script> 


<script type="text/javascript"> 
		$(function() {
    		$(".slider").jCarouselLite({
        		btnNext: ".next",
        		btnPrev: ".prev",
        		visible: 5,
                        auto: 900
    		});
		});
 
		$(document).ready(function(){
			$('img.captify').captify({
				// all of these options are... optional
				// ---
				// speed of the mouseover effect
				speedOver: 'fast',
				// speed of the mouseout effect
				speedOut: 'normal',
				// how long to delay the hiding of the caption after mouseout (ms)
				hideDelay: 500,	
				// 'fade', 'slide', 'always-on'
				animation: 'slide',		
				// text/html to be placed at the beginning of every caption
				prefix: '',		
				// opacity of the caption on mouse over
				opacity: '0.7',					
				// the name of the CSS class to apply to the caption box
				className: 'caption-bottom',	
				// position of the caption (top or bottom)
				position: 'bottom',
				// caption span % of the image
				spanWidth: '100%'
			});
		});
 
	</script> 

Now Search for ]]></b:skin> Using Ctrl+F and paste the following CSS code Above/Before it:

a:link {
	color:#0054a6;
	text-decoration:none; 
}
}
/************************************************
	      JCAROUSEL LITE		
************************************************/
#list {
	height:130px;
	width:880px; 
	margin:30px auto; 
}

.slider {
	float:left;
	left: -5000px; 
	margin:15px; 
	position:relative; 
	visibility:hidden;	
}
	
.slider ul {
	height:100px;
	width:600px; 
}

.slider ul li {
	padding:0 20px;
}

.slider ul li img {
	cursor:pointer;
	height:100px; 
	padding-top:3px;
	width:120px;  
}

.prev {
	cursor:pointer; 
	float:left;
	padding-top:90px;
}

.next {
	cursor:pointer; 
	float:right; 
	padding-top:80px;
padding-right:110px;
}

/************************************************
	      CAPTIFY CAPTION		
************************************************/
.caption-top, .caption-bottom {
	background: #000000;
	color: #ffffff; 
	cursor:default;
	padding:2px; 
	font-size:11px;   
	text-align:center;
}

.caption-top {
	border-width:0px;
}

.caption-bottom {
	border-width:0px;
}

.caption a, .caption a {
	background:#000;
	border:none; 
	text-decoration:none;  
	padding:2px;
}

.caption a:hover, .caption a:hover {
	background:#202020;
}

2.Go to the Post/Page you want to add this plugin and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<style>
a:link {
	color:#0054a6;
	text-decoration:none; 
}
}
/************************************************
	      JCAROUSEL LITE		
************************************************/
#list {
	height:130px;
	width:880px; 
	margin:30px auto; 
}

.slider {
	float:left;
	left: -5000px; 
	margin:15px; 
	position:relative; 
	visibility:hidden;	
}
	
.slider ul {
	height:100px;
	width:600px; 
}

.slider ul li {
	padding:0 20px;
}

.slider ul li img {
	cursor:pointer;
	height:100px; 
	padding-top:3px;
	width:120px;  
}

.prev {
	cursor:pointer; 
	float:left;
	padding-top:90px;
}

.next {
	cursor:pointer; 
	float:right; 
	padding-top:80px;
padding-right:110px;
}

/************************************************
	      CAPTIFY CAPTION		
************************************************/
.caption-top, .caption-bottom {
	background: #000000;
	color: #ffffff; 
	cursor:default;
	padding:2px; 
	font-size:11px;   
	text-align:center;
}

.caption-top {
	border-width:0px;
}

.caption-bottom {
	border-width:0px;
}

.caption a, .caption a {
	background:#000;
	border:none; 
	text-decoration:none;  
	padding:2px;
}

.caption a:hover, .caption a:hover {
	background:#202020;
}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="jcarousellite_1.0.1.pack.js"></script> 
<script type="text/javascript" src="captify.tiny.js"></script> 
<script type="text/javascript"> 
		$(function() {
    		$(".slider").jCarouselLite({
        		btnNext: ".next",
        		btnPrev: ".prev",
        		visible: 5,
                        auto: 900
    		});
		});
 
		$(document).ready(function(){
			$('img.captify').captify({
				// all of these options are... optional
				// ---
				// speed of the mouseover effect
				speedOver: 'fast',
				// speed of the mouseout effect
				speedOut: 'normal',
				// how long to delay the hiding of the caption after mouseout (ms)
				hideDelay: 500,	
				// 'fade', 'slide', 'always-on'
				animation: 'slide',		
				// text/html to be placed at the beginning of every caption
				prefix: '',		
				// opacity of the caption on mouse over
				opacity: '0.7',					
				// the name of the CSS class to apply to the caption box
				className: 'caption-bottom',	
				// position of the caption (top or bottom)
				position: 'bottom',
				// caption span % of the image
				spanWidth: '100%'
			});
		});
 
	</script> 

4.Now for adding the images into this plugin see the following markup:

<div id="list">
			<div class="prev">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg546oXyJN12b1tsVWWewilbjm314pN01nNZCTf8NAgZTJpbtTAo1gt5MeJgChbkUoBKmwfpilNHmsr0W3Opp2s6lEH21v9u-BeqIAPtt_2MLmfJVOncJEWm03-76XhQtpu9As4Ws_c20pL/s1600/prev.jpg" alt="prev" /></div>

<div class="slider">
					<ul>
<li> 
<a href="#" title="Title 1"><img src="1.jpg" alt="Title 1" class="captify" /></a> 
</li>
<li> 
<a href="#" title="Title 2"><img src="2.jpg" alt="Title 2" class="captify" /></a> 
</li>
<li> 
<a href="#" title="Title 3"><img src="3.jpg" alt="Title 3" class="captify" /></a> 
</li>
</ul>
</div>
<div class="next">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLAjnLD9SbFqHvPpaaV4VqBYHvvpur6OMksH9wf0dKjzSv8dZeIKvhzzkkrCMn0q8T-ziKjXs-ODsdErGQqQPeafelLpOXtQoPfwREhG9Mxo-57vSjy8Mp733ro2QDYsKJLNiHQ8BGBWZo/s1600/next.jpg" alt="next" /></div>
</div>
</div>

Here Title tag will contain the text which will appear when the thumbnail is rolled/hovered upon.
Another Important thing to note is that the positioning of the Next and Previous Arrows can be out of place , to rectify this just manually change the placement of the arrows using the .next and .prev attributes present in the CSS Code.




5.Now save the Post/Page.


Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

             See Demo                                                                                            Download

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox