UPDATE 2: Install Lytebox Image Viewer Widget On Your Blogger Blog

Tuesday, February 09, 2010

A lot of my friends have been asking me how I installed the lytebox image viewer on my blog and I'm pretty sure a lot of blog owners on Blogger would want to have it installed on their template too. I've decided to share this simple hack so that everyone can have a much better way of displaying images to their readers. Don't worry I already took care of most of the manual labor so all you need to do is copy and paste a  bunch of codes. So read on if you want to have this widget.



So what exactly is Lytebox? Here's the definition from the author himself.
Lytebox was written from the Lightbox class that Lokesh Dhakar (http://www.huddletogether.com) originally wrote. The purpose was to write a self-contained object that eliminated the dependency of prototype.js, effects.js, and scriptaculous.js. Since the original version of Lytebox (which released with iFrame support), major modifications have been made to improve performance as well as "Slideshow" support, "Themes" support, HTML content support (as opposed to just images) and many more configurable options that allow you to customize the look and feel of Lytebox.
I know the explanation is a bit on the technical side for the average blogger with little technical know how. It just says this new version of Lytebox supports new ways of displaying images. Aside from just showing the image now you can also do slideshows and even view html files or links with it. There's also some themes you can choose from to blend with the color of your blog (grey(default), blue, green, red and gold). So to make things more clearer here's an example of what happens to an image when Lytebox is applied. Click on the image to see how Lytebox displays the image.

Single Image:

Grouped Images

Slideshow

HTML Links
Demo Link

Now that you've seen what Lytebox can do here's how you can implement it on your Blogger template.

Step 1
Log in to your Blogger account and then go to the "Layout" tab of the blog you want to install Lytebox on. On the "Layout" tab go to "Edit HTML". Click on the image to get a better look.

Step 2
Back up your template first by clicking on "Download Full Template" just in case something goes terribly wrong.

Now look for this code
</head>

Then paste this code right above it:
<!--Code-By-GeekPinoy-->
<link href='http://lytebox-geekpinoy.googlecode.com/svn/lytebox/lytebox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://lytebox-geekpinoy.googlecode.com/svn/lytebox/lytebox.js' type='text/javascript'/>
<!--Code-By-GeekPinoy-->

Go ahead and click on "SAVE TEMPLATE". Now all we have to do is add some codes to tell your template how each image should be shown in Lytebox.

When making a new post add your image then go to "EDIT HTML" in your post editor. Then do the following depending on which one you want to do.

For a SINGLE IMAGE you just have to add this to your image code:
rel="lytebox"

So it should look like this:
<a href="http://i278.photobucket.com/albums/kk93/jabaya/HomerSimpsoniPhone.jpg" imageanchor="1" rel="lytebox" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="107" src="http://i278.photobucket.com/albums/kk93/jabaya/HomerSimpsoniPhone.jpg" width="200" /></a>


For GROUPED IMAGES you add the same rel="lytebox" code but with "[]" and a name or number assigned to the group inside something like rel="lytebox[group1]" or just plainly rel="lytebox[1]". Just don't forget to add rel="lytebox[1]" to each image you want in the group.


<a href="http://i278.photobucket.com/albums/kk93/jabaya/HomerSimpsoniPhone.jpg" imageanchor="1" rel="lytebox[1]" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="107" src="http://i278.photobucket.com/albums/kk93/jabaya/HomerSimpsoniPhone.jpg" width="200" /></a>



If you want to make a SLIDESHOW just go ahead and use this code instead rel="lyteshow[group-name]". Just don't forget to add the code to each image you want on the slideshow.

<a href="http://i278.photobucket.com/albums/kk93/jabaya/HomerSimpsoniPhone.jpg" imageanchor="1" rel="lyteshow[1]" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="107" src="http://i278.photobucket.com/albums/kk93/jabaya/HomerSimpsoniPhone.jpg" width="200" /></a>


You can also view HTML pages using Lytebox by adding rel="lyteframe" to the link code.

<a href="http://www.geekpinoy.com/2010/01/geeks-weekend-life-may-look-like-this.html" rel="lyteframe">Demo Link</a>

That's it! As I said Lytebox also has different colored themes to match the color of your blog. The default color is grey but we have a lot of colors to choose from depending on what you want. Here's how to change theme colors.

On your blogger template look for the code we posted before and change the highlighted code with the code of the color you want:

<!--Code-By-GeekPinoy-->
<link href='http://wimg.co.uk/46k.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://wimg.co.uk/HBz.js' type='text/javascript'/>
<!--Code-By-GeekPinoy-->

BLUE:

http://lytebox-geekpinoy.googlecode.com/svn/lytebox/lytebox-blue.js


RED:

http://lytebox-geekpinoy.googlecode.com/svn/lytebox/lytebox-red.js


GREEN:

http://lytebox-geekpinoy.googlecode.com/svn/lytebox/lytebox-green.js


GOLD:

http://lytebox-geekpinoy.googlecode.com/svn/lytebox/lytebox-gold.js


That's it! I hope you enjoyed GeekPinoy's first tutorial. Let us know how it went for your blog. Happy blogging geeks!

Update: Changed file host since the old one didn't work anymore.

Update 2: Changed file host to Google Code, hopefully this time the files will be hosted forever. Please replace the old codes with the new ones above. Unfortunately the last one we used closed down. Please share this on your site if you like it. Thanks!


Posted by Jab Escutin
Source and Credits: Lytebox 3.22 by Markus Hay


85 comments:

Prazsky Golem said...

This is a great module, thanks - I noticed something however, the widget doesn't to work with picture uploaded within blogger (the url generated is too long, I guess ?!) so a requirement is to use photobucket or imgur

jab said...

@Prazsky Golem - hhhmmm... never actually tried it with an image from blogger... i'll check on it and update this post... thanks for the heads up!

Luuk said...

Hi, does it only work with the seize: height="107" and width="200"?? Because i can not get it to work if i keep the original size..

jab said...

@luuk - hhhmmm... the script automatically resizes the image when you view it in lytebox, so it should work even if you keep the original size... can you post the image code here so I can check?...

kenwooi said...

thanks for sharing the guide! cool stuff!

jab said...

@kenwooi - give it a go and let me know how it works for you...

Luuk said...
This comment has been removed by the author.
jab said...

@Luuk - if that's the case I think it all depends on your blog's template... if the area for your post is too small than you won't be able to put all the images side by side... have you tried using the html codes directly from photobucket?... if you use blogger editor to add your images I know it will provide it's own format and alignment of the images...

Luuk said...

hmm ok, when i use a direct html code from photobucket. Like this, see picture for snapshot:

http://i275.photobucket.com/albums/jj290/dumbl3/South%20America/snap15-03-2010-023332pm.png

How do i get the lytebox effect? I don´t know where to put the lytebox code?

jab said...

you used the IMG tag... you have to use the HTML Code... then you can insert rel="lytebox[1]" right after each the a...

hope that helps...

Luuk said...

ps, how do i check if my blog template is wide enough? This is my blog:
luukvth.blogspot.com

Can i not just devide the width of my template in 3, and use that as the width of my pictures?? (a little less maybe, because it looks nicer to have a little bar between the pictures..)

jab said...

just try to experiment with different image widths until you get a nice fit... but you have to do everything manually... and don't use blogger editor since it will automatically format everything...

Luuk said...

thanks jab, i edited the photos in notepad. And iv fixed it; here is the result:
http://luukvth.blogspot.com/2010/03/lago-verde.html

jab said...

looks great! glad I can help... i'm planning to post new tutorials here so check back when you can... =)

Sarah Pecorino said...

Thanks for the great tutorial! I've been trying to do this for MONTHS so I can have a portfolio page on my blog. One question, though, is there a way to include captions with the images? Thanks again!

Sarah
http://sarahpecorino.blogspot.com

jab said...

@sarah

That's an interesting question. I'll try it out and let you know as soon as I make it work. So please check back once in a while. Thanks!

Robin Sinha said...

Please help me out here!

I've just made a gallery following your wonderful directions and it seems to be working well...

http://robinsinha.blogspot.com/2010/06/test.html

However if I go from a page which is linked to the above...

http://www.robinsinha.com

....then lytebox doesnt work???!!!

Can you help please?

Robin Sinha said...

Sorry, the test link has gone now as I've added my albums properly now.

So... lytebox is working perfectly here -

http://robinsinha.blogspot.com/2010/06/lfw.html

But if I link from my holding page -

www.robinsinha.com

and open the same album (London Fashion Week), it doesn't work....

Any ideas??

Many thanks

jab said...

@robin - i think it's because you only put the javascript code on the blogspot template and not on the custom domain. So when you view the photos on the custom domain there's no javascript to handle lytebox. Try it out and please let me know. Great photos by the way.

Robin Sinha said...

Thanks so much for the prompt reply. I will try that out and let you know how I get on.

Thanks again.

Robin Sinha said...

Hi Jab,

I wonder if you can help again..!

Yesterday my lytebox galleries were working fine, this morning they're not! Now, when I click on an image, it directs straight through to the Photobucket link. If I reset my browser (Safari) it starts working for a while and then stops again. I have also tried it with expolorer and it doesn't seem to be working at all.

Any ideas??

Very frustrated!!

Many thanks

Robin Sinha said...

Sorry, my blogspot:
robinsinha.blogspot.com

Jab said...

@robin - I checked the site and everything seems to be working... Can you let a friend try it out on a different computer?...

Robin Sinha said...

Ah yes it is working! I think it's because I was clicking on the image before the page is fully loaded (slow connection at work).

Many thanks.

RocketLife said...

@Sarah: Add title="Your caption text here." to the link to display a caption in the pop-up.

jab said...

@RocketLife - thanks man! works great!

miss -V- said...

Hello there,

I think it doesn't work with quite big images. They don't load. Check it out here-->

http://cockasnook.blogspot.com/search/label/David%20Sykes

Any suggestions?

jab said...

@miss-V-

I checked on the page source and you haven't put the "lytebox" tag on any of the images...

if ever it still doesn't work you might want to put the images on an image host like photobucket... some peeps are reporting that it doesn't work when the images are directly uploaded to blogger...

miss -V- said...

I had to remove the rel="lytebox" since it was not loading. I guess the problem is that these images are bigger that it is allowed for the lytebox to work. It works just fine on my other images all uploaded on picassa/ blogger.

jab said...

you might want to try uploading them to photobucket... I have some images here that's bigger than what you have on your site and they load just fine...

Alakazam said...

@PrazskyGolem - blogger when inserting a picture (sometime) is adding "1600-h" in the path for the picture (e.g: http://1.bp.blogspot.com/_QlTEdTbHnzw/Smf_B2HA4LccxxxAAAACCo/6q84XnVhZSw/s1600-h/doodidoo.jpg) ; that's the reason lytebox show an empty blank square and seems to load forever - just remove the extra "-h" and the lytebox module should work fine

Alakazam said...

@jab Man, thanks so much for this module - kudos

jab said...

@Alakazam - No prob... Just sharing what I can... Thanks for the input on the blogger uploaded images... =)

Bombom Coral said...

Perfect! Thank you very much for this. I've been searching for like... half hour, none of the scripts i've been testing worked.

:]

