Home » Blogger Tutorials, Tricks and Hacks » blogger graphics » Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

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

|| View All Tutorials ||

Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

28,695 views

Few weeks ago, i posted here a tutorial about Light Box ( Fancy box ) Widget For Blogger Images And Links ( click here )
And we all mentioned that there are a lot of problems about this widget, refer to comments below the tutorial to know more.

Today i’ll write a tutorial about adding Updated and fixed lightbox widget for blogger.
And I WISH it’ll be easy and you’ll like it.

What’s New About This Widget
  • First of all we add the widget code to our template,
  • You’ll be able to Link this widget to your single images in blogger.
  • You can use it to make photo gallery.
  • You can make Slide show with it.
  • You can add it to your links.
How Is It Work
  • First of all we add the widget code to our template,
  • Then when we add an image to a new post we have to Link it to the widget by adding a tiny code to it by changing the post writing mode from compose to html don’t worry it’s easy, continue reading to figure it out
Step 1

GO to your blogger account dashboard and navigate to Layout >> Edit html and find the following code.

</head>

And Before it add the following code.

<!--Code-By-AllBlogTools-->
<link href='http://www.mydatanest.com/files/allblogtools/29603_izeup/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.mydatanest.com/files/allblogtools/29602_xemqf/lytebox.js' type='text/javascript'/>
<!--Code-By-AllBlogTools-->

Now we’ve add all require codes to the template, lets know how to use it.

Step 2 – How To Use

The way to make this widget works in your blog is very easy but you have to know what you do,
What you have to do is : add a small code to the images code. and you can find the images code in post writing area when you change the mode from compose to edit html Please see the next image.

Adding Superbox (Light Box) Widget To Blogger Images. Fixed.

What And How To Add :

Step 2.1 – Add It To Single Image

Go to blogger account, start writing your post in normal mode (compose)
And once you add an image to your post, please change your mode to edit html, see previous imsge

You’ll find the image code looks like the following.

<a onblur="try {parent.deselectBloggerImageGracefully();} 
catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI
/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg">
<img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer;
cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00
/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0"
alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

What we’ll need to add for this code is the next part

rel="lytebox"

Example Code For Single Image :

<a rel="lytebox" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

And you are done.

Step 2.2 – How To Make Photo Group Gallery

We’ll do the same as the previous step, but instead of adding Only

rel="lytebox"

we’ll have to add a name for this code so it’ll be

rel="lytebox[groub1]"

when you add this code for more than one image, all the images will open as a group.

Example Code For Images Album :

