Creating Image Sexy Lightbox for Blogger

Perhaps if you have thought, if an article that consist with a lots of pictures, certainly make your blog take a long time for loading relatively by user. If all images shown with full-size, certainly you can think of what happened. Creating Image Lightbox is a solution of the problem, but existing lightbox on the default blog gives the impression that is less attractive to the user to view an image in full size. Therefore, we will make a lightbox that gives the impression that more interesting is what I call Image Sexy Lightbox.

You can try to click the image above, that's the image effect that I call image sexy lightbox. To create a image sexy lightbox, you need css and js scripts. By adjusting that scripts you can make similar effect like the image above. Here I will show you how to implement image sexy lightbox into your blog article.

1. Inserting js and css scripts of image sexy lightbox, where the script will be loaded when the user click on the thumbnail image (small size image) that contained in the blog article, then display it in a certain size and can be enlarged according with full resolution of the image.

<link href='http://project-marsawa.googlecode.com/svn/trunk/lightboxv1.css' rel='stylesheet' type='text/css'/>
<link href='http://project-marsawa.googlecode.com/svn/trunk/lightboxie6v1.css' rel='stylesheet' type='text/css'/>
<script src='http://project-marsawa.googlecode.com/svn/trunk/jquery.lightbox.js' type='text/javascript'/>
<script src='http://project-marsawa.googlecode.com/svn/trunk/imagenvideo.js' type='text/javascript'/>

On the dashboard blog, click on template and click edit html. Insert the scripts above must be put on the  head part of html template. On the head part of html template there are much scripts css at the part that called skin and style of html template and any js (javascript) script at the last of head part. Put the scripts code above at the bottom of the style, above of js script. Usually the template blog have use “jquery.min.js”, you can press Ctrl+F inside html template, and just type “min.js” for more clearly let's take a look the picture below!

The Script code that I will be added has any link into the script code that i put on google code project as my own. The Advantage of placing the script code on google code, I've discussed at another article. Here I suggest you to move the scripts code of  google code project as your own. For more details let's see the video. After you move js and css script code as your own google code, changes the link as marked by green color with the link of your project script code. If you want to be fast, just put these scripts above without changing at the bottom of "jquery.min.js" script on html template.

2. Add the new style of  image tag so that image sexy lightbox can be displayed on the image that you want. Go to to post articles and choose the image that you want to be added image sexy lightbox effect, surely you must edit on the html code of the article.

Do this right on each images that you will be given the effect of image sexy lightbox. To be more efficient in the process, if you  have many images that you want to give the effect, just copy all of the html code of your article and then take it into notpad++, there is any automatic conversion tool to add a new style of image tag on every images that you wish. Or maybe you have another way is up to you.

3. Look at the picture above! disactivate the default lighbox that blogger have. Go to the dashboard of your blog, click on settings and choose Posts and comments. At Showcase images with Lightbox select No. This is because you don't need a default lightbox by blogger any more. For more details let's see the article video! Good Luck!