TALCIBox - TALCIBox - Tolgahan Albayrak's Cine-Box
Examples
Single Image
Grouped Images
IFrame
Click me to search in google!
Pure HTML
Click to see this text in a box!
Pure HTML (Hidden)
Click here to Login!
| User Name : |
|
| Password : |
|
|
|
Remember Me |
|
|
All In One
Click to see my complex gallery!
Overview
TALCIBox is a great javascript applet for displaying any content dynamically. It works stand-alone and file size is 10 Kb.
Technical Details & Licence
Author : Tolgahan Albayrak
Type : I call it Cine-Box but you could prefer to call as "LightBox"
File Size : 10,07 KB Compressed, 15,03 KB Uncompressed
Stand-Alone : Yes, that mean it does not require any other libraries
Configurable : Yes, You could change everything like animation types, texts, colors, styles, transparancies etc..
Improvable : Yes, You could write your own type add-ons
Plug and Play : Yes, just give a script link on your page
Version: 0.1 / 25-07-2008
Supported Browsers: Cross Browser, that mean it works on IE 5.5+, FireFox 1.5+, Opera 7+, Netscape, Safari etc..
Licence : Creative Commons Attribution 2.5 License.
Price: It is completly free under CCAL
How To Use
-
-
Upload it to your server
-
Add a script tag into head element as below on your page what you want to use this tool
<script type="text/javascript" src="/talcibox.js"></script>
-
Add a class attribute any html element which you want to use as source
<img src="thumb.jpg" class="talcibox:[url{@big.jpg@}]" alt="my title" />
-
Enjoy!
TALCIBox Html Element Class Attribute and Variables
TALCIBox uses a private definition to run. All the variables must be in element's class attribute as class="talcibox:[variable{@content@}]".
The variables could be used many times and variable positions are ignored:
<img class="talcibox:[url{@pic.jpg@};group{@my key@}; description{@ my image @}" />
or
<img class="talcibox:[group{@my key@}; description{@ my image @}; url{@ pic.jpg@}; " />
Currently supported TALCIBox variables are:
|
Variable
|
Usage |
Description |
| Type – Image |
type{@image@} |
Uses url variable as image source |
| Type – Html |
type{@html@} |
Uses url variable as html element’s ID attribute |
| Type – Iframe |
type{@iframe@} |
Uses url variable as IFrame source |
| Url |
url{@variable@} |
It depends for type variable. Required |
| Title |
title{@title text@} |
If it is setted it will be used as item title, otherwise TALCIBox will check html element’s alt or title attribute to use |
| Description |
description{@description text@} |
If it is setted it will be used as item description |
| Group |
group{@group key@} |
If it is setted TALCIBox will group the members which has the same group key |
| OnClick |
onclick{@html element’s id@} |
If it is setted TALCIBox will attach itself the html element’s click event to run, whose id is given value |
Configuration
To personalize TALCIBox add a script tag after added talcibox.js:
<script type="text/javascript">
with(TALCIBox.config)
{
adelay:15; //any numeric value, it sets the all animations delay
animlevel:6; //any numeric value, it sets the animation sin level
astep:25; //any numeric value, it sets the total steps of all animations
boxClass:'box'; // css class of windows
captionClass:'caption'; // css class of captions
closeButtonClass:'close'; // css class of close button
closeButtonText:'Close'; // caption of close button
defaultTitle:'Untitled'; // if item has no title this will be used
descriptionClass:'description'; // css class of descriptions
introanim:0; //0-2 animation type of first loading window
itemhanim:1; //0-2 animation type, used while box height is changing
itemoutanim:1; //0-2 animation type, used when mouse leave from item
itemoveranim:1; //0-2 animation type, used when mouse posed on item
itemwanim:1;//0-2 animation type, used while box width is changing
loadingHTML:'<img src="ajax-loader.gif"/>' //any text or html it will be used while content is loading
mwanim:true;//any boolean value, it sets that modal window will have animation on show/close
mwanimdelay:15;//any numeric value, it sets modal window animation delay
mwanimstep:25;//any numeric value, it sets the total steps of modal window animation
mwcolor:'black';//any html color, it sets modal window background-color
mwopacity:.85;//0-1 any float value, it sets the modal window visibility
wanim:true;//any boolean value, it sets that if item windows has animation
wanimtype:1;//0-2 it set basic window animation
}
</script>
Developing Your Own Type Workers
Under construction
DEMOS
Under construction
abone ol