Implementing jCarousel + Captify in Blogger





Prayag Verma
| Saturday, August 20, 2011 | Comments


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

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="http://4.bp.blogspot.com/-iC6vK_Hu22I/Tk08g-4HY4I/AAAAAAAAA7Q/RlpZ8q8HLZ0/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="http://1.bp.blogspot.com/-6ea7NXE4uVE/Tk08gdF2ouI/AAAAAAAAA7M/vmrAN0vqQjo/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





By Prayag Verma
A blogger and wannabe Web Developer + Designer currently in college learning about computers. A CSS Lover , Blogger Template Designer , Manga Fan , Geeky Nerd , Music Addict and Yogaholic ! Get more from Prayag on and Twitter


Want to get these Updates straight to your Inbox , Then Subscribe !


JOIN THE DISCUSSION

Any feedback, questions or ideas are always welcome. In case you are posting Code ,then first escape it using Postify and then paste it in the comments