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:
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
@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!
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..
@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?...
thanks for sharing the guide! cool stuff!
@kenwooi - give it a go and let me know how it works for you...
@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...
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?
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...
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..)
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...
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
looks great! glad I can help... i'm planning to post new tutorials here so check back when you can... =)
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
@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!
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?
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
@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.
Thanks so much for the prompt reply. I will try that out and let you know how I get on.
Thanks again.
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
Sorry, my blogspot:
robinsinha.blogspot.com
@robin - I checked the site and everything seems to be working... Can you let a friend try it out on a different computer?...
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.
@Sarah: Add title="Your caption text here." to the link to display a caption in the pop-up.
@RocketLife - thanks man! works great!
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?
@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...
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.
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...
@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
@jab Man, thanks so much for this module - kudos
@Alakazam - No prob... Just sharing what I can... Thanks for the input on the blogger uploaded images... =)
Perfect! Thank you very much for this. I've been searching for like... half hour, none of the scripts i've been testing worked.
:]
Thanks for the great tutorial!
Geekpinoy!, Thanks for this cool little code, I used it in our group blog! Salamat!
http://culturenext.blogspot.com
@ishuda - glad I can help.
GREAT! It works fine, with a theme to. Thank you ;-)
This is so awesome, you just saved my blog. So thank you very much!!! xoxo
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
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.
@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.
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!
@Bbcversus - you're welcome! Please don't forget to link back so that other people find this too. Thanks!
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.
@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!
It's still not working :(
Oh never mind. I updated it and all of the sudden its working! Yeah! :)
@FotoLove - that's good to hear. We'd really appreciate it if you can post a link to this tutorial on your blog. Thanks!
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
@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?
@Jab
thank you,i have already fixed it, it was caused by features of my template))thanks again)
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 :)
@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!
@antoinette - I've already added the close button. Please check the if it shows up on your blog and let me know. Thanks!
@ 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
@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!
@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
@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
@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.
@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
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
@Á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!
@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 :)
@Á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.
thxxxxxxxxxxxxx
this is very helpful!! it worked on my blog, visit at:
http://tegirenai.blogspot.com/
thanks a lot!
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?
@tim - saw your site's live photos section... I think you already have it figured out... good luck with your band!
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
@mike - can you post the link of the page so I can check the code? Thanks!
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!
@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!
Thanks mate!
Thats terrific
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!
@pidol - try to clear your cache then check again... it should resize after that... otherwise your image size might really be small...
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
@pidol - Thanks! Your channel looks great and informative keep up the good work!
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 :)
@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!
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?
@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...
@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
@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.
Siply cool...
nice tutorial...
Post a Comment