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

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

Tweet

Pin It