20 Aug 2011
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.
Now Search for ]]></b:skin> Using Ctrl+F and paste the following CSS code Above/Before it:
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>
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
Til next time,
Prayag Verma
at 08:25
