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


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

Post a Comment
Anonymous said...

It doesn't work i tried it and it won't work. The images do not show up and neither does the slider. I follow your every direction. I assume the last part was to be added as an Html widget so i did that and still nothing. I also included it in connection to the CSS code you gave and still nothing. What is it that i am doing wrong?? Thank you for any help.

@Jason Santoro

The main problem that I am thinking you are experiencing is that you are not hosting the JS files any where ,you have to host it on some service

Replace the Line 2-3 of Step 3 in "For Multiple Usage" Or Line 86-87 in "For Single Usage" with the following code:


<script type="text/javascript" src="http://www.onextrapixel.com/examples/jquery-jcarousel-lite-and-jquery-captify/js/jcarousellite_1.0.1.pack.js"></script>
<script type="text/javascript" src="http://www.onextrapixel.com/examples/jquery-jcarousel-lite-and-jquery-captify/js/captify.tiny.js"></script>

Up said...

how can i make it scrolling automaticly

@Up
Hi ,check the code ,I have altered it to make it scroll automatically (check out the example).

Just added the auto tag in the JavaScript Snippet, here 900 is the time in microseconds in-between the automatic scroll

Up said...

very thnk u prayag bhai i m a newbie from india keep rocking your blog is coolest of all thts y i m not sharing it with others they r gona get it any way
lol
tushar

Up said...

hi pryag bhai i m again how can we integrate this to recent post and popular post
it could be great idea u rox.

@Up

Check out this post (http://www.stylifyyourblog.com/2011/08/scrolling-recent-post-gadget-for.html)
Even though it isn't based on this plugin but it integrates automatic vertical scrolling , I would try to integrate this plugin with Recent post and Popular post widget soon

kawsar said...

the css is messed up and all over the place also it takes ages to load up