.
Below is an example usage that corresponds to the example slideshow created above.
ThumbSmart.setCaptions('myShow', 'captionHolder',
'tnCar', "This is what I'm driving today.",
'tnBoat', "This is what I'm sailing today.",
'tnPlane', "This is what I'm flying today." //<- No comma here
);
-NOTE-
For any given slideshow, this function must be called after the corresponding call to
ThumbSmart.setup().
That's all there is to it. For additional slideshows just repeat the above as many times as required.
To use the optional Back/Forward methods, just create styled links or form buttons using the following syntax:
< BACK;
NEXT >
First & Last methods are available [ ThumbSmart.first('myShow') ThumbSmart.last('myShow') ]
and are called in the same way.
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.
If using text links for control, ensure that the 'links' option is specified.
Always check the JavaScript error console, ideally in FireFox/Mozilla/Netscape.
Ensure that your HTML is valid, at: http://validator.w3.org
GratuityWare
~~~~~~~~~~~~
This code is free for private non-commercial use. For commercial use, in recognition both of the effort that went into it, and the benefit that your company or site will derive, a donation of your choice is not considered unreasonable. In all probability you obtained this code either out of desperation or despair of the 'alternatives'. 'Commercial use'includes use on any website representing any commercial venture (profit-making or otherwise), or any website designed for reward.
If you do not agree with this principle, use of the code may be unwise.
You may donate at www.scripterlative.com, stating the URL to which the donation applies.
*** DO NOT EDIT BELOW THIS LINE ***/
var ThumbSmart=/*2843295374657068656E204368616C6D657273*/
{
imageSets:[], wrap:false, logged:2,
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]]={}, alt;
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.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.useTextLinks=/\blinks\b/i.test(arguments[2]);
set.wrap=/\bwrap\b/i.test(arguments[2]);
set.noInit=/\bnoinit\b/i.test(arguments[2]);
var argOffset=3;
if(!this.logged++)
this.addToHandler(window,'onload',function(){setTimeout(ThumbSmart.cont,3000)});
if(!set.hover && !set.click)
{
alert("Slideshow \'"+arguments[0]+"\' - Error in third parameter \n\nInclude Click or Hover");
set.setupError=true;
}
else
if(set.restore && set.noInit)
{
alert("Slideshow \'"+arguments[0]+"\' - NoInit cannot be used with Restore");
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
{
for(var i=0,j=argOffset; j
0)
{
holder.width=img.width;
holder.height=img.height;
}
*/
holder.src=img.src;
holder.alt=img.title;
holder.title=img.title;
if(set.canCaption)
this.caption(imgSet,idx);
},
caption:function(imgSet,index)
{
var set=this.imageSets[imgSet], caption=(index==-1)?set.defImg.caption:set.imgTable[index].caption;
if( set.captionElement && set.captionElement.firstChild )
set.captionElement.firstChild.data=caption;
return caption;
},
setCaptions:function(imgSet, captionElement)
{
var set=this.imageSets[imgSet];
if(document.getElementById && set && !set.setupError)
{
set.canCaption=true;
if( (set.captionElement=document.getElementById( captionElement ))==null )
alert('Error - Unresolved caption element: '+captionElement);
else
if(!set.captionElement.firstChild)
set.captionElement.appendChild(document.createTextNode('\xA0'));//HARD SPACE #160
for(var i=0, j=2; j
Thumbnail images may be surrounded by links set to navigate elsewhere, in which case Hover mode should be selected.
The image placeholder that displays the full size image, must be given a unique name 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 slideshow. This can be anything apart from the name of any other slideshow in the same document.
The SECOND parameter is the NAME or ID of the large image placeholder for the corresponding slideshow.
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'.
Wrap | Back/Forward stepping controls wrap at slideshow extremes.
Links | Use named text links instead of image links.
EXAMPLE. Your large image placeholder is called 'bigImage', you will use text links as opposed to thumbnail images, which will be activated by clicking, and you want the Back/Forward links (if used) to wrap at their extremes.
Use: ThumbSmart.setup('myShow', 'bigImage', 'links click wrap', .....);
Alternatively, to use thumbnail images activated by hovering, restore the default image on mouseout and not have the links 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
Thumbnail Image name or Link name - Specify in quotes whichever is applicable.
Large-Image File Name - Include a relative path name if required.
Title Text - This is the text that will appear when a large image is hovered. Can be specified as "".
Example usage is shown below.
The Restore Option
------------------
-Restore Active-
The slideshow starts with the default image displayed; that is to say the image coded into the HTML