for

Fine Management, Copenhagen

what

Complete site minus illustrations. Custom front end and back end using Indexhibit CMS

status

Online

finemanagement.dk

for

Displaying various content

what

A versatile lightbox which can display both images and other types of html elements such as embedded objects.

status

In version 1.0

wobblebox

I've been using Indexhibit for a while, including the Thickbox lightbox. I enjoyed the simplicity of the Thickbox, but wanted to be able to display other content and use it with jQuery 1.4 as well.

Enter the WobbleBox. The default design of the WobbleBox resembles very much the original Thickbox, with simple and fast operation. There exists many alternatives for a versatile lightbox solution, and the WobbleBox was mainly created for use with Indexhibit as a quick replacement for Thickbox, and thus is still very much a work in progress, while also maintaining the original thickbox class name.

Below are examples of various embedded content which can be displayed. For image use, see the Photo page where WobbleBox is in action. Include Jquery 1.4 available from jQuery.com and the JS and CSS files below.

JS CSS jQuery Examples

Setup like this

<a class="thickbox ITEMCLASS" 
href="url to file" width="width" height="height">Stuff to click</a>

Item classes

'gmaps' for google maps
'utoob' for youtube videos
'qtmov' for quicktime video
'swf' for swf file
'iframe' for - you guessed it - iframes
leave blank for single image
See lorem ipsum example for html use

`1`

Iframe / Google maps

Here is a basic Google maps iframe. Setup is the following, here with linebreaks:

<a class=thickbox gmaps" 
width="insertWidth" height="insertHeight" 
href="insert googleMapsUrl">
stuff to click on
</a>

`2`

Google maps max size

Here Google maps is set to a size fitting even the largest screens.

The iframe is automatically resized to fit the users screen, and so are other embedded objects

`3`

Youtube video HD

For youtube videos, use the url found in the embed code on youtube.com

View code


// THE ACTUAL CODE IN USE

<a class="thickbox utoob" height="505" width="853"
href="http://www.youtube.com/v/J0X3uG3kPkE&hl=en_US&fs=1&hd="><img
 src='http://wobbleweb.net/files/youtubehd.jpg' width='260' height='157' alt="" /></a>

`4`

Apple mov trailer

All <a> elements with thickbox class need to have width and height attribute set. Add an optional title attribute to the thickbox div to include a titel on the top left. To exclude an item from the complete index of items, add tbskip="true" to the thickbox div

View code


// Actual code in use

<a class="thickbox qtmov" height="448" width="848"
href="http://movies.apple.com/movies/disney/aliceinwonderland/aliceinwonderland-
tlr1_480p.mov"><img src='http://wobbleweb.net/files/qtmov.jpg'
 width='260' height='157' /></a>

`5`

Lorem ipsum text

Wrap text/mixed content in a div with a set width, then insert in tbcontent div like this:

<div class="thickbox">
stuff to click here
<div class="tbcontent">
put html here
</div>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec libero nulla, a volutpat diam. Nunc placerat sapien quis nibh porta pellentesque. Sed quis sapien non neque commodo aliquet et porttitor nulla. Donec lacinia lorem nec nunc rhoncus elementum. In hac habitasse platea dictumst. Suspendisse ligula felis, auctor sed tristique et, lobortis convallis nunc. Ut non commodo massa. Praesent nec lorem non mi sagittis dapibus ut sed magna. Cras nulla felis, feugiat congue tempor porttitor, sollicitudin id dolor. Integer augue elit, rutrum ut facilisis non, porttitor vel mauris. Suspendisse cursus orci nec quam mollis elementum. Sed vitae dolor sit amet sapien lobortis hendrerit at at arcu. Suspendisse potenti. Donec massa eros, tincidunt nec commodo vitae, interdum vel lacus. Cras quis urna at risus pulvinar volutpat at sit amet lorem. Fusce tincidunt, enim in aliquet dictum, metus neque rutrum lorem, quis feugiat dui mi ac lectus. Curabitur hendrerit lobortis orci vel faucibus.

