How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger

Posted Posted by ADMIN in , , Comments 2 comments




If you want to add a very attractive gallery to your blog you should read this tutorial,
Through this tutorial, only 3 steps you’ll be able to make your own gallery widget with jQuery, to add it for your blogger blog,
you add add it to header, sidebar, above posts area, on footer columns, and any where else on your template,
So let’s see step one.

Step 1. Adding The Gallery Codes To Your Template.

Go To your blogger dashboard, layout >> Edit html >>
And find this code,
 
]]></b:skin>

And Before it, Add the next code,
/* Blogger Zoom Gallery By AllBlogTools.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzyeDNMrW2lZF3iKJ7HArDoNHp3pv0m_mBFhugtVbk30mv4vkGtvw4qKwmj0Md-AEJE9wyh93yWvsNfjKCDD2MdY5Bhh5PvGGr8MIThww6BPXzwgiYXOaPrsQSgNXrWh7SPmOl0dHvSdPC/) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

Then Find this Tag
</head>

And add the next code before it.
<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>

Now we finished editing template, Click Save template,
And lets see the next step.

Step 2. Adding The Gallery To your template.

Go to Layout >> page elements and on your template’s sidebar, header or footer Click on ‘Add a Gadget‘.
then Select HTML/Javascript
A new window will appear, in title box Type your gallery title, and in content area Copy and Paste the next code
<ul class="thumb"> <li><a href="#"><img src="picture 1 Link" alt="" /></a></li> <li><a href="#"><img src="picture 2 Link" alt="" /></a></li> <li><a href="#"><img src="picture 3 Link" alt="" /></a></li> <li><a href="#"><img src="picture 4 Link" alt="" /></a></li> </ul>

Then instead Of picture 1 Link Type Your Image Url,
and if you want to make the image link to another page or url instead of # Add the target url.
Each time you want to add a new image to the gallery, just repeat this code.
<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>

That’s it.
Demo. See How is this gallery looks like on a blogger blog.
Click Here To See Demo Blogger Gallery

2 comments:

yanmaneee said...

goyard
kyrie 6
jordan retro
kd shoes
kyrie shoes
lebron 16
kyrie 6 shoes
golden goose
curry 4
kd 11 shoes

nechet said...

learn the facts here now our website have a peek at this web-site web why not look here replica louis vuitton

Post a Comment

sadasdasda