Mama Matunda said...

Thanks for the great tutorial!

Ishuda A. said...

Geekpinoy!, Thanks for this cool little code, I used it in our group blog! Salamat!

http://culturenext.blogspot.com

Jab said...

@ishuda - glad I can help.

Florent Cima said...

GREAT! It works fine, with a theme to. Thank you ;-)

Haramiya said...

This is so awesome, you just saved my blog. So thank you very much!!! xoxo

Aziajs said...

Hi Jab-

Ok...so I tried adding the widget and I'm getting the blank white box that won't load. I checked the URL and I don't see the extra "-h" the poster above talked about. Confused. Help please:

http://facesfromaziajs.blogspot.com/2010/08/sneak-peek-behind-scenes-with-kat.html

Aziajs said...

Ok...I got it working but it loads very jerky. It kind of creeps along. You can go to the link above and you will see what I mean.

Jab said...

@aziajs - glad you have it working! The jerking part usually happens when the image is too big because lytebox resizes the image as it loads. You might also want to upload the images to a different image host as we seem to be running into some problems when you upload it directly to blogger.

Bbcversus said...

I can't believe it worked, after I tried so many times with loads of tutorials and files and edits, now it works thanks to you!
Thanks again, you just made my blog awesome!

jab said...

@Bbcversus - you're welcome! Please don't forget to link back so that other people find this too. Thanks!

