Hi !! in this post i going to teach you how to add lightbox effect to all images in your blogspot
Follow these steps,
1 -- Go To Blogger > Layout > Edit HTML
2 -- Search for the code :
<body>3 -- Add this code right before <body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>4 – Now search for this Code :
<style type="text/css">
/* jQuery lightBox plugin - Gallery style */
#gallery {
background-color: #444;
padding: 10px;
width: 520px;
}
#gallery ul { list-style: none; }
#gallery ul li { display: inline; }
#gallery ul img {
border: 5px solid #3e3e3e;
border-width: 5px 5px 20px;
}
#gallery ul a:hover img {
border: 5px solid #fff;
border-width: 5px 5px 20px;
color: #fff;
}
#gallery ul a:hover { color: #fff; }
</style>
<script src="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.js" type="text/javascript"/>
<link href="http://dinhquanghuy.110mb.com/lightbox/jquery.lightbox-0.5.css" media="screen" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
$(function() {
$('a[rel*=lightbox]').lightBox();
});
</script>
<script type="text/javascript">
$(function() {
$('a[rel*=lightbox]').lightBox();
});
</script>
5 – Replace it with the code below :
<script type="text/javascript">
$(function() {
$('a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)').lightBox();
});
</script>
That’s All!
2 comments:
It doesn't work with firefox, safari, chrome... It works only with Internet Explorer! Blogger change all the "blogspot.com" into "blogspot.**", for exemple for belgium it is now ".be". Perhaps we should wait...or it will not work anymore???
It works again : )
Post a Comment