Posted By Max On Friday, November 20th, 2009 In Blogger Tricks and Hacks
|
|
 |
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.
- 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.
- 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
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.
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.
What And How To Add :
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.
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>
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>
Click here to see demo, special thanks for dolem
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.
Click here to see demo, special thanks for dolem
Light Box ( Fancy box ) Widget For Blogger Images And Links
How To Add Images Gallery Widget With jQuery Hover / Zoom To Your Blogger.
Views : 3,692 views 
Rating : 
Loading ...
Installation Error : Copy url &
Click here
Broken Link : Copy url & Click
here
[...] I Published Fixed Tutorial Here [...]
Eyvallah aga sağolasın. Süper oldu.
In english : Thank you for code. Good tutorial. Again thanks. It’s super….
dont understand how it is done.
sos.! please.
check it out one Max…so sexy lightbox…http://www.coders.me/web-html-js-css/javascript/sexy-lightbox-2 hihihihi
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.
@ All, thanks for reply,
@ eam eneri can you tell me which part you don’t understand it??
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……
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!!!!!!!!
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
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.
Hi Summie
I can help you but how can i contact you ?
Sorry for wrong name in my upper Comment
Hi Esydownloads, thanks for your help. You can reach me at cavdtelle.wan@gmail.com! Looking forward to get it fixed..
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*
help, not working in my blog
Can you add text descriptions to these lightbox images. If so, what’s the code and how do I do it?
@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!
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…
dosn`t work nou
@ 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.
Hi,
Yesterday it worked, but today doesn’t work. And in your demo blog, too…
@ 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.
is it possible to embed the CSS and JAVASCRIPT in the blog template?
thanks ahead!
why it didn’t work with my picture? yeah this tool was running but blank page.
let me know please
@ Earn in PTC, yes you can do it easily.
@ elijah, just ,make sure that you link to the image in the right way.
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
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.
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???
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
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 ?
Thank You Very Much Your Information Really Usefull for me…………Thnks again
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!
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.
@ 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.
It was a nice widget few days ago. Unfortunately it doesnt work any more.
dude, ur bandwith fir the script’s exceeded~
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));”