<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lytebox[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

Step 2.2 – How To Make A Slide Show

Instead Of adding

rel="lytebox[groub1]"

We’ll add

rel="lyteshow[groub1]"

Example Code For Slide Show :

<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

<a rel="lyteshow[groub1]" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s1600/3924705805_15d638ca8d_o.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 324px;" src="http://4.bp.blogspot.com/_JwD5r652h00/Swa1Adh6yPI/AAAAAAAAATA/THiv6vdejW0/s400/3924705805_15d638ca8d_o.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5406207422236379378" /></a>

Demo

Click here to see demo, special thanks for dolem

Step 2.3 – And You Can Add It To Links

The normal link code looks like this

<a href="http://www.google.com" title="Search Google"     
rev="width: 400px; height: 300px;">Google Search</a>

We’ll add the following Code to it.

rel="lyteframe"

So The Code will be

<a rel="lyteframe" href="http://www.google.com" title="Search Google"     
rev="width: 400px; height: 300px;">Google Search</a>

And you can apply the same settings for slide show and photo groups for the links.

Demo

Click here to see demo, special thanks for dolem

Liked It ? Please Share

Comments

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

  1. S. Erçetin says:

    Eyvallah aga sağolasın. Süper oldu.
    In english : Thank you for code. Good tutorial. Again thanks. It’s super….

  2. eam eneri says:

    dont understand how it is done. :( sos.! please.

  3. BeBen says:

    check it out one Max…so sexy lightbox…http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2 hihihihi

  4. Florence says:

    Oh Max! This is so helpful! I was watching the previous post, you mentioned it had problems, so I was waiting and waiting. Finally it works nicely. I’m so happy :) This is great! I like the lyteframe more, both are so nice.

  5. Max says:

    @ All, thanks for reply,
    @ eam eneri can you tell me which part you don’t understand it??

  6. Esydownloads says:

    This is nice Hack for blogger
    Thank you sir

    can you pls give me the “Javascript file” & “CSS File” so i upload to my web Hosting site
    I hope you will reply me Sir……

  7. esydownloads says:

    how can i make gallary like this pls see the link below this is a same light box

    http://www.bloggerplugins.org/2009/08/light-box-image-viewer-for-blogger.html#comment-form

    Sir Pls help me!!!!!!!!

  8. Nanggroe says:

    It’s not working in my template… Do u have a solution, check this -> http://www.belajar-sendiri.com/2009/12/background-twitter-gratis-pemandangan.html

  9. Summie says:

    Thanks for the tutorials. I’ve tried and it’s doesn’t load the picture that I uploaded to the blog. Lightbox is pop-out however fail to load the images. Please advise and it’s a very helpful tools to be used for pictures.

  10. Summie says:

    Hi Summie
    I can help you but how can i contact you ?

  11. Esydownloads says:

    Sorry for wrong name in my upper Comment

  12. Summie says:

    Hi Esydownloads, thanks for your help. You can reach me at cavdtelle.wan@gmail.com! Looking forward to get it fixed..

  13. Summie says:

    Hi Esydownloads, I got it work perfectly by refering to your blog @ http://www.bloggerplugins.org/2009/08/light-box-image-viewer-for-blogger.html#comment-form.. It’s awesome!!! Many thanks for your kind sharing….. *thumbs up*

  14. brewox says:

    help, not working in my blog

  15. chaz king says:

    Can you add text descriptions to these lightbox images. If so, what’s the code and how do I do it?

  16. RuYanda says:

    @chaz king
    I referred to the link Summie gave. Just add title=”caption” after rel=”lytebox” if you want to add text descriptions.

    THANK YOU for this hack!!! I tried several image hacks today and finally got what I want from you!

  17. ed says:

    works well in firefox on my main blog page but not in individual post pages…maybe there is a fix or I might be doing something wrong…can you help…love the idea of this hack…

  18. STF says:

    dosn`t work nou

  19. Max says:

    @ Esydownloads, you cna get the files from the first step code.

    @ Summie, i’m glad to see it on your blog.

    @ chaz king, yes you can by adding the tag title=”Your description” to your code.

    @ RuYanda, thanks for your help and for your kind words.

    @ ed, please wait until al the page loading is done.

    @ STF, please explain what’s going wrong with you.

  20. von Birken says:

    Hi,

    Yesterday it worked, but today doesn’t work. And in your demo blog, too…

    • Max says:

      @ von Birken, sorry dude for this, but the java files bandwidth exceed today, once i get the files i’ll put it here so you can download it and upload it to your own hosting server.

  21. Earn in PTC says:

    is it possible to embed the CSS and JAVASCRIPT in the blog template?
    thanks ahead!

  22. elijah says:

    why it didn’t work with my picture? yeah this tool was running but blank page.
    let me know please :(

  23. Max says:

    @ Earn in PTC, yes you can do it easily.

    @ elijah, just ,make sure that you link to the image in the right way.

  24. gerald says:

    Hi, i tried it but it didn’t work on my blog. It also messed up my posts. Pictures in my posts mixed up with the title of the next post. Take a look at my blog: http://usantnurses.blogspot.com/. The problem is i haven’t backed up my template. pls help. tnx

  25. Rezza says:

    hi max! hehe..nice tricks! love it so much… i have try this on my blog, first and second try i failed. Then i notice i need to change the post editor to the old one. Then i can make it work on my blog. You can see many tricks done here by me… http://minimastyles.blogspot.com

    @gerald maybe you used the new post editor? just change it back to the old one.

  26. Aver says:

    Hi, i’m trying to put this in my gallery, but doesn’t work, I have a Blogger and my pictures are in a flickr account, is possible to do this???

  27. well, its worked when i add to link host (phtobucket), but when i made to one i uploaded by blog tool, it sometimes work but moreoften the pic didnt showed

  28. anyway, is anyone could help my friend’s blog ? Pls check her http://reztylicious.blogspot.com/ , thrs something like crack things happened on her blog. You know when she posting a new post, there’s a longgg distance between previous post. How to fix this thing ?

  29. Mayur says:

    Thank You Very Much Your Information Really Usefull for me…………Thnks again

  30. lily says:

    Hello :) It works amazing! Can we put captions on the boxes and can we change the colour of the border and background when it pops up? Thank you so much for this trick!

  31. Saba says:

    Hai,I have 3 questions:
    1)Why it takes such long time to view it on my blog (more than 3 minutes)? I put it as slide show.
    2) The box shows the loading is small. Is it mean my images will be that size?
    3) I want only 1 picture appears on my blog even though I put more than 1 pictures. I want to view it as slide show. Is it possible and easy to do it? Because I don’t have basic in IT programmer.

  32. Max says:

    @ gerald, Aver,you must type and edit codes carefully and please try the old post editor.

    @ Nando Tampubolon The problem about the images that hosted to your blogger account is that you need to delete a small part from the image url to make it work.

    @ Mayur, you are welcome.

    @ lilyall this is possible but it’s require a good html and jave knowledge.

    @ Saba1. May be your connection very slow, may be your images are very huge.

    2. no, when the image will load the box will be re sized to fit the image.

    3. i think this can be done but not with this widget.

  33. Daumis says:

    It was a nice widget few days ago. Unfortunately it doesnt work any more.

  34. Faer says:

    dude, ur bandwith fir the script’s exceeded~

  35. Marius says:

    Hello, is there a way to have this script AS WELL AS the photo gallery from the article “How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger.” ??
    I tried but the two seem to be incompatible…If i put both of them i get in slimbox_4Blogger.js that window.addEvent(’domready’, Lightbox.init.bind is not a function..
    That was the last command in the file (”window.addEvent(’domready’, Lightbox.init.bind(Lightbox));”

  36. antiposer says:

    the tutorial on this blog still seems to work…

    http://goo.gl/fb/z4Zp

  37. Max says:

    @ Daumis, Faer, antiposer Please try to get the java files and upload it to your own hosting account in any hosting site.

    @ Marius sorry, i don’t think you can add the both, even if you added it, it’ll make your blog very slow.

  38. zacky says:

    Hy Max and another people…

    I have fixed this Lytebox, you can read its tutorial here:

    http://tipsbloggerzacky.blogspot.com/2010/03/lytebox-image-viewer-for-blogger-fixed.html

  39. admin says:

    This tutorial will give good results and play in all browsers except for Internet Explorer 8 .
    In IE8 the background overlay and the border color of the popup do not show.

    I have used a simple way for solution:
    Changed compatibility mode of the IE8.
    How to do this on blogger:

    Edit Template HTML, and add just after the opening of the
    tag, this line:
    meta content=’IE=7′ http-equiv=’X-UA-Compatible’

    (add: at the end of the line added)

    See it working on this link:
    lytebox IE8

  40. ilquer says:

    The way you tell us about blogger tools is very complicated.How can you be so successful about it?

    • Max says:

      hi ilquer, sorry but i’m trying to make it easy as possible, you are the first one to say that. i’m really sorry.

  41. sina says:

    My image code is NOT like what u say!
    it’s actually different:(((
    help me

  42. metalmatt says:

    Lightbox does not work on blogger because when you click on the picture, it open in a new window dummy and that’s not lightbox! Lightbox is when you click a picture and it popup on a SAME page but not another window! it only works on WordPress but not blogger!

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