Jquery Simple Image Slider with semi transparent Title and Caption. Jquery
write less. do more. Jquery is great plugin witch allows to create flash like slick effects in ease and very less weight. this slider is very easy to Install/Integrate on blogger blog. so let's see...
Before Going to Tutorial Take a Demo of this Slider
How to Integrate Simple Image Slider with Jquery ?
There are 4 Steps
a. Adding CSS code and customization !
b. Adding Jquery Plugin
c. Adding Javascript
d. Finally Adding Slider Widget
Adding CSS code and customization !
1. Go to
Blogger Dashboard >
Design tab >
Edit HTML
2. Find this
]]></b:skin> tag and put below code of section, Just before it!
#gallery {
position:relative;
height:320px;
width:540px;
overflow:hidden;
}
#gallery a {
float:left;
position:absolute;
}
#gallery a img {
border:none;
}
#gallery a.show {
z-index:500;
}
#gallery .caption {
z-index:600;
background-color:#000;
color:#ffffff;
height:100px;
width:100%;
position:absolute;
bottom:0;
}
#gallery .caption .content {
margin:5px;
}
#gallery .caption .content h3 {
margin:0;
padding:0;
color:#1DCCEF;
}
3. Save your Template
Adding Jquery Plugin
If you have already have Jquery plugin in your blog, then Ignore this step
Add this code before
</head> tag
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'></script>
Adding Javascript
Add this code before
</head> tag
<script type="text/javascript">
$(document).ready(function() {
slideShow();
});
function slideShow() {
var dur= 5000;
$('#gallery a').css({opacity: 0.0});
$('#gallery a:first').css({opacity: 1.0});
$('#gallery .caption').css({opacity: 0.7});
$('#gallery .caption').css({width: $('#gallery a').find('img').css('width')});
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
.animate({opacity: 0.7}, 400);
setInterval('gallery()', dur);
}
function gallery() {
var current = ($('#gallery a.show')? $('#gallery a.show') : $('#gallery a:first'));
var next = ((current.next().length) ? ((current.next().hasClass('caption'))? $('#gallery a:first') :current.next()) : $('#gallery a:first'));
var caption = next.find('img').attr('rel');
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
$('#gallery .caption').animate({opacity: 0.0}, { queue:false, duration:0 }).animate({height: '1px'}, { queue:true, duration:300 });
$('#gallery .caption').animate({opacity: 0.7},100 ).animate({height: '100px'},500 );
$('#gallery .content').html(caption);
}
</script>
Adding Slider Widget
1. Go to
Blogger Dashboard >
Design tab >
Page Elements tab
2. Add
HTML/JavaScript Gadget any where
3. Put Title Field as
Blank
4. Add bellow Html Widget Code in
Body of the widget and Customize it
<div id="gallery">
<a href="Link url" class="show">
<img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
</a>
<a href="Link Url" >
<img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
</a>
<div class="caption"><div class="content"></div></div>
<div style='clear:both;'/>
</div>
Customization:-
Replace
Link Url with link that you want
Replace
Image url here with Your Image and set it's width and Height
Replace
This is Title with your Title
Replace
This is Description with with a small Description
You can Add more Image slides by Adding following code just after this
<!-- You can add more n more images as link above --> tag and Customize it as Like above
<a href="Link Url" >
<img src="Image url here" alt="" width="540" height="320" title="" alt="" rel="<h3>This is Title</h3> This is Description "/>
</a>
5. Finally
Save your Widget!
Social sharing / bookmarking widget with Cool Gray-scale/Color hover widget to Blogger blog. i have given a beautiful sharing widget with css/jquery. This widget is used by me in way2blogging.blogspot.com with CSS. After moving to .Org domain name, i change the Template. 
