Clearbox is a professional image and content viewer overlay window created by kreatura. Images below are speaking for themself, where you can see some examples about using the script: image galleries and many type of contents including Flash, Quicktime, Windows Media formats, HTML, inner content, etc.

Using of clearbox is free.

#1#2#3

Image Gallery

Green

just click on the pictures...

clearbox contents image html content inner content flash content youtube movie quicktime movie music

Mixed Gallery

Gallery of different content types

You can create galleries with no compromises!

What's new in clearbox 3? Everything. :) The script became much smarter. As you can see, it supports lot of new content types, but also the usage has been changed. I changed the default folders of the script, added multi-language support and more user settings. I added a new animation called 'grow'. Now, clearbox is also working BEFORE the page is fully loaded! In clearbox 3 you can add your multi-line comment to any content. You can rotate the images with clearbox (not working in Internet Explorer or some other older browsers) and I added a fancy OSD.

Clearbox setup Download the script and uncompress it into the root folder of your webpage! You will see a file called clearbox.js and a folder named clearbox. I put all the required files here.

In clearbox folder, there are three another folders:

core contains the clearbox core script and you have nothing to do with it.

language is required to multi-language support. You can easily add your language file. If you look into the folder, you will see how.

config is the third, which is the most important. I put user settings in it, but you can add your own configuration here. For example it's easy to create your own clearbox-layout by modifying the user settings and changing the pictures and the css file, if you want. And - here is a special gift :) - I created a sample configuration called grow_transparent for you!

Add this line to header:

<script src="clearbox.js" type="text/javascript"></script>

Of course, you can put clearbox.js where you want.

There are some settings in clearbox.js:

CB_SrciptDir is the script folder. You have to set the path according to your html file including clearbox.js. You can use absolute url too.

CB_Language - you can set the default language after added your own laguage file.

If you want to use your own configuration, load the config parameter:

<script src="clearbox.js?config=myconfig" type="text/javascript"></script>

myconfig is the name of the folder that contains your settings under clearbox/config.

You can also set CB_SrciptDir with dir and CB_Language with lng parameter:

<script src="clearbox.js?dir=scripts/clearbox&lng=eng" type="text/javascript"></script>

That's it! You don't have to add other lines (like including css file) into header.

Using clearbox Add the rel="clearbox" attribute to activate the script. You can use the optional title parameter to add a caption or title to your image or other type of contents.

<a href="image.jpg" rel="clearbox" title="Caption"><img src="image_thumbnail.jpg" /></a>

As a default, you don't have to specify the type of content. Clearbox is very smart, it can automatically detect content types. For example, if you want to use clearbox for playing an MP3 file, you have to use exactly the same attribute with the optional title parameter:

<a href="music.mp3" rel="clearbox">sample music</a>

Creating galleries If you want to create an image or a mixed content gallery, you have to add the SAME GALERY NAME to all of the contents:

<a href="a.jpg" rel="clearbox[gallery=My Gallery]">sample image</a>
<a href="b.mp3" rel="clearbox[gallery=My Gallery]">sample music</a>
<a href="http://www.youtube.com/v/myrmovieid" rel="clearbox[gallery=My Gallery]">sample youtube</a>

Content types and detection Clearbox detects automatically the following content types in href attribute:

Image formats: BMP, GIF, JPG, JPEG, PNG

Movie formats: AVI, MOV, MPG, MPEG, WMV

Audio formats: MP3, WAV, WMA

Flash: SWF

Inner content: inner#id_of_an_element

HTML content: adding htmlcontent to href

Iframe content: http://... - you can display any webpages with clearbox

and also YOUTUBE urls(!), like:
http://www.youtube.com/v/mymovieid

Examples: Inner content: you have to use the expression inner# and the id of an element of your page and clearbox will display it. It also auto-detects the dimensions of the element.

<a href="inner#test" rel="clearbox">inner content</a>

HTML: you can display any HTML code with clearbox - including text or any HTML tags. If you want to use more html items in the same gallery, you have to use the htmlcontent#1, htmlcontent#2, etc. formats to make them perceptible. IMPORTANT: In this case, you have to use a parameter called html (you can read more about parameters below).

<a href="htmlcontent" rel="clearbox[html=<strong>This is a bold text</strong>]">my webpage</a>

Iframe:

<a href="http://www.mywebpage.com" rel="clearbox">my webpage</a>

YouTube:

<a href="http://www.youtube.com/v/mymovieid" rel="clearbox">my youtube video</a>

Movies:

<a href="movie.wmv" rel="clearbox">my movie</a>

Music:

<a href="music.wav" rel="clearbox">my music</a>

Additional parameters As you can see, we are using [ ] bracelets to put the gallery name into, but you can use here some other parameters. IMPORTANT: if you add more parameters, you have to separate them with double-commas - ,, - and you have to use = to add values! You don't have to use quotation marks!

<a href="mycontent"rel="clearbox[parameter1=value 1,,parameter2=value 2,,parameter3=value 3]">some content</a>

You can use the following - optional - parameters:

gallery
Name of the gallery. At least two items must have the same name. You can create galleries as much you want!
USAGE: gallery=My Gallery Name

href
You can set the url of the content with this parameter too. For example: if you need to load other content than in the <a> tag specified.
USAGE: href=mycontent

type
If you want to overide the auto content-type detection of clearbox, use this parameter. Values can be: flash, html, iframe, image, inner, quicktime, winmedia.
USAGE: type=flash

title
If you don't want to use the title attribute of <a> tag than add the title in rel tag :)
USAGE: title=My Title

width
You can set the width of the clearbox window to the content you want to display. For example, if you have a flash movie with 200 pixels width, set this parameter to 200!
USAGE: width=200

height
Of course you can set the height too.
Note, that width and height parameters are working with images too. For example you can deform images with using these parameters!
USAGE: height=200

tnhrf
It works only with galleries! You can add thumbnail picture to a gallery item. Warning! In ClearBox 2, this parameter had tnhref name, but in clearbox 3, it is tnhrf without an 'e' letter! Sorry for this change!
USAGE: tnhrf=mythumbnails/mythumbnail.jpg

slideshowtime
It works only with image galleries! You can add different slideshow durations (in seconds) to different images!
USAGE: slideshowtime=10

autoslideshow
It works only with image galleries! If you add this parameter, the slideshow will automatically start at this item. Note, that this parameter has no value!
USAGE: autoslideshow

comment
You can write a comment text to any content. Length is not maximized, but if the height of the comment box exceeds the value of CB_TxtHMax parameter (located in cb_config.js), the comment-box will be scrollable. IMPORTANT: If you want to use HTML codes in your comment, please read carefully the 'Using HTML codes in comment and HTML mode' subject in the 'Professional usage' section on this page!
USAGE: comment=This is my comment

closeonh
If it is off, than clearbox wont close if you click on the background. Note, that this setting overwrites the global CB_CloseOnH user setting at the actual gallery item.
USAGE: closeonh=off

dlhrf
At default clearbox has a download or maximum size button at the bottom. Use this parameter when you want to download other content, that clearbox actually shows, if you click to the download button. Or use this parameter, if you want to add a downloadable content to a content type, that clearbox shows.
USAGE: dlhrf=mydownloadablecontent

dlinsame
Use this parameter, if you want to open the downloadable content in the same window instead of open it in a new browser window or tab. Note, that this parameter has no value!
USAGE: dlinsame

html
This is a REQUIRED parameter for HTML mode! Clearbox can display any html content by adding href="htmlcontent" to the <a> tag AND using this parameter. Clearbox will display the parameter's value, so you can use ANY HTML CODE in the value. IMPORTANT: Please read carefully the 'Using HTML codes in comment and HTML mode' subject in the 'Professional usage' section on this page!
USAGE FOR EXAMPLE: html=<strong>This is a bold text</strong>

User settings in cb_config.js Clearbox layout:

CB_WindowColor='#fff'
color of the CB window (note: you have to change the frame and rounded-corner PNGs too!), transparent is also working

CB_MinWidth=120
minimum (only at images) or initial width of CB window

CB_MinHeight=120
initial heigth of CB window

CB_WinPadd=15
padding of the CB window from sides of the browser

CB_RoundPix=12
change this setting only if you are generating new PNGs for rounded corners

CB_ImgBorder=0
border size around the picture in CB window

CB_ImgBorderColor='#ddd'
border color around the picture in CB window

CB_Padd=4
padding around inside the CB window

CB_BodyMarginLeft=0
CB_BodyMarginRight=0
CB_BodyMarginTop=0
CB_BodyMarginBottom=0
if you set margin to <body>, please change these settings!

CB_ShowThumbnails='auto'
it tells CB how to show the thumbnails ('auto', 'always' or 'off') thumbnails are only in picture-mode!

CB_ThumbsBGColor='#000'
color of the thumbnail layer

CB_ThumbsBGOpacity=.35
opacity of the thumbnail layer

CB_ActThumbOpacity=.65
thumbnail opacity of the current viewed image

CB_SlideShowBarColor='#fff'
color of the slideshow bar

CB_SlideShowBarOpacity=.5
opacity of the slideshow bar

CB_SlideShowBarPadd=17
padding of the slideshow bar (left and right)

CB_SlideShowBarTop=2
position of the slideshow bar from the top of the picture in px

CB_SimpleDesign='off'
if it's 'on', CB doesn't show the frame but only the content - really nice ;)

CB_CloseBtnTop=-10
vertical position of the close button in picture mode

CB_CloseBtnRight=-14
horizontal position of the close button in picture mode

CB_CloseBtn2Top=-20
vertical position of the close button in content mode

CB_CloseBtn2Right=-30
horizontal position of the close button in content mode

CB_OSD='on'
turns on OSD

Clearbox font, text and navigation (at the bottom of CB window) settings:

CB_FontT='Verdana'
CB_FontSizeT=12
CB_FontColorT='#777'
CB_FontWeightT='normal'
these variables are referring to the title or caption line

CB_FontC='arial'
CB_FontSizeC=11
CB_FontColorC='#aaa'
CB_FontWeightC='normal'
CB_TextAlignC='justify'
these variables are referring to comment lines under the title

CB_TxtHMax=42
maximum height of the comment box in pixels

CB_FontG='arial'
CB_FontSizeG=11
CB_FontColorG='#999'
CB_FontWeightG='normal'
these variables are referring to the gallery name

CB_TextH=35
default height of the text area under the content in CB window (adding a comment will modify this setting), if you change the font sizes, you maybe have to change this setting

CB_PadT=10
space in pixels between the content and the title or caption line

CB_ShowURL='off'
it shows the url of the content if no title or caption is given

CB_ItemNum='on'
it shows the ordinal number of the content in galleries

CB_ItemNumBracket='()'
whatever you want ;)

CB_ShowGalName='on'
it shows the gallery name

CB_TextNav='on'
it shows previous and next navigation

CB_NavTextImgPrvNxt='on'
it shows previous and next buttons instead of text

CB_ShowDL='on'
it shows download controls

CB_NavTextImgDL='on'
it shows download buttons instead of text

CB_ImgRotation='on'
it shows the image rotation controls

CB_NavTextImgRot='on'
it shows the image rotation buttons instead of text

Settings of the document-hiding layer:

CB_HideColor='#000'
color of the layer

CB_HideOpacity=.85
opacity (0 is invisible, 1 is 100% color) of the layer

CB_HideOpacitySpeed=400
speed of fading

CB_CloseOnH='on'
CB will close, if you click on background

Clearbox animation settings:

CB_Animation='double'
'double', 'normal', 'off', 'grow' or 'warp' (high cpu usage)

CB_ImgOpacitySpeed=450
speed of content fading (in ms)

CB_TextOpacitySpeed=350
speed of text fading under the picture (in ms)

CB_AnimSpeed=400
speed of the resizing animation of CB window (in ms)

CB_ImgTextFade='on'
turns on or off the fading of content and text

CB_FlashHide='off'
it hides flash animations on the page before CB starts

CB_SelectsHide='on'
it hides select boxes on the page before CB starts

CB_SlShowTime=5
default speed of the slideshow (in sec)

CB_Preload='on'
preload neighbour pictures in galleries

Images using by clearbox settings:

CB_PictureStart='start.png'
CB_PicturePause='pause.png'
CB_PictureClose='close.png'
CB_PictureNext='next.png'
CB_PicturePrev='prev.png'
file names of some images using by clearbox (there are other images specified in clearbox.css!)

Clearbox professional settings:

CB_PicDir=CB_ScriptDir+'/config/'+CB_Config+'/pic'
CHANGE ONLY IF YOU CHANGED THE DEFAULT DIRECTORY-STRUCTURE OF CB!

CB_AllowedToRun='on'
if 'off', CB won't start (you can change this variable without reload!)

CB_AllowExtFunctLoad='off'
if 'on', CB will run a function named CB_ExternalFunctionLoad(); every time after a new content has loaded (useful for audit, etc)

CB_AllowExtFunctPageLoad='off'
if 'on', CB will run a function named CB_ExternalFunctionPageLoad(); after your page has fully loaded

CB_AllowExtFunctCBClose='off'
if 'on', CB will run a function named CB_ExternalFunctionCBClose(); after CB window has closed

Professional usage Using HTML codes in comment and HTML mode

You can use any HTML codes in your comment or in HTML mode (href="htmlcontent"), but you have to keep your eyes open and make some tricks. Let me explain, why. Don't forget, that if you're writing a comment or adding the 'html=' parameter in HTML mode, YOU ARE IN AN OPENED REL ATTRIBUTE OF AN OPENED <a> TAG! So it is clean-cut, that you cannot use any < > and " characters here!

Thatswhy, instead of use this HTML code:

<font color="#ff6600">my text</font>

Use THIS:

&lt;font color=&quot;#ff6600&quot;&gt;my text&lt;/font&gt;

Yeah, I know: it's not too nice, but it's really simple:

use &lt; INSTEAD OF <

use &gt; INSTEAD OF >

use &quot; INSTEAD OF "

use &apos; INSTEAD OF apos;

use &amp; INSTEAD OF &

That's it! :)

Opening clearbox manually from javascript

Use the CB_Open(); function! CB_Open has all the same parameters above, but in this case, the href parameter is always required!

CB_Open('href=mycontent,,parameter2=value 2,,parameter3=value 3,, ... ');

Opening clearbox from flash (not tested!)

IMPORTANT: Do NOT forget to add the wmode = transparent parameter to your flash movie(s)!
I think you can open clearbox from flash too with the CB_Open(); function. The parameters are the same but if you want to use galleries on a full-flash page, than you have to create the CB_Gallery array manually BEFORE you call CB_Open(); function! You can read about CB_Gallery below, but I show you a working example, how to create it:

Creating CB_Gallery manually:

CB_Gallery=new Array(); // creating the array
CB_Gallery[0]='Example'; // name of the gallery

CB_Gallery[1]=new Array(); // array of first item:

CB_Gallery[1][0]='images/grass_01.jpg'; // url
CB_Gallery[1][1]='image'; // type
CB_Gallery[1][2]='Green Sample #1'; // title
CB_Gallery[1][5]='images/grass_02.jpg'; // tnhrf
CB_Gallery[1][8]='This is a comment'; // comment

CB_Gallery[2]=new Array(); // array of second item:

CB_Gallery[2][0]='http://www.clearbox.hu'; // url
CB_Gallery[2][1]='iframe'; // type
CB_Gallery[2][2]='Clearbox home'; // title
CB_Gallery[2][3]=900; // width
CB_Gallery[2][4]=500; // height
CB_Gallery[2][8]='Home page of clearbox.'; // comment

CB_Open('gallery=Example,,href=http://www.clearbox.hu'); // In this case, you MUST use the gallery parameter, and href is the url of one of the gallery items.

CB_Gallery setup

If you want to dinamically change contents or data in a clearbox-gallery, you have to know, how it works. CB_Gallery is the name of an Array, that clearbox uses for storing the data of the gallery items. CB_Gallery[0] contains ALWAYS the name of the gallery or if you click on a single item, that is not a part of any galleries, CB_Gallery[0] is 'clearbox'. Thatswhy CB_Gallery.length is always n + 1, where n is the number of the items in gallery. You can refer to any item of the gallery by CB_Gallery[n] and n = 1 if you refer to the first item.

CB_Gallery[n] is always an array:

CB_Gallery[n][0] is the url of the item (href parameter)
CB_Gallery[n][1] is the type of the item (type parameter)
CB_Gallery[n][2] is the title or caption of the item (title parameter)
CB_Gallery[n][3] is the width of the item (width parameter)
CB_Gallery[n][4] is the height of the item (height parameter)
CB_Gallery[n][5] is the thumbnail url of the item (tnhrf parameter)
CB_Gallery[n][6] is the slideshowtime of the item
CB_Gallery[n][7] is the autoslideshow parameter
CB_Gallery[n][8] is the comment of the item (comment parameter)
CB_Gallery[n][9] is the closeonh parameter
CB_Gallery[n][10] is the download url of the item (dlhrf parameter)
CB_Gallery[n][11] is the dlinsame parameter
CB_Gallery[n][12] is the html parameter (only at HTML mode)
CB_Gallery[n][13] is the rotation of the image in degrees (90, 180 or 270)

If CB_Gallery exists, you can check any item of it by calling CB_ShowActItem(ID); function, where ID is the number of the gallery item. Click here to test it!

Closing clearbox from inside of the clearbox window

If you want to close clearbox from an iframe, use the window.parent.CB_Close(); function, or in any other cases (html, inner content, flash) use the CB_Close(); function!

Loading other gallery item from inside of the clearbox window

If you want to load other gallery item from an iframe, use the window.parent.CB_LoadContent(ID); function, or in any other cases (html, inner content, flash) use the CB_LoadContent(ID); function, where ID is the ordinal number of the item in gallery!

Using the script with AJAX

If you load new content with AJAX in your webpage without refreshing it and you want, that the clearbox work with the new content too, you have to call CB_Init(); function AFTER your AJAX content-load.

Running your own function when clearbox loads a content

See the end of the 'Clearbox professional settings' section of 'User settings in cb_config.js' subject on this page!

Contact developer: kreatura media

Changelog Version 3.7 (2011. 06. 28.)

- fixed FF5 bug

Version 3.6 (2011. 03. 28.)

- fixed FF4 bug
- other bugfixes

Version 3.02 (2009. 07. 26.)

- fixed CB_ExternalFunctionPageLoad(); (#2 :)
- now the canvas tag is not hiding some part of the content of your webpage at first load

Version 3.01 (25. 07. 09.)

- now working with script tags in head without src attribute
- fixed a little resizing bug
- fixed CB_ExternalFunctionPageLoad();
- fixed document-hiding layer resizing bug in some browsers
- fixed document-hiding layer resizing bug when page is not fully loaded
- smaller script size
- added French and Turkish languages
- changed language path: eng to en and hun to hu.

Version 3.0 (22. 07. 09.)

- lot of new supported content types
- multi-language support
- more user settings
- new animation type
- working BEFORE the page is fully loaded
- multi-line comment
- rotate the images (except IE)
- OSD