Bootstrap Image Lightbox with Tooltip

While running Codelearn.org, we had desperate need to view the images full-screen. Here is short story behind it.

Inside the Rails Tutorial, the content is on left & the Playground is on right. Earlier, the Playground was on a separate page & the content had the luxury to span the complete screen.

When we decided to combine the two views, the content on the left got pushed to a smaller width. Images faced the worst hit. Some of them were quite descriptive but became pretty 'squeezed' in the final layout.

For a long time we kept on searching for 'Jquery plugin to view images full screen'. There were no good matches. Once I visited Fleetio Tour page & found the images have 'view full screen' option. I quickly checked the DOM to figure out keywords 'lightbox' & 'bootstrap'. Googling for it landed me to the parent repo by @jbutz.

While it was good, I decided to further enhance it to have the following :-

One line initialization like $("img").img_lightbox_tooltip() to apply the plugin to all images.
A tooltip that shows user to click on the image to enlarge it.

Unlike the original repo which required one Lightbox every image/link, I created only one Lightbox. The 'img' tag source is kept empty & it got picked up from the image which is clicked.

Copy paste the Lightbox div to your HTML page.

<div id="demoLightbox" class="lightbox hide fade"  tabindex="-1" role="dialog" aria-hidden="true">
   <div class="modal-header" 
      style="position:absolute; height:20px; left:100%; margin-left: 10px; padding:0; border:0;">
	 
	 <button type="button" class="close" 
	   style="color:white; font-size: 30px;" 
	   onclick='$("#demoLightbox").lightbox("hide")'> × </button>

   </div>
   <div class='lightbox-content'>
     <img src="">
   </div>
</div>

Hack Alert The lightbox div id is hardcoded as 'demoLightbox' even inside plugin file. Also, the parent repo did not come with a button to close the lightbox/modal. I quickly hacked the close button from modal with some inline CSS & onclick to 'hackishly' do the job.

Dont forget to add following javascript files for it to work.

<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/bootstrap-lightbox.min.css">

<script src="assets/js/bootstrap.js"></script> <!-- Or just bootstrap-tooltip.js -->
<script src="assets/js/bootstrap-lightbox.js"></script>
<script src="assets/js/bootstrap-img-lightbox-tooltip.js"></script>

Options

The plugin comes with some options described below. For a newbie, it can be called as :-

 $("img").img_lightbox_tooltip({placement: "top", title: "custom tooltip message here"})

like that.

Name	Type	Default	Description
placement	top \| right \| bottom \| left	top	Where to place the tooltip.
tooltip_show	always \| hover	always	When to show the tooltip.
title	string	click to enlarge	Self explainatory

View Fullscreen Image in Lightbox - Bootstrap

Why the plugin & See it in action!

Options