BaseBox

Version 1.0

Basebox is built on Jquery 1.3.2. This is a small demonstration page for the Box.

Download

Requires jQuery 1.3.2. In the tarball you will find the loading image, close/next/prev buttons, css and the javascript: [tar.gz] | [zip]

To test it click the links below. It will demonstrate it's three main usages:

If you look at the source code for this page you will see that BaseBox is very easy to set up. All you have to do is include its files, create a link with the desired class (say 'boxlink') and then bust out the JQuery:


	  $(document).ready(function() {
	      $(".boxlink").basebox();
	  });

By default it sources its required images from the same directory that the file which calls the javascript resides in, but you can easily override this by going like so:


      $(document).ready(function() {
	$(".boxlink").basebox({
	  basedir: '/static/js/basebox/'
      });

I like having everything in a nice little package, so you will see that I have set things up so that the 'basebox' directory contains the css, js and images required, but you can do what ever you like.

How to use it with static content:

Build your link like this:


      <a href="#" class="boxlink">
	Click here to open the box
	<div class="box_content"></div>
      </a>

And put your HTML inside the div..... You can change the name of the div class for the box content by editing basebox.css

How to use it using Ajax calls:

Simply point the link (boxlink) at a URL. Keep in mind that at this point, it can only load URLs from the same server...


      <a href="/your/ajax/url" class="boxlink">
	Click here to open the box			        
      </a>

How to use the gallery function:

In order to use BaseBox for galleries, all you have to do is give a group of images the same 'rel' attribute:


      <a rel="test" title="image1" href="/static/images/basetools/img1.jpg" class="boxlink">image1</a>
      <a rel="test" title="image2" href="/static/images/basetools/img2.jpg" class="boxlink">image2</a>
      <a rel="test" title="image3" href="/static/images/basetools/img3.jpg" class="boxlink">image3</a>

How to replace the box content using an ajax call (see example 3):

Doing this is actually very simple. Just define a link inside the box content with the class BB_load. The href attribute will be used to call and replace the current content with that. This way you can easily generate wizards and similar structures.


      <a class="BB_load" href="/basetools/basebox/ajax-test2">goto Page 2</a>

Options:

  • opacity: The opacity of the overlay which darkens out the background. It can range from 0.0 to 1.0, where 1.0 is completely black.

  • width: -1 is the default and it means that the box tries to detect the width of it's content. You can set it to any width you want.

  • show_loading_image: Either 0 or 1. If set to 1, the box will show the loading gif animation.

  • basedir: Used to set the root directory for the box where it loads required images from.

Notes

  • The module has not had heavy browser testing, but has been tested lightly on Firefox, IE6 & IE8.

  • We use this box for many of our projects and are constantly improving it. We will make efforts to update this page and the released BaseBox version.

  • We wrote this module for our own use and did not intend to release it. It will not solve all of your life's problems, it will not cure cancer and it is not perfect, but it does the trick.

  • Many thanks to the talented creators of FancyBox and Facebox. Most of our technical and visual inspiration came from these to boxes. In our initial release we are pretty much copying the visuals of FancyBox...

  • We have used .gif images for box components like next/prev buttons in our examples to avoid having to confuse things with a png fix. You can easily use png asset's, but make sure to use a fix or they won't work in IE.