How to Add jQuery Image Gallery in blogger

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/AVvXsEiOuxFyJc4DgzTlnXdBKGMawhMGXXPM8eX8iraLq6dEq9Lp1UbV2dYCC7rgw_pyFpU7Z_LAudm0xIl1NfAMtiaA88VAu2Ec49dwoe2DyptONAgWv10zbBm7_FG3jd8IwDSIggYbAnSsPIQ/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/AVvXsEjDcVE3DrHke6SCOhS95rAEkYqnDtFXP2HObacvs26rcWGff34aP3fpAtZYHO_2JnlerVAMa-9wX8Zri9GPYnda4QSjwRuo6YucTbOGlJoBvznwIPs5jbjqHAWLrYZY7aBkrFvmyoTzR9A/s1600/ bloggertrix_imge1.jpg" alt="" /></a>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB2D0DsTMoAqYD33yoiSGJksNEd0zu6JbV1DjZo2goB1hy5czN8PvPA0EknF1bYBlgTyN5CQ5gb7yaDzN-9kNNiYCRw-eWDudZOh1w1vO9AIe3vxqslNRR6keNat3Lmro4ojHWhDQ26Ss/s1600/bloggertrix_imge3.jpg" alt="" /></a>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhssbs2AXXQavQCHyuBimXHfhqeyphJa7hxbz_Ut1aXg0xZb1_yynKeioL8Zjug8DoDbkmQJyX6vHy0tJv8fGddmlCkCDp3KD3xswKhsJUWAPPkpd_gLQJS-T96GrLqY1Knp7QlGPeiUdU/s1600/bloggertrix_imge2.jpg" alt="" /></a>
 <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzpc-XT_pBp3CuZQkyQBz7rLKeZbVMhcx0luSQEX_pxbEy_JPiuc8sbud8TzQt8pTwbQawkOg4sb8nBx4u7Z884HHTdugdZ2z_h0l7-rG5QM8reCovCetenLnXrpjUqKK-b5lkeBF7gBg/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.

Share it Please

Tweet

Islamicvideoportal

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.