8.Light Box Photography

How to add Light Box effect to images
light box photo
photo light box
slim light box
light box table
light box frame
light box photography
light box

Hi,
I have searched through out the web to learn adding light box effect to my images, i have gone through many blogs and websites which explained adding Light box effect to images..i was succeeded only at the description given by www.bloggerplugins.org

I have changed a little bit explanation to make it user friendly.

What is light Box?
Light box effect is especially very useful to the bloggers who want to work on photographic websites or blogs. When you give light box effect to an image if user clicks over the image it instantly increases in it's size making dark back ground over the screen...resulting a beautiful appearance to the image.
Part-1
Step1:-Log in to your blog -take back up of your present template(this is because if any errors occurred so you can continue with your old template functioning)
Step2:-Add the following code before </head>

<style>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWr5hnIMGnNuDE2fajHvHF_IHXvkJR2mpOPjcaz5OMu0IOVMxsCrfvsmxQ_OdhWnLcG8sXkLLvUG3oGvKQgp9yQv9RtJy90b1S69zRqmkzoT5-4nR2dNBthghMrtD8_sBXjwvCiPPLxwQ/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmtycGfwYneUROE9gvXC1hI0eLN4FVyFkrz8_vjbD11HzRAQyXARDDigHHQVsTiR0yctJ2dCyLPD1CLdSU_DCzDcUAzhBgbYQ-lL0xst97EoocX0FmFPFgDIpbvJvY8johVo9yL0RfZu0/) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>

Now half of your work completed.
Part-2
Using Light box feature for your images
Remember that you can use the light box images to only particular images to which you completes rest of the work...means all other images of your posts doesn't show light box effect unless you work on customizing the images for accepting "Light Box Code" you added in your Blog's HTML layout.

Step1:-Upload images to your post to which you want to add Light Box effect.
Step2:-When your images uploaded they contain the path of the images stored at the server.
Here we have to change the path of the image.

Ex:-This is the html code original path of image located at server

1.replace this onblur="try {parent.desectBloggerImageGracefully();} catch(e) {}" with
rel="lightbox" title="title of the image"
2.Delete -h from s1600-h of the above image path.
3.Save the Html code in "Edit Html" Publish your post.

This is the html code modified to use "Light Box Effect" for the image

Note:-If you want show images one by one in Light Box then arrange the images as follows.

<a href="images/image-1.jpg" rel="lightbox[group1]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[group1]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[group1]">image #3</a>

If any image left over without having rel="lightbox[group1] but kept as rel="lightbox" and s1600-h is removed it shows the light feature but doesn't appear in image sequence show.

Demo
To see demo Click the below images

Blogger Tutorial for Learners

Pages

Labels