TweenBox @ Drinking Rockstars and Programming Back to WillJessup.com

tweenBox was written because I wanted a way to show multiple pages and content within a thickbox. As I began looking over the code I realized that I may as well re-write the entire thing so the code base would be well structured and allow easy modifications in the future to add on any type of additional functionality in a sensible fashion.

Tweenbox Allows you to "tween" between multiple pages , each loaded via ajax. The example i've set forth is between a login and register page, which seems like the most probable execution of this script. TweenBox grabs the dimensions of the content automatically, so no settings are required for tweenbox to know what size it needs to be, although you can set these manually. TweenBox also features a Tween-Gallery where you can load in an array of images from JSON (via ajax) and view them within the box.

• "Tween" between multiple pages
• Set size of box manually, or it grabs it automatically
• Create your own style and tween functions easily
• Tween-Gallery for viewing images
• 100% degradable

9/4/06 - finished up first version of tweenbox due to some bug fixes in jQuery core and published

8/24/06 - started workign on this again due to jQuery scource code updates which should have fixed some bugs. moving alot of the functionality into the $.tweenbox namespace . Adding a decoration type function which allows one to create customized layouts and such for the tweenbox, if they so wish - an example is called "shadow" and of course there is the default.

7/25 - Started working on slide-show gallery.

7/20 - restyled box, added speed parameter & default. Added checks for parameters and defaults.

Bugs

nothing major right now YOthis is a relaly long option to test out the select IE error

create your own style

The basic style of tweenBox is as simple as it gets; the overlay, box and close div's. But, you can create your own styles by just adding in functions within the $.tweenbox.decorator namespace and calling them in the link url , such as href="site.php?decorate=shadow&height ...

The basics

Just download the package which includes tweenbox.js , jquery.js and a few HTML files i've setup as an example and put these on a server. In order to initialize a thickbox, all you need to do is add class="tweenbox" to your A link, then add whichever options you want, such as

<a href="login.htm?decorate=shadow&height=500&amp;width=300" class="tweenbox">this opens tweenbox to login.htm</a> Availiable Options, all are part of the URL string:

• decorate: (shadow) (optional)
  example: login.htm?decorate=shadow
  This routes the code to use a function w/ the same name as which is called, so decorate=shadow will call the shadow function within the Decorate namespace. $.tweenbox.decorate = { shadow: function() { $("#tweenClose").css("right","12px"); $("#tweenContent").css("margin-right","10px"); $("#tweenWindow").prepend( '<div class="white_tr"></div>' + '<div class="white_tl"></div>' + '<div class="white_bl"></div>' ).css("background", "url(images/shadow.gif) right bottom no-repeat"); } } Within this code you can see that it is modifying the DOM and adding and changing styles associated with those elements. By using this method, or writing your own, you can easily extend tweenbox
  
  
• setup: (gallery) (optional)
  example: gallery.php?setup=gallery
  If you use setup=gallery, then tweenbox will execute the gallery.php script, which will return a JSON object that is an array of image names and URL's. //from gallery.php, this example is four images, but you can easily //use JSON.PHP to create any length array of images. echo "{ image1: '$image1', image2: '$image2', image3: '$image3', image4: '$image4'}"; The script then grabs this javascript object and constructs the gallery. With the gallery, you must specify the width & height to start.
  
  
• type: (tween) (optional)
  example: login.htm?type=tween
  if you specify type=mycustomfunction then this will call your custom function you need to write. The default is type=tween, although you don't need to specify this (as it is default).
  
  
• height: (#) (optional)
  example: login.htm?height=200
  You can either set the height manually or let the script grab the height of the incoming page automatically. If you choose to grab the height automatically, the incoming contents need to be wrapped in a container div with the height set explicity such as <div style="height:200px;"> contents... </div> If you do not set this explicity , it cannot grab the dimensions so you should fallback and set these values manually.
  
  
• width: (#) (optional)
  example: login.htm?width=200
  Same as above, but for width.

get the ZIP here

code by Will Jessup
using jQuery by John Resig
inspired by thickbox by Codey Lindley