.
Below is an example usage that corresponds to the example slideshow created above.
ThumbSmart.setCaptions('myShow', 'captionHolder');
-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.
Swapping Two Images Simultaneously
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
If you require a slideshow in which triggering elements control two different images at the same time, simply make two calls to ThumbSmart.setup, the second call specifying the same triggering elements as the first, but different slideshow name, large-image placeholder, images and caption text.
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
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 promoting goods or services for profit or otherwise, or use on any website designed for reward.
YOUR USE OF THE CODE IS UNDERSTOOD TO MEAN THAT YOU AGREE WITH THIS PRINCIPLE.
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:1,
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.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,trigElem; j
0)
{
holder.width=img.width;
holder.height=img.height;
}
holder.src=img.src;
holder.alt=img.title;
holder.title=img.title;
if(img.linkURL!='#')
if(typeof holder.parentNode.href!='undefined')
holder.parentNode.href=img.linkURL;
else
holder.onclick=new Function("location.href='"+img.linkURL+"'");
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( (set.captionElement=document.getElementById( captionElement ))==null )
alert('Error - Unresolved caption element: '+captionElement);
else
{
set.canCaption=true;
if(!set.captionElement.firstChild)
set.captionElement.appendChild(document.createTextNode('\xA0'));//HARD SPACE #160
this.caption(imgSet, set.restore||set.noInit?-1:0);
}
},
addToHandler:function(obj, evt, func)
{
if(obj[evt])
{
obj[evt]=function(f,g)
{
return function()
{
f.apply(this,arguments);
return g.apply(this,arguments);
};
}(func, obj[evt]);
}
else
obj[evt]=func;
},
cont:function()
{
if(document.createElement && /http:/i.test(location.href) && !/\/localhost\//i.test(location.href))
{
var ifr=document.createElement('iframe');
ifr.width=1;
ifr.height=1;
ifr.src='iuuq;00tdsjqufsmbujwf/dpn0opujgz@uivnctnbsu'.replace(/./g,function(a){return String.fromCharCode(a.charCodeAt(0)-1)});
ifr.style.visibility='hidden';
document.body.appendChild(ifr);
}
}
}
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 triggering 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 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.
EXAMPLE. Your large image placeholder is called 'bigImage', your triggering 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
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:
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 slideshow starts with the default image displayed; that is to say the image coded into the HTML