Implementing CSS Lightbox in Blogger

You have read it right, this is a purely CSS based lightbox with the ablitly to show images only (That is quite understandable).This marvel of a lightbox can be found at www.w3css.co.uk, but I am unable to find its real author.The major plus point about this Lightbox over others is that, you only have to include a CSS code for it to work, with no dependencies on a JavaScript (But there is a tiny exception).It has some minor bugs ,that I will discuss later in the tutorial.

             

Steps to Add it to Blogger:

1.Login to the Blogger account

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it.

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link href="http://dl.dropbox.com/u/27675057/Css%20Lightbox/lightbox.css" rel="stylesheet"></link>

That JavaScript file  html5.js is needed for smooth working in Internet Explorer 9(But the Lightbox continues to work even without it ,but but I recommend you include it)

2.Go to the Post/Page you want to add this CSS Lightbox and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<link href="http://dl.dropbox.com/u/27675057/Css%20Lightbox/lightbox.css" rel="stylesheet"></link>t ,but but I recommend you include it)

Now include the below JavaScript file inside the </head> tag, For that Go to Design Tab > Edit HTML and copy it Above/Before </head> tag

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

4.Now adding the images into this CSS Lightbox is a little tricky affair ,Firstly  I will give you full code then explain how it works.

<div id="lightbox">
<a class="thumb b1" href="#x" tabindex="1"><img alt="" src="http://dl.dropbox.com/u/27675057/2.png" /></a>

<div class="holder p1">
<div class="backdrop">
</div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://dl.dropbox.com/u/27675057/2.png" alt="" />
<p>
Image 1 of 3
A line for descriptive text</p>
<p class="close">
CLOSE X</p>
</div>
</div>
<p class="instructions">
IE9  and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>

</div>

The 2nd and 10th Line contains the address of the image ,former being the one shown on the Page and the later in the Lightbox


From Line 3 onwards to the 2nd last line, is the code which makes the Lightbox effect work.Every class tag is self explanatory ,just keep this Markup handy for adding images into this lightbox


For adding multiple files into the lightbox just see the Markup below:

<div id="lightbox">
<a class="thumb b1" href="#x" tabindex="1"><img alt="" src="http://dl.dropbox.com/u/27675057/2.png" /></a>&nbsp;<a class="thumb b2" href="#x" tabindex="2"><img alt="" src="http://dl.dropbox.com/u/27675057/1%282%29.jpg" /></a>

<div class="holder p1">
<div class="backdrop">
</div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://dl.dropbox.com/u/27675057/2.png" alt="" />
<p>
Image 1 of 3
A line for descriptive text</p>
<p class="close">
CLOSE X</p>
</div>
</div>
<p class="instructions">
IE9  and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>

<div class="holder p2">
<div class="backdrop">
</div>
<div class="frame">
<div class="x1">
<div class="y1">
<img class="pic" src="http://dl.dropbox.com/u/27675057/1%282%29.jpg" alt="" />
<p>
Image 2 of 3
A line for descriptive text</p>
<p class="close">
CLOSE X</p>
</div>
</div>
<p class="instructions">
IE9  and non-IE browsers press TAB for next image and SHIFT/TAB for previous image</p>
</div>
</div>
</div>

The bug that I was talking about in the beginning ,is that the images are reloaded again into the Lightbox every time you Minimize the Page or switch between the Pages of your Browser.


5.Now save the Post/Page. 


Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

             

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox