About

I found Fancybox 2.0's Creative Commons Attribution-NonCommercial 3.0 license to be slightly overreaching, as I was developing a wide variety of commercial applications. Furthermore, practice is always a good thing, so I built this lightweight lightbox jQuery plugin. Having my own module for this common UI feature allows for easier usability and modifiability. Feel free to use this, with attribution (see full license below).

How To Use

Zip Download

First, include the jQuery, JS, and CSS in your page. You should load the JS at the bottom of the body, so it doesn't block content rendering.

<link rel="stylesheet" type="text/css" href="fusebox/scripts/fusebox.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" ></script>
<script type="text/javascript" src="fusebox/scripts/fusebox.min.js"></script>
<style>
    .FBhide{display:none;}
</style>

Then include the content on the page that you want to open the fusebox on click or other input, and the content that you want it to open.

<p id="clickMe">Click me!</p>
<img id="ThisPopsUp" class="FBhide" src="images/coolimage.png">
<!--The FBhide class hides the content on the page, so it only shows in the Fusebox.-->

Then call the Fusebox function. This must be done after the Fusebox JS was loaded in, and after page load.

Code:
<script>
$(document).ready(function(){
  $('#clickMe').fusebox($('#ThisPopsUp'));
});
</script>
Example

Click me!


Images can also just open themselves on click in the fusebox.

Code:
<img id="img1" src="images/2.png">
<script>
$(document).ready(function(){
  $('#img1').fusebox();
});
</script>
Example

You can also fusebox multiple images, which enables the slideshow effect.

Code:
<img class="img1" src="images/3.png">
<img class="img1" src="images/4.png">
<img class="img1" src="images/5.png">
<script>
$(document).ready(function(){
  $('.img1').fusebox();
});
</script>
Example

Or multiple images to multiple different images. Note: currently the number of html elements in the two sets must match.

Code:
<img class="img2" src="images/3.png">
<img class="img2" src="images/4.png">
<img class="img2" src="images/5.png">
<img class="img3" class="FBhide" src="images/6.png">
<img class="img3" class="FBhide" src="images/7.png">
<img class="img3" class="FBhide" src="images/8.png">
<script>
$(document).ready(function(){
  $('.img2').fusebox($('.img3'));
});
</script>
Example

You can also open any other element in the fusebox, or open the image with any other element.

Code:
<span id="iframeOpen" src="images/3.png">I open an iframe!</p>
<iframe id="iframe" width="560" height="315" src="//www.youtube.com/embed/ug39P7ZFopg"
frameborder="0" allowfullscreen></iframe>
<script>
$(document).ready(function(){
  $('#iframeOpen').fusebox($('#iframe'));
});
</script>
Example
I open an iframe!

License

Creative Commons License
Fusebox (Lightweight Fancybox Alternate) by James Gould
is licensed under a Creative Commons Attribution 4.0 International License.