I Look 12

Subscribe to I Look 12

Share

Digg

Bookmark

Stumble

Reddit

Email

---

If you heard about Lightbox, I'm sure that you know that it is a widget integrated to blogger that allows you to open large images without opening a new window and instead opening it at the center of your screen inside a box. But in this guide, we will be using another widget called Lytebox, it is a modified Lightbox with some added features.

Here are some examples, click the image to view the lytebox.
Singe image:

Album or group of images:


Slideshow:


To add this widget to your blog, just choose your preferred color and click the add to blogger.

Note: You only need to add one of them, not two, three or all of them.

To display images uploaded to blogger inside a lytebox, just follow these steps.

After you uploaded an image from your blogger post editor, click Edit HTML.

Your image code will look similar to this,

What you need to do is remove the -h then proceed to the next step on how would you like the image to appear in the lytebox

For single image:
Add rel="lytebox" title="Caption" after the <a
Example code:

For group of images or album type:
Add  rel="lytebox[album_name]" title="Caption" after the <a. Change the album_name to the album name of your choice, and when adding the second image, just make the album_name the same.

Example code:

For slideshow:
Same implementation like for the group of images but you will need to use lyteshow instead of lytebox.
Add rel="lyteshow[album_name]" title="Caption" after <a

Example code:

Bonus Feature:
The lytebox does not only allows you to display images inside a box, it also allows you to display websites.

Here's a demo for google.com
Google Search

Here's the code for the above example,

The rev controls the width, height and scrolling of the box, if this is omitted, the default width and height will be set to 400px and the scrolling will be set to auto.

Here's another demo with google.com without using rev.
Google Search

and the code,