Add a Custom jQuery Lightbox To Blogger

If you are not happy with Blogger's default lighting, there is another great way to display your photos. If you missed it, in one of my posts I showed you how to customize blogger lightbox by changing background color, border or text color . This tutorial will show you how to replace it with jQuery Lightbox plugin which is very popular among bloggers.

What this lightbox does is display a larger version of the images, which when we click on them will appear in a larger box and allow us to easily navigate through this set of photos using the back and next buttons.

To see how it works, visit the demo blog and click on any image to enlarge.

Demo blog

Adding jQuery Lightbox to Blogger

Step 1: In the Blogger dashboard, click on Themes > Edit HTML.

Step 2: Click anywhere in the code area and press CTRL + F to open the search box, then paste the following tag into the search box and press Enter to find:

]]>

Step 3: Choose one of the lightbox styles below and paste the above CSS ]]> Tag:

Custom Blogger lightbox with light background

# jquery-overlay { position: absolute; above: 0; left: 0; z-index: 90; width: 100%; height: 500px;}
#jquery-lightbox{position:absolute;top:%10;left:0;width:100%;z-index:100;text-align:center;line-height:0;}
#jquery-lightbox a, #jquery-lightbox a: pass {border: none;}
#jquery-lightbox in image{border:none;}
#lightbox-container-image-box { position: relative; background-color: #fff; max-width: 960px; max-height: 560px; fields: 0 cars; }
#lightbox-container-image{filling:10px;}
img#lightbox-image { max-height: 540px; max-width: 940px; }
#lightbox-loading
#lightbox-nav{position:absolute;top:0;left:0;height:%100;width:%100;z-index:10;}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none;}
#lightbox-nav-btnBack, #lightbox-nav-btnFront { width: 49% ; Height: 100%; Scale: 1; show:lock;}
#lightbox-nav-btnBack{left:%10;float:left;}
#lightbox-nav-btnext { right: 10%; floating point: right; }
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;padding:auto;max-width: 940px ; ;padding: 0 10px 0; position: relative; z-index: 999;}
#lightbox-image-data-container{padding:0 10px;color:#555;}
#lightbox-container-image-data #lightbox-image-details{width:%70;float:left;text-align:left;}
#lightbox-image-details-caption{font-weight:bold;}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em;}
#lightbox-secNav-btnclose { width: 66px; floating point: right; bottom padding: 0.7 M; }

Custom Blogger Lightbox with Dark Background:

# jquery-overlay { position: absolute; above: 0; left: 0; z-index: 90; width: 100%; height: 500px;}
#jquery-lightbox{position:absolute;top:%10;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a, #jquery-lightbox a: pass { border: none }
#jquery-lightbox in image{border:none;}
#lightbox-container-image-box{position:relative;background-color:#000;max-width: 960px;max-height: 560px;margin:0 auto}
#lightbox-container-image{filling:10px;}
img#lightbox-image { max-height: 540px; max-width: 940px; }
#lightbox-loading
#lightbox-nav{position:absolute;top:0;left:0;height:%100;width:%100;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0;}
#lightbox-nav a{outline:none}
#lightbox-nav-btnBack, #lightbox-nav-btnFront{width:%49;height:%100;scale:1;screen:lock}
#lightbox-nav-btnback { left: 10%; floating point: left }
#lightbox-nav-btnext { right: 10%; floating point: right }
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#000;margin:0 auto;line-height:1.4em;padding:auto;max-width: 940px ; ; padding: 0 10px 0; position: relative; z-index: 999;}
#lightbox-image-data-container{padding:0 10px;color:#fff}
#lightbox-container-image-data #lightbox-image-details{width:%70;float:left;text-align:left}
#lightbox-image-details-caption {font-weight: bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnclose { width: 66px; floating point: right; Bottom padding: 0.7 cm}

Step 4. Now find the following tag and add one of the following scripts:

Lightbox script with light background:

Script lightbox on dark background:

Step 5: Click the "Save Theme" button to save your changes

The final step is to disable Blogger's native lightbox so it doesn't interfere with the one you just added: go to Settings > Posts & Comments and on the right you'll see the "Show images with lightbox" section. Select Side > "None" and click the "Save Settings" button in the upper right corner.

Now browse your blog and click on any image to see Blogger's custom jQuery box in action. Enjoy, have fun!