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="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


0 comments:

Post a Comment

 
© 2009 Blogger Tips 2013 | Powered by Blogger