Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Light Box ( Fancy box ) Widget For Blogger Images And Links

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Light Box ( Fancy box ) Widget For Blogger Images And Links

Light Box ( Fancy box ) Widget For Blogger Images And Links

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

30,164 views

We all add images and photos in our blogs. And as we all say A picture is worth a thousand words.

Caution : This hack not working perfectly with blogger. so please wait until we find the best solution for this hack.

I Published Fixed Tutorial Here

blogspot by default enables us to add and display images in our posts, But what if we want to make our blogs photos looks more professional and stylish ?
The answer is to use this new amazing widget.
Please see this demo and click on the images to see how it is working.
It’s very easy to integrate this hack to your blog in only 1 step.

Adding The Widget To Your Blog In One Step
Caution : Please backup your template (Download Full Template) Before making any changes.

Go to you blogger account, and then navigate to Layout >> Edit Html
And Find the next Code.

</head>

And exactly before it add the following code.

<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() {
$(&quot;a&quot;).fancybox();
});
</script>

Now Please Click Save Template .
And the widget will work now automatically with all your blog images.
Once you or your blog visitors click on any image on your blog the image will be displayed in a nice and elegant frame.

Customizations And Options

If you want to go for better customization with this blogger hack then you can display you images in groups Display next And previous Buttons, or you can make your links opens in a new frame without leaving your blog.

Display images in groups

After adding an image to your blog post and before publishing it. change the editing more from Compose to Edit Html And now find the image code, it must be like the following code.

<a href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

now we have to add rel Tag which put all images with the same rel tage in one group.
For example. if you have 6 images in your post, and added the tag rel=”groub1″ for 3 of your images, and the tag rel=”groub2″ for the another 3 of images. once you click on an image, it’ll be displayed in a frame with next and previous buttons, this buttons will take you to the other 2 images with the same rel tag.
Where to add the rel tag ?
This is the image code before adding the rel tag

<a href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>

And the next one is after adding the tag.

<a rel="group1" href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>
Adding Titles For Your Images

To add a title we have to add a tag for the image code. so we’ll have to locate the image code, see the previous step to know how to locate it
And now add the following tag. title=”Image Title”
And the code should be like this

<a rel="group1" title="Image Title" href="The Image URL"><img style="margin: 0px auto 10px; width: 178px; height: 133px;" src="The Image URL"/></a>
Apply It For Your Links

While typing a post you may add a link, and if you switched the typing more from Compose to Edit Html you’ll see the links look like this

<a href="http://www.allblogtools.com/">Blogger Templates </a> 

and we should add the following tags to it.
title=”Link Title ” class=”iframe”
so it will be

<a href="http://www.allblogtools.com/" title="Link Title " class="iframe">Blogger Templates</a>

thats it.

Demo

Click here to see demo. thanks for bloggergallery.com

Liked It ? Please Share

Comments

11 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. electrinick says:

    thanks,it worked.and now my blog looks better

  2. electrinick says:

    Hi again me.I added the code to my templates yes it worked but when I click any link on my blog, it tries to open like a picture.it thinks that I clicked picture but I just clicked “homepage” link.Finally it did not open.so I deleted the code.Do you have any solution.I hope I could tell my problem.

  3. TeknoMobi says:

    Friends I’m trying to solve the problem.

    • Max says:

      @ TeknoMobi, thanks for your comment , i wish we can solve this error soon, btw plz don’t post url in comments.

  4. electrinick says:

    hi!What about the problem?
    was it solved?

  5. editorcassh says:

    I have the same problem! A put code below the @head@, but no results!

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here