Suspendisse vel tortor arcu, vel cursus orci. Duis egestas magna sodales metus eleifend dapibus. Proin posuere, purus ut tristique ultrices, erat magna gravida nunc, eu vestibulum nunc erat nec enim. Proin ut mi ac leo suscipit commodo sed eu nunc. Cras rutrum commodo bibendum. Proin in hendrerit dui. Phasellus vel velit quam. Ut libero metus, blandit quis vestibulum vel, tristique ut odio. Nunc tempor sem at nibh ultricies tincidunt. Praesent interdum nisl ac erat iaculis ac rhoncus risus cursus. Cras convallis, massa sed aliquam tempor, lacus velit iaculis dui, sagittis lacinia ligula risus vel felis. Vestibulum mi felis, pellentesque in lobortis ut, iaculis vel ligula. Cras eros metus, ullamcorper ac elementum sed, eleifend vitae magna.

Maecenas egestas odio non arcu auctor condimentum. Nulla sodales elementum nunc, a dignissim lacus scelerisque sodales. Ut et nibh leo, vel faucibus massa. Integer a lectus dolor, ut faucibus tortor. Donec feugiat sodales felis, nec placerat enim cursus et. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis risus sem, sagittis sed placerat interdum, ultricies ac nisl. Pellentesque fringilla tincidunt risus et venenatis. Sed at consectetur leo. Curabitur sit amet cursus justo. Nam purus nulla, congue eu laoreet quis, consectetur eu ligula. Donec adipiscing fermentum arcu, vitae semper nisl vestibulum a. Vivamus dui quam, malesuada at euismod eu, pharetra eu enim. Nullam augue elit, congue at sagittis nec, tempor eget lacus. Aenean ipsum massa, vehicula nec pretium consectetur, rutrum sit amet dolor. Vestibulum sed auctor erat. Curabitur sollicitudin iaculis porttitor. Proin vel orci mi.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eros felis, egestas et mattis eu, pellentesque non eros. Ut non velit mi. Cras sem purus, tincidunt vel pulvinar in, ullamcorper ut purus. Nullam euismod molestie mollis. Maecenas ligula elit, laoreet vulputate ornare id, facilisis at felis. In eu odio eget tellus pellentesque tincidunt eu ut metus. Nunc cursus convallis eleifend. Quisque egestas pharetra neque, at ultrices odio fermentum quis. Praesent consequat sem vitae purus viverra vel eleifend neque adipiscing.

`6`

SWF file
(Hosted/Credit by www.rathergood.com)

View code


// Actual code in use

<a class="thickbox swf" width="640" height="480" 
title="Very funny stuff from rathergood.com" 
href="http://www.rathergood.com/content/vid/crab.swf">
<img src='http://wobbleweb.net/files/swf.jpg' width='260' height='157' alt="" />
</a>

`7`

Regular iFrame

Here is the code for an iFrame

<a class="thickbox iframe" height="600" 
width="1050" href="http://www.engadget.com">
Stuff to click on</a>

for

Fabian Hammerl Photographie Hamburg

what

Complete site based on client design. Custom front end using Indexhibit CMS as back end

status

Online

fabian-hammerl.de

for

Bagsværd Kirke, Copenhagen

what

Complete site redesign in Typo3 CMS

status

Online

bagsvaerdkirke.dk

for

Bikubenkollegiet Ørestad Copenhagen

what

Complete php based site, front end & back end

status

Online

bikubenkollegiet.dk

1

Iframe / Google maps

2

Google maps max size

3

Youtube video HD

4

Apple mov trailer

5

Lorem ipsum text

6

SWF file (Hosted/Credit by www.rathergood.com)

7

Regular iFrame

`1`

`2`

`3`

`4`

`5`

`6`

SWF file
(Hosted/Credit by www.rathergood.com)

`7`