FotoLove said...

I have a problem! My lytebox worked fine for a long time, but since yesterday it just doesn't work anymore :-(
What's wrong with it? I didn't change anything.

Jab said...

@FotoLove - I think there's a problem with the javascript host. I'll fix it as soon as I get home. Thanks for the heads up!

FotoLove said...

It's still not working :(

FotoLove said...

Oh never mind. I updated it and all of the sudden its working! Yeah! :)

Jab said...

@FotoLove - that's good to hear. We'd really appreciate it if you can post a link to this tutorial on your blog. Thanks!

Lana said...

Hello, thanks for your guide, it works for my template, but only partual..and i have a little problem,
when i put several images to the post, i align them into the group, and then in the post, i can see only first image and, only after i click on the first one and open lytebox, i can see the rest of them. What is wrong, why is it not like a gallery? can you help me,please?))
for example-
http://lana-confusion.blogspot.com/2010/10/couples.html

Jab said...

@Lana - hhhmmm... I looked at your blog and everything looks okay on the source code side. I'm really no expert when it comes to these things, but do you see all the images when you're composing the post?

Lana said...

@Jab
thank you,i have already fixed it, it was caused by features of my template))thanks again)

Antoinette said...

Hi there,
Is there a way to add a close button to the lytebox?
Would love some help on this.
Thanks!
Antoinette
PS: Have also posted the link to the lytebox on my blog :)

Jab said...

@antoinette - sorry about that, I forgot to put that in. I'll fix it as soon as I can and you don't have to adjust anything on your side. Thanks!

Jab said...

@antoinette - I've already added the close button. Please check the if it shows up on your blog and let me know. Thanks!

Antoinette said...

@ Jab

First of all, I really want to compliment you on the speed at which you reacted to my post. Thanks! It's highly appreciated.

Then, no, unfortunately I do not see a close button. If you check this: http://ansnippets.blogspot.com/2010/11/i-just-have-to-brag-again.html you'll see what I mean.

Thanks for helping!

Antoinette

Jab said...

@antoinette - you're welcome. I checked the link and I see the close and even the play and pause button on the lower right side of the image. You might want to check again. Thanks!

Antoinette said...

@Jab

All I can see on the photo to the bottom left is the words Image 1 of 2, prev and next. I don't see play, pause and close buttons, but pure by accident I discovered that they ARE there to the bottom right. However, the text seems to be white on a white background. Is there something I am doing wrong?

Regards, Antoinette

Antoinette said...

@Jab

I have done some more testing and discovered the following:

- my settings is for the text with lytebox to be red, but it keeps on showing up in black
- I can indeed not see play/pause and close buttons

Until... I switch to compatibity mode in IE8. Then I can see them. Your code is perfect, but somehow it does not work as it should with IE8. Is this a known issue to you?

Regards,
Antoinette

Jab said...

@antoinette - that's actually the first time I heard about that issue. Thanks for the heads up. You might want to switch over to firefox or chrome as there's really a lot of issues with IE.

Antoinette said...

@Jab

For the time being I have found a fix on this site:
http://acidmartin.wordpress.com/2009/03/21/using-the-ie8-x-ua-compatibility-meta-tag/

Now everything works perfectly!Thanks for your help in all this!

Regards, Antoinette

Árni Berúlfur said...

Hey... and thanks a million for posting this... made my day when I found this gem of information :) I wanted to ask if there was a similare way to set up video's (especially interested in knowing if I could plug my vimeo video's in such a manner)

Here's my site if you want to check out what I'm doing

artgoblin.weebly.com

jab said...

@Árni Berúlfur - glad to help. I think you can do that by adding rel="lyteframe" to the link of your video. Check out the displaying HTML part of the tutorial.

Hope that helps.

Thanks!

Árni Berúlfur said...

@jab - Thanks again for pointing out the solution for me :) Been tweaking my portfolio site, and basicly have a prototype wich I'm happy with. if there was one thing I'd like to change to my setup now it would be to be able to say... click on thumbnail and it opens up a vimeo video through lyteframe, but I'd like to be able to click next and open a still image through lytebox. It works fine as it is now, it basicly opens up the extra images with lyteframe, but there is a slight loading delay/jerk happening.

Don't know if there's anything to be done about that, but thanks a million again :)

jab said...

@Árni Berúlfur - the jerking usually happens when the file your loading with lytebox is too large. I suggest you resize the image so you get a smaller file size.

princeyuvraj said...

thxxxxxxxxxxxxx

Anonymous said...

this is very helpful!! it worked on my blog, visit at:

http://tegirenai.blogspot.com/

thanks a lot!

Tim said...

Hey, as everyone else said, thanks a bunch, this is exactly what I was looking for. I have a few questions tho.

officialorwell.blogspot.com

Question 1:
I added 3 photos to test this. Clicking on each, the lytebox works fine, however when I group them, it only llows me to have 2 in the group. It says 1 of 2 or 2 of 2 regardless. What is up with this?

Question 2:
I am trying to use this as a way to add a photo gallery to my blogger. So, is there a way to create a group, and only display the first one on the actual post, the rest being available by click that picture and then going through them in the lytebox?

jab said...

@tim - saw your site's live photos section... I think you already have it figured out... good luck with your band!

Mike said...

Thanks so much for this code and your comments! I have been working for two days to find the correct codes, and have tried at least 10 different options. Yours works beautifully.

I have a follow-up question or two:

- My pics do not have a "close" button (I read your conversatio with Antoinette above, but I cannot get that function to work;

- Also, I added the red color code to the template code, but see no change in color (it's still white).

Any help would be very appreciated!! Again, Thanks!

mjmmoose@gmail.com

jab said...

@mike - can you post the link of the page so I can check the code? Thanks!

Daddio said...

Thanks so much for this buddy. This is the ONLY tutorial on the whole web that seems to make any sense and Lytebox is working a dream.

http://timdaddio.blogspot.com/

I do have a paranoia that I'm not hosting the code though and one day it will dissapear. Any chance you could post the link to your code so I can host it on my domain?

Thanks so much!

Jab said...

@Daddio - Thanks!

Here's the css part:

http://lytebox-geekpinoy.googlecode.com/svn/lytebox/lytebox.css

and here's the lytebox code just in case anybody needs to host it on their own.

http://lytebox-geekpinoy.googlecode.com/svn/lytebox/lytebox.js

We'd really appreciate any link backs and shares. Thanks!

Daddio said...

Thanks mate!
Thats terrific

Pidol said...

Sir, magandang araw po, ask ko lang bakit ayaw pa rin magresize sa actual image size kahit na "False" ung ilagay ko na Value sa Script.

this.autoResize = False; // controls whether or not images should be resized if larger than the browser window dimensions

By default "True" sya pero ang liit talaga ng picture.

Patulong naman po.

Tnx!

jab said...

@pidol - try to clear your cache then check again... it should resize after that... otherwise your image size might really be small...

Pidol said...

Jab, Thanks for the tips! It's now working properly. Im now seeing the actual size (actual pixel)

Very Informative ung site mo. Idol kita. Medyo geek din ako. hehehe...

Video Tutorials naman favorite ko, natutuwa lang ako... share ko lang YT ko youtube.com/bayanihanonlinetv.

Maraming salamat sayo kapatid!

Marami pako matututunan sa site mo.

Pidol

jab said...

@pidol - Thanks! Your channel looks great and informative keep up the good work!

Franzi said...

Hey there,
I just followed your instructions and everything went fine...your explanation is really easy to understand :) Thanks

But I've got a little problem with the gold theme...actually it's red^^
Can you provice me the correct link for the gold theme?

Thanks a lot, I'm so happy about my fotos poping biger when klicking them :)

Jab said...

@Franzi - thanks for letting me know. I already updated the file. It should be gold now after you clear your cache. Let me know if you need anything else. Thanks!

dwizzt said...

this is really so handy! thanks so much for this.

but, is there any way to automatically add the effect without adding 'rel="lytebox"' each image?

Jab said...

@dwizzt - Thanks for the comment! Unfortunately I don't know any way of making this automatic. Adding the rel tag on the code is the only way to do it as of now...

dwizzt said...

@Jab - Thanks for the quick reply, you might as well take a look at this tutorial <a href="http://simplexdesign.blogspot.com/2011/03/lightbox-auto-show-image.html>here.</a>

That's for lightbox, you might be interested on tweaking lytebox :D

jab said...

@dwizzt - thanks for the share! I'll go ahead and review the advantages of it then update the codes here... I think this would really be helpful.

Marl Adalid said...

Siply cool...

nice tutorial...