Adding some features to your Blogger site like a jQuery image gallery slider gives a new dimension to your site by making it more attractive to visitors. I’ll be sharing with you a nice tutorial I learned from the guys at Bloggertrix on how you can add this awesome slider. They made it easier for you to integrate into your site by using jQuery and CSS3.
The steps are simple:
- Login to Blogger > Blogger Dashboard > Click on the drop down menu.
- Select Layout
- Click Add Gadget > HTML/Javascript
- Copy and paste this code provided below
style type="text/css">
.container1 {
width: 660px;padding:
0;margin: 0 auto;
}
.folio_block {
position:
absolute;left: 50%; top: 50%;margin: -140px 0 0 -395px;}
.main_view {float: left;position: relative;}
/*--Window/Masking Styles--*/
.window {-moz-box-shadow: 0px 0px 5px #303030;
-webkit-box-shadow: 0px 0px 5px #303030;
box-shadow: 0px 0px 5px #303030;border:1px solid
#000000;height:240px; width: 660px;
margin-top:15px;overflow: hidden; /*--Hides anything outside
of the set width/height--*/
position: relative;
}
.image_reel {
position:
absolute;top: 0; left: 0;
}
.image_reel img {float: left;}
.paging_btrix {
position:
absolute;bottom: 10px; right: -7px;width: 178px; height:47px;z-index: 100;
/*--Assures the paging stays on the top layer--*/text-align: center;
line-height: 40px;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsGX-Uw9ijF1MU7s5rNt-WLratVicVra1QqbSIMPC9gMgGz6tctMB4XeglEKZuvcWfW7Y8Ght8DR7v86LzUKE7otZczz5mxpKGlvB4UCystAvyhQPlnvcSWnnD-6YVlCr_jSyEYtfRMpE/s1600/paging_btrix_bg2.png)
no-repeat;
display: none;
}
.paging_btrix a {
padding:
5px;text-decoration: none;color: #fff;
}
.paging_btrix a.active {
font-weight: bold;
background: #920000; border: 1px solid #610000;
-moz-border-radius:
3px;
-khtml-border-radius:
3px;
-webkit-border-radius: 3px;
}
.paging_btrix a:hover {font-weight: bold;}
</style>
<!-- bof Automatic Image Slider w/ CSS & jQuery from
Soh Tanaka -->
<div>
<div>
<div>
<div>
<a
href="#"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW4oz9hfJ2G9q1Rao24vsl_P4qBM9gPPoySw0i9euakT1TFFHkNXRbEPCxjJ1IWMyc0cY-Ppx-EPjbAK92-HCo2Zq47D1y3BDt3Ht4uQvocgAlZEm9IWdRmQM9dHIzCUWzGhlUX4hb5ls/s1600/
bloggertrix_imge1.jpg" alt="" /></a>
<a
href="#"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7QhVfdIdzZTWcxWNBHSC6gskBmp3NpzRT2vntaTc1YWEHXw_NtoXTzgFT7bZIlEiPNmVi2Z7rl6GvYUGbqb0ljMv3XOZHQZVJgK5ETLqDJiXP9WWonfbNRuQn-QqrUm288EXpAS6ub7c/s1600/bloggertrix_imge3.jpg"
alt="" /></a>
<a
href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhx0J-5xviFRB-STj4aberL-Ws_OOXv2wBO_yS_LNGbxmTJe7Yo6rxsRVtx32_nmM1kB9i1_8NL7x7XTVLDmcCQC4WlyH7zJqXJ2a5EtDCJjzKgOxNYiHjhISqXLd-d2gHgA3pwP1v_-Tg/s1600/bloggertrix_imge2.jpg"
alt="" /></a>
<a
href="#"><img
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmtbrUD33Q1Af-4QZXqca1hgyrZ17lTFALVRXs8vV00OYmWas1EzziTVwsiFe_fKAHMZtMDYyvTvmsbHe3xr8o6Jk8EmG_ZgPW45x6JYZJDg0KGGN1xYgZppaUFSwlqVHd64_SZo1SlaQ/s1600/bloggertrix_imge4.jpg"
alt="" /></a>
</div>
</div>
<div>
<a href="#"
rel="1">1</a>
<a
href="#" rel="2">2</a>
<a
href="#" rel="3">3</a>
<a
href="#" rel="4">4</a>
</div>
</div>
</div>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//Set Default State
of each portfolio piece
$(".paging_btrix").show();
$(".paging_btrix
a:first").addClass("active");
//Get size of images,
how many there are, then determin the size of the image reel.
var imageWidth =
$(".window").width();
var imageSum =
$(".image_reel img").size();
var imageReelWidth =
imageWidth * imageSum;
//Adjust the image
reel to its new size
$(".image_reel").css({'width' :
imageReelWidth});
//paging_btrix +
Slider Function
rotate = function(){
var triggerID =
$active.attr("rel") - 1; //Get number of times to slide
var
image_reelPosition = triggerID * imageWidth; //Determines the distance the
image reel needs to slide
$(".paging_btrix
a").removeClass('active'); //Remove all active class
$active.addClass('active'); //Add active class
(the $active is declared in the rotateSwitch function)
//Slider Animation
$(".image_reel").animate({
left:
-image_reelPosition
}, 500 );
};
//Rotation + Timing
Event
rotateSwitch =
function(){
play =
setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
$active =
$('.paging_btrix a.active').next();
if ( $active.length
=== 0) { //If paging_btrix reaches the end...
$active =
$('.paging_btrix a:first'); //go back to first
}
rotate(); //Trigger
the paging_btrix and slider function
}, 5000); //Timer
speed in milliseconds (3 seconds)
};
rotateSwitch(); //Run
function on launch
//On Hover
$(".image_reel
a").hover(function() {
clearInterval(play);
//Stop the rotation
}, function() {
rotateSwitch();
//Resume rotation
});
//On Click
$(".paging_btrix
a").click(function() {
$active = $(this);
//Activate the clicked paging_btrix
//Reset Timer
clearInterval(play);
//Stop the rotation
rotate(); //Trigger
rotation immediately
rotateSwitch(); //
Resume rotation
return false;
//Prevent browser jump to link anchor
});
});
</script>
Note: Always backup your template before doing any customizations.
Change the image URL’s with your own. You can also add your links to the images by replacing the sample links on the #
- Hit Save.
