Stages of implementation to integrate Blogger Fancybox in turn tell.
1. First, take a backup of our blog template code.
2. The following code between the template code we are looking for.
</head>
This code would add the following code immediately above.
<link href='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://dl.getdropbox.com/u/1704149/js-depo/jquery.fancybox-1.2.1/js/jquery.fancybox-1.2.1.pack.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$("a").fancybox();
});
</script>
3. We save our template.
4. Now, the images you add blogs with fancybox application will open. The following extra editing codes.
rel="group" title="image title"
class="iframe"
Before
<a href="http://www.bloggergallery.com/" title="Blogger Templates Gallery">This goes to iframe link preview</a>
After
<a class="iframe" href="http://www.bloggergallery.com/" title="Blogger Templates Gallery">This goes to iframe link preview</a>