2023-04-02 12:15:58 +00:00
|
|
|
<!doctype html><html lang="en"><head><meta charset="utf-8"><title>Configurator - Floatbox</title><script src="../floatbox.js"></script><link rel="stylesheet" href="../floatbox.css"><style>body{font:normal 12px/1.4 sans-serif;background:#e3e3e3}
|
2023-04-02 08:31:07 +00:00
|
|
|
#page_title{font-size:1.2em;font-weight:bold;margin:-1.2em auto 1.2em;color:#058;}
|
|
|
|
|
#main,#output{width:59em;margin:0 auto;text-align:center}
|
|
|
|
|
#main{margin-top:1.2em;padding:1.5em;background:#ccc repeat url(data:image/gif;base64,R0lGODdhBgAGAMIFAMTExMzMzMfHx8nJycvLy////////////ywAAAAABgAGAAADDkgxALLtMRdCrIKG/HZLADs=);box-shadow:-12px 3px 15px -4px rgba(0,0,0,0.34),12px 3px 15px -4px rgba(0,0,0,0.34)}
|
|
|
|
|
#buttons{margin:2em auto 0 auto;text-align:center}
|
|
|
|
|
form{clear:both;text-align:left}
|
|
|
|
|
button{color:#fff;background-color:#555;border:3px solid #222;border-radius:.85em;padding:.25em .6em;margin:0 1em;outline:none}
|
|
|
|
|
table{width:100%;border:1px solid black;border-spacing:0;background:#f4f4f4}
|
|
|
|
|
td{position:relative;width:25%;border:1px solid black;padding:.5em}
|
|
|
|
|
td .fbTooltip{position:absolute;right:0;top:0;background-color:#c6deff;cursor:help}
|
|
|
|
|
select,input[type=text]{width:7em}
|
|
|
|
|
#message{text-align:left;padding:.7em 8em;margin:1em 0 .3em}
|
|
|
|
|
#optionsText{border:2px solid #9ac;padding:.7em;margin:auto;display:none}
|
|
|
|
|
.ref{padding:0 1em}
|
|
|
|
|
.code{font:normal 11px monospace;color:maroon;background-color:#ffe}
|
|
|
|
|
#tab1{display:block}
|
|
|
|
|
.tabContent{display:none}
|
|
|
|
|
.tabs{font:bold 12px/1.2 sans-serif;width:100%;height:2.7em;margin:4px 0 0;text-align:left;border-bottom:0px solid #bbb}
|
|
|
|
|
.tabs a{display:inline-block;width:6.7em;height:100%;text-align:center;vertical-align:top;border:1px solid #333;border-bottom-width:0!important;border-radius:6px 6px 0 0;margin:-5px 2px 0 0;padding:4px 10px 0;color:#333;background-color:#e3e3e3;text-decoration:none}
|
|
|
|
|
.tabs a:first-child{margin-left:12px;}
|
|
|
|
|
.tabs a:hover{border-color:#800;background-color:#fbf7f0}
|
2023-04-02 12:15:58 +00:00
|
|
|
.tabs a.active{background-color:#f4f4f4;background:linear-gradient(0deg,#f4f4f4,#f4f4f4 65%,#fda);border:2px solid #800;margin-top:-7px;padding:5px 9px 1px;}</style></head><body><div id="main"><p id="page_title">Floatbox v8.5 - Options Configurator</p><div class="tabs"><a class="active" href="#tab1">Appearance & Animations</a> <a href="#tab2">Color & Size</a> <a href="#tab3">Position & Controls</a> <a href="#tab4">Galleries & Slideshows</a> <a href="#tab5">Tooltips, Cyclers, etc.</a> <a href="#tab6">General</a></div><form id="form" method="post"><div id="tab1" class="tabContent"><table><tbody><tr><td><span class="fbTooltip" data-fb-tooltip="source:#shadowType_ref"> ? </span> <label>shadowType<br><select><option value="drop">drop</option><option value="hybrid">hybrid</option><option value="halo">halo</option><option value="none">none</option></select></label></td><td><span class="fbTooltip" data-fb-tooltip="source:#shadowSize_ref"> ? </span> <label>shadowSize<br><input type="text"></label> px</td><td><span class="fbTooltip" data-fb-tooltip="source:#shadowOpacity_ref"> ? </span> <label>shadowOpacity<br><input type="text"></label> 0-1</td><td><span class="fbTooltip" data-fb-tooltip="source:#outerBorder_ref"> ? </span> <label>outerBorder<br><input type="text"></label> px</td></tr><tr><td><span class="fbTooltip" data-fb-tooltip="source:#innerBorder_ref"> ? </span> <label>innerBorder<br><input type="text"></label> px</td><td><span class="fbTooltip" data-fb-tooltip="source:#outerBorderRadius_ref"> ? </span> <label>outerBorderRadius<br><input type="text"></label> px</td><td><span class="fbTooltip" data-fb-tooltip="source:#innerBorderRadius_ref"> ? </span> <label>innerBorderRadius<br><input type="text"></label> px</td><td><span class="fbTooltip" data-fb-tooltip="source:#padding_ref"> ? </span> <label>padding<br><input type="text"></label> px</td></tr><tr><td><span class="fbTooltip" data-fb-tooltip="source:#panelPadding_ref"> ? </span> <label>panelPadding<br><input type="text"></label> px</td><td><span class="fbTooltip" data-fb-tooltip="source:#headerGap_ref"> ? </span> <label>headerGap<br><input type="text"></label> px</td><td><span class="fbTooltip" data-fb-tooltip="source:#footerGap_ref"> ? </span> <label>footerGap<br><input type="text"></label> px</td><td><span class="fbTooltip" data-fb-tooltip="source:#overlayOpacity_ref"> ? </span> <label>overlayOpacity<br><input type="text"></label> 0-1</td></tr><tr><td><span class="fbTooltip" data-fb-tooltip="source:#doAnimations_ref"> ? </span> <label>doAnimations<br><input type="checkbox"></label></td><td><span class="fbTooltip" data-fb-tooltip="source:#overlayFadeTime_ref"> ? </span> <label>overlayFadeTime<br><input type="text"></label> sec</td><td><span class="fbTooltip" data-fb-tooltip="source:#resizeTime_ref"> ? </span> <label>resizeTime<br><input type="text"></label> sec</td><td><span class="fbTooltip" data-fb-tooltip="source:#fadeTime_ref"> ? </span> <label>fadeTime<br><input type="text"></label> sec</td></tr><tr><td><span class="fbTooltip" data-fb-tooltip="source:#transitionTime_ref"> ? </span> <label>transitionTime<br><input type="text"></label> sec</td><td><span class="fbTooltip" data-fb-tooltip="source:#imageTransition_ref"> ? </span> <label>imageTransition<br><select><option value="crossfade">crossfade</option><option value="slide">slide</option><option value="shift">shift</option><option value="expand">expand</option><option value="fade">fade</option><option value="none">none</option></select></label></td><td><span class="fbTooltip" data-fb-tooltip="source:#startAt_ref"> ? </span> <label>startAt<br><input type="text"></label></td><td><span class="fbTooltip" data-fb-tooltip="source:#endAt_ref"> ? </spa
|
2023-04-02 08:31:07 +00:00
|
|
|
defaults: {
|
|
|
|
|
|
|
|
|
|
shadowType: 'drop',
|
|
|
|
|
shadowSize: 12,
|
|
|
|
|
shadowOpacity: 0.4,
|
|
|
|
|
outerBorder: 1,
|
|
|
|
|
innerBorder: 1,
|
|
|
|
|
outerBorderRadius: 8,
|
|
|
|
|
innerBorderRadius: 0,
|
|
|
|
|
padding: 20,
|
|
|
|
|
panelPadding: 6,
|
|
|
|
|
headerGap: 0,
|
|
|
|
|
footerGap: 0,
|
|
|
|
|
overlayOpacity: 0.55,
|
|
|
|
|
doAnimations: true,
|
|
|
|
|
overlayFadeTime: 0.4,
|
|
|
|
|
resizeTime: 0.7,
|
|
|
|
|
fadeTime: 0.4,
|
|
|
|
|
transitionTime: 0.8,
|
|
|
|
|
imageTransition: 'crossfade',
|
|
|
|
|
startAt: '',
|
|
|
|
|
endAt: '',
|
|
|
|
|
splitResize: false,
|
|
|
|
|
easing: 2.5,
|
|
|
|
|
inflection: 0.5,
|
|
|
|
|
animationTime: 1,
|
|
|
|
|
colorTheme: '',
|
|
|
|
|
boxColor: '',
|
|
|
|
|
overlayColor: '',
|
|
|
|
|
innerBorderColor: '',
|
|
|
|
|
outerBorderColor: '',
|
|
|
|
|
textColor: '',
|
|
|
|
|
strongTextColor: '',
|
|
|
|
|
contentBackgroundColor: '',
|
|
|
|
|
boxBackgroundImage: '',
|
|
|
|
|
overlayBackgroundImage: '',
|
|
|
|
|
autoFit: true,
|
|
|
|
|
autoFitSpace: 5,
|
|
|
|
|
enableImageResize: true,
|
|
|
|
|
inFrameResize: true,
|
|
|
|
|
hoverPan: true,
|
|
|
|
|
resizeTool: '',
|
|
|
|
|
enableDragResize: false,
|
|
|
|
|
draggerLocation: 'frame',
|
|
|
|
|
stickyResize: true,
|
|
|
|
|
minWidth: 140,
|
|
|
|
|
minHeight: 100,
|
|
|
|
|
maxWidth: 0,
|
|
|
|
|
maxHeight: 0,
|
|
|
|
|
minBoxWidth: 0,
|
|
|
|
|
minBoxHeight: 0,
|
|
|
|
|
boxLeft: '',
|
|
|
|
|
boxTop: '',
|
|
|
|
|
boxX: '',
|
|
|
|
|
boxY: '',
|
|
|
|
|
boxLeftAdjust: '',
|
|
|
|
|
boxTopAdjust: '',
|
|
|
|
|
captionPos: 'bl',
|
|
|
|
|
caption2Pos: 'tc',
|
|
|
|
|
infoLinkPos: 'bl',
|
|
|
|
|
printLinkPos: 'bl',
|
|
|
|
|
newWindowLinkPos: 'tr',
|
|
|
|
|
itemNumberPos: 'bl',
|
|
|
|
|
indexPos: 'br',
|
|
|
|
|
controlsPos: 'br',
|
|
|
|
|
outerClosePos: 'tr',
|
|
|
|
|
detachOuterClose: false,
|
|
|
|
|
strictCentering: true,
|
|
|
|
|
centerNav: false,
|
|
|
|
|
enableDragMove: true,
|
|
|
|
|
stickyMove: true,
|
|
|
|
|
showControlsText: '',
|
|
|
|
|
showClose: true,
|
|
|
|
|
showOuterClose: false,
|
|
|
|
|
showPrint: false,
|
|
|
|
|
printCSS: '',
|
|
|
|
|
printText: '',
|
|
|
|
|
infoOptions: '',
|
|
|
|
|
infoText: '',
|
|
|
|
|
showNewWindow: false,
|
|
|
|
|
closeOnNewWindow: false,
|
|
|
|
|
showHints: '',
|
|
|
|
|
outsideClickCloses: '',
|
|
|
|
|
contentClickCloses: false,
|
|
|
|
|
enableKeyboardNav: true,
|
|
|
|
|
navType: 'both',
|
|
|
|
|
navOverlayWidth: 30,
|
|
|
|
|
navOverlayPos: 33,
|
|
|
|
|
showNavOverlay: '',
|
|
|
|
|
enableSwipeNav: true,
|
|
|
|
|
showItemNumber: true,
|
|
|
|
|
enableWrap: true,
|
|
|
|
|
numIndexLinks: 0,
|
|
|
|
|
showIndexThumbs: true,
|
|
|
|
|
maxIndexThumbSize: 0,
|
|
|
|
|
randomOrder: false,
|
|
|
|
|
doSlideshow: false,
|
|
|
|
|
slideInterval: 4.5,
|
|
|
|
|
afterSlideshow: 'exit',
|
|
|
|
|
showPlayPause: true,
|
|
|
|
|
startPaused: false,
|
|
|
|
|
placement: 'bottom',
|
|
|
|
|
showOnce: false,
|
|
|
|
|
delay: 333,
|
|
|
|
|
arrowColor: '',
|
|
|
|
|
arrowSize: 16,
|
|
|
|
|
contextMouseButton: 'both',
|
|
|
|
|
cycleInterval: 6,
|
|
|
|
|
cycleFadeTime: 1.7,
|
|
|
|
|
cycleZoom: 0.2,
|
|
|
|
|
cycleEasing: 1.4,
|
|
|
|
|
cycleInflection: '',
|
|
|
|
|
cyclePauseOnClick: false,
|
|
|
|
|
cycleShowControls: true,
|
|
|
|
|
cycleControlsPos: 'bl',
|
|
|
|
|
cycleStartPaused: false,
|
|
|
|
|
cyclePauseOnHover: false,
|
|
|
|
|
addVideoThumb: '',
|
|
|
|
|
addPlayButton: '',
|
|
|
|
|
fetchVideoInfo: true,
|
|
|
|
|
autoPlayVideo: true,
|
|
|
|
|
autoEndVideo: true,
|
|
|
|
|
titleAsCaption: true,
|
|
|
|
|
altAsCaption: false,
|
|
|
|
|
showMagCursor: false,
|
|
|
|
|
modal: true,
|
|
|
|
|
keepCentered: '',
|
|
|
|
|
boxScroll: true,
|
|
|
|
|
pageScroll: '',
|
|
|
|
|
instanceName: '',
|
|
|
|
|
attachTo: '',
|
|
|
|
|
zIndex: 77777,
|
|
|
|
|
activateMedia: true,
|
|
|
|
|
autoGallery: false,
|
|
|
|
|
preloadLimit: 5,
|
|
|
|
|
language: '',
|
|
|
|
|
floatboxClass: 'floatbox',
|
|
|
|
|
cyclerClass: 'fbCycler',
|
|
|
|
|
tooltipClass: 'fbTooltip',
|
|
|
|
|
contextClass: 'fbContext'
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
function clicker ( what ) {
|
|
|
|
|
|
|
|
|
|
if ( what == 'reset' ) {
|
|
|
|
|
initForm();
|
|
|
|
|
fb.$( 'optionsText' ).value = '';
|
|
|
|
|
fb.$( 'message' ).innerHTML = ' ';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
else {
|
|
|
|
|
what = buildText( what == 'global' );
|
|
|
|
|
fb.$( 'message' ).innerHTML = what[0];
|
|
|
|
|
fb.$( 'message' ).style.textAlign = 'center';
|
|
|
|
|
fb.$( 'optionsText' ).value = what[1];
|
|
|
|
|
fb.$( 'optionsText' ).style.display = 'block';
|
|
|
|
|
fb.$( 'optionsText' ).select();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function initForm () {
|
|
|
|
|
var
|
|
|
|
|
field, els, el, value,
|
|
|
|
|
i, j,
|
|
|
|
|
options = settings.initialSettings,
|
|
|
|
|
labels = fb.select( 'label', 'form' );
|
|
|
|
|
|
|
|
|
|
i = labels.length;
|
|
|
|
|
while ( i-- ) {
|
|
|
|
|
field = fb.select( 'input, select', labels[i], 0 );
|
|
|
|
|
if ( field ) {
|
|
|
|
|
field.name = field.id = labels[i].innerHTML.replace( /<[\s\S]+/, '' );
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
els = fb.select( 'select' );
|
|
|
|
|
i = els.length;
|
|
|
|
|
while ( i-- ) {
|
|
|
|
|
el = els[i];
|
|
|
|
|
value = options[el.id];
|
|
|
|
|
j = el.options.length;
|
|
|
|
|
while ( j-- ) {
|
|
|
|
|
el.options[j].selected = el.options[j].value == value + '';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
els = fb.select( 'input' );
|
|
|
|
|
i = els.length;
|
|
|
|
|
while ( i-- ) {
|
|
|
|
|
el = els[i];
|
|
|
|
|
value = options[el.id];
|
|
|
|
|
if ( el.type === 'checkbox' ) {
|
|
|
|
|
el.checked = value;
|
|
|
|
|
if ( fb.hasClass( el, 'triState' ) ) {
|
|
|
|
|
el.state = null;
|
|
|
|
|
setTriState.apply( el, [ value ] );
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
el.value = value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function buildText( global ) {
|
|
|
|
|
var
|
|
|
|
|
name, val,
|
|
|
|
|
els, el, i,
|
|
|
|
|
globalIntro = 'global: {',
|
|
|
|
|
globalOutro = '\n},\n',
|
|
|
|
|
pageIntro = '<script>\nfbOptions = {\n global: {',
|
|
|
|
|
pageOutro = '\n }\n};\n<\/script>\n',
|
|
|
|
|
options = {},
|
|
|
|
|
strOptions = global ? globalIntro : pageIntro;
|
|
|
|
|
|
|
|
|
|
fb.extend( options, settings.optionsJS );
|
|
|
|
|
for ( i in options ) {
|
|
|
|
|
if ( !settings.defaults.hasOwnProperty( i ) ) {
|
|
|
|
|
delete options[i];
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
els = fb.select( 'select' );
|
|
|
|
|
i = els.length;
|
|
|
|
|
while ( i-- ) {
|
|
|
|
|
el = els[i];
|
|
|
|
|
options[el.id] = el.options[el.selectedIndex].value;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
els = fb.select( 'input' );
|
|
|
|
|
i = els.length;
|
|
|
|
|
while ( i-- ) {
|
|
|
|
|
el = els[i];
|
|
|
|
|
if ( el.type === 'checkbox' ) {
|
|
|
|
|
options[el.id] = fb.hasClass( el, 'triState' ) ? el.state : !!el.checked;
|
|
|
|
|
}
|
|
|
|
|
else {
|
|
|
|
|
options[el.id] = el.value;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
for( name in options ) {
|
|
|
|
|
val = options[ name ];
|
|
|
|
|
if ( typeof val === 'string' ) {
|
|
|
|
|
val = !isNaN( val ) && val !== '' ? +val :
|
|
|
|
|
val === 'true' || val === 'yes' ? true :
|
|
|
|
|
val === 'false' || val === 'no' ? false :
|
|
|
|
|
val === 'default' || val === 'auto' ? undefined :
|
|
|
|
|
val === 'null' ? null :
|
|
|
|
|
/^\d+px$/.test( val ) ? parseFloat( val ) || val : // strip 'px' and convert to a number
|
|
|
|
|
val;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if ( val !== settings.defaults[name] ) {
|
|
|
|
|
|
|
|
|
|
if ( typeof val === 'string' ) {
|
|
|
|
|
val = '"' + val + '"';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if ( typeof val === 'function' ) {
|
|
|
|
|
val = (val + '').
|
|
|
|
|
replace( /\r\n/g, '\n' ).
|
|
|
|
|
replace( /\r/g, '\n' ).
|
|
|
|
|
replace( /\n/g, ' ' ).
|
|
|
|
|
replace( /\s+/g, ' ' );
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if ( val !== '' ) {
|
|
|
|
|
strOptions += '\n' + (global ? ' ' : ' ') + name + ': ' + val + ',';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
if ( strOptions.charAt( strOptions.length - 1 ) === ',' ) {
|
|
|
|
|
strOptions = strOptions.substring( 0, strOptions.length - 1 );
|
|
|
|
|
}
|
|
|
|
|
strOptions += global ? globalOutro : pageOutro;
|
|
|
|
|
|
|
|
|
|
return [ global ?
|
|
|
|
|
' Replace the "global" section in floatbox/fbOptions.js with the following code.' :
|
|
|
|
|
' Copy and paste the following script element into the <head> section of your page(s).',
|
|
|
|
|
strOptions
|
|
|
|
|
];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function setTriState ( init ) {
|
|
|
|
|
|
|
|
|
|
if ( this.state === true || init === false ) { // true goes to false
|
|
|
|
|
this.state = false;
|
|
|
|
|
this.indeterminate = false;
|
|
|
|
|
this.checked = false;
|
|
|
|
|
this.style.opacity = 1;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
else if ( this.state === false || init === '' ) { // false goes to ''
|
|
|
|
|
this.state = '';
|
|
|
|
|
this.indeterminate = true;
|
|
|
|
|
this.checked = false;
|
|
|
|
|
this.style.opacity = 0.4;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
else if ( this.state === '' || init === true ) { // '' goes to true
|
|
|
|
|
this.state = true;
|
|
|
|
|
this.indeterminate = false;
|
|
|
|
|
this.checked = true;
|
|
|
|
|
this.style.opacity = 1;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
fbOptions = {
|
|
|
|
|
global: {
|
|
|
|
|
framed: true
|
|
|
|
|
},
|
|
|
|
|
className: {
|
|
|
|
|
fbTooltip: {
|
|
|
|
|
width: 350,
|
|
|
|
|
contentBackgroundColor: '#ecf4ff',
|
|
|
|
|
arrowColor: 'transparent'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// setup tab actions and the initial option settings
|
|
|
|
|
fb.ready( function () {
|
|
|
|
|
var
|
|
|
|
|
div, i,
|
|
|
|
|
tabLinks = fb.select( '.tabs a' );
|
|
|
|
|
|
|
|
|
|
settings.optionsJS = fb.fbOptions.global;
|
|
|
|
|
settings.initialSettings = fb.extend( {}, settings.defaults, settings.optionsJS );
|
|
|
|
|
initForm();
|
|
|
|
|
|
|
|
|
|
fb.addEvent( fb.select( '.triState' ), 'click', setTriState );
|
|
|
|
|
|
|
|
|
|
fb.addEvent( tabLinks, 'onclick', function ( e ) {
|
|
|
|
|
fb.removeClass( tabLinks, 'active' );
|
|
|
|
|
fb.addClass( this, 'active' );
|
|
|
|
|
for ( i = 0; i < tabLinks.length; i++ ) {
|
|
|
|
|
div = fb.$( tabLinks[i].href.split( '#' )[1] );
|
|
|
|
|
if ( div ) {
|
|
|
|
|
div.style.display = tabLinks[i] === this ? 'block' : 'none';
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return fb.stopEvent( e );
|
|
|
|
|
} );
|
2023-04-02 12:15:58 +00:00
|
|
|
} );</script></body></html>
|
