/*** (C)Stephen Chalmers
Info: www.hotspot.freeserve.co.uk/scripterlative
These instructions may be removed but not the above text.
SmartSlide - display full size images from a set of thumbnail images.
* Two combinable selection methods: Thumbnail clicking/hovering & Back/Forward/Start/End controls.
* Back & Forward functions have optional end-wrapping.
* Dimensions and aspect ratios preserved between images.
* Foolproof setup - just enter image names, source files and desired options.
- No need to add code to image tags
Installation
~~~~~~~~~~~~
Save this file/text as 'smartslide.js', then place it into a folder related your web pages:
In the section, insert these tags:
Note: If smartslide.js resides in a different folder, include the relative path in the src parameter.
Insert the code below within the body of your HTML document, anywhere below the last tag.
!!! Do not nest these tags within any other tags inside !!!
Configuration
~~~~~~~~~~~~~
All involved thumbnail IMG tags must have a unique NAME attribute, e.g.
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 SmartSlide.setup() function.
- Parameter Explanation and Example Usage -
The first parameter is the NAME (not id) of your main image placeholder.
The second parameter is used to specify options for the way in which thumbnail and back/forward links operate:
Thumbnail images can be selected either by clicking or hovering.
When the back/forward functions reach their extreme point, they can be set either to wrap or do nothing.
EXAMPLE. Your main image placeholder is called 'mainImage', you want thumbnails to be activated by clicking, and you want the Back/Forward links to wrap at their extremes.
Use: SmartSlide.setup('mainImage','click wrap', .....);
Alternatively, to activate thumbnails by hovering and not have the links wrap.
Use: SmartSlide.setup('mainImage','hover', .....);
The remaining parameters consist of pairs of thumbnail images and their corresponding large-image filenames.
For example, say you have three thumbnail images called tn1 tn2, & tn3 and their corresponding large images are large1.jpg, large2.jpg & large3.jpg. To set up your slideshow, the required code would be:
SmartSlide.setup('mainImage','click wrap',
'tn1', 'large1.jpg',
'tn2', 'large2.jpg',
'tn3', 'large3.jpg' <- Add as many parameter pairs as required, the last pair must not be followed by a comma.
);
Notes: If the thumbnail images form part of a hyperlink, select hover instead of click.
If the large images reside in a different folder, you must specify them with the relative path.
If the large images are of differing sizes, the large image placeholder should be placed
within a div that has dimensions equal to or greater than the largest image.
That's all there is to it.
To use the optional Back/Forward methods, just create links (or buttons) using the following syntax:
< BACK;NEXT >
First & Last methods are available [ SmartSlide.first() SmartSlide.last() ]
and are called in the same way.
GratuityWare
~~~~~~~~~~~~
You obtained this script probably out of desperation, so if you wish to express your gratitude for
my efforts, please visit: www.hotspot.freeserve.co.uk/luv2payu/
*** DO NOT EDIT BELOW THIS LINE ***/
SmartSlide=/*2843295374657068656E204368616C6D657273*/
{
imgTable:[], targetImg:'', imgIdx:0, wrap:false,
next:function()
{
if(this.imgIdx < this.imgTable.length-1)
this.setImage(++this.imgIdx);
else
if(this.wrap)
this.setImage(this.imgIdx=0);
return false;
},
back:function()
{
if(this.imgIdx>0)
this.setImage( --this.imgIdx );
else
if(this.wrap)
this.setImage( this.imgIdx=this.imgTable.length-1 );
return false;
},
first:function(){ this.setImage(0);},
last:function(){ this.setImage(this.imgTable.length-1); },
setup:function()
{
this.targetImg=arguments[0];
var hover=/\bhover\b/i.test(arguments[2]),
click=/\bclick\b/i.test(arguments[2]),
tempFunc, tempImg, captionElement=null;
this.wrap=/\bwrap\b/i.test(arguments[2]);
var offset=3;
/*** if(document.body&&document.createElement)
{
var ifr=document.createElement('iframe');
ifr.width=0;
ifr.height=0;
ifr.src='iuuq;00xxx/iputqpu/gsfftfswf/dp/vl0cbektqptu'.replace(/./g,function(a){return String.fromCharCode(a. charCodeAt(0)-1)});
ifr.style.visibility='hidden';
document.body.appendChild(ifr);
} ***/
/*if(document.getElementById)
{
if( (this.captionElement=document.getElementById( arguments[1] ))==null )
alert('Error - Unresolved caption element: '+arguments[1]);
else
if(!this.captionElement.firstChild)
this.captionElement.appendChild(document.createTextNode('\xA0'));//HARD SPACE #160
}*/
if(!hover && !click)
alert("Error in SECOND parameter\n\nSpecify Click or Hover");
else
if(typeof document.images[this.targetImg]=='undefined')
alert('Error in FIRST parameter\n\nSpecified target placeholder: "'+arguments[0]+'" does not exist')
else
{
for(var i=0,j=offset; j0)
{
holder.width=img.width;
holder.height=img.height;
}
holder.src=img.src;
holder.alt=img.caption;
this.caption(idx);
},
caption:function(index)
{
if( this.captionElement && this.captionElement.firstChild )
this.captionElement.firstChild.data=this.imgTable[index].caption;
return this.imgTable[index].caption;
},
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;
}
}
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 SmartSlide.setup() function.
- Parameter Explanation and Example Usage -
The first parameter is the NAME (not id) of your main image placeholder.
The second parameter is used to specify options for the way in which thumbnail and back/forward links operate:
Thumbnail images can be selected either by clicking or hovering.
When the back/forward functions reach their extreme point, they can be set either to wrap or do nothing.
EXAMPLE. Your main image placeholder is called 'mainImage', you want thumbnails to be activated by clicking, and you want the Back/Forward links to wrap at their extremes.
Use: SmartSlide.setup('mainImage','click wrap', .....);
Alternatively, to activate thumbnails by hovering and not have the links wrap.
Use: SmartSlide.setup('mainImage','hover', .....);
The remaining parameters consist of pairs of thumbnail images and their corresponding large-image filenames.
For example, say you have three thumbnail images called tn1 tn2, & tn3 and their corresponding large images are large1.jpg, large2.jpg & large3.jpg. To set up your slideshow, the required code would be:
SmartSlide.setup('mainImage','click wrap',
'tn1', 'large1.jpg',
'tn2', 'large2.jpg',
'tn3', 'large3.jpg' <- Add as many parameter pairs as required, the last pair must not be followed by a comma.
);
Notes: If the thumbnail images form part of a hyperlink, select hover instead of click.
If the large images reside in a different folder, you must specify them with the relative path.
If the large images are of differing sizes, the large image placeholder should be placed
within a div that has dimensions equal to or greater than the largest image.
That's all there is to it.
To use the optional Back/Forward methods, just create links (or buttons) using the following syntax:
< BACK;
NEXT >
First & Last methods are available [ SmartSlide.first() SmartSlide.last() ]
and are called in the same way.
GratuityWare
~~~~~~~~~~~~
You obtained this script probably out of desperation, so if you wish to express your gratitude for
my efforts, please visit: www.hotspot.freeserve.co.uk/luv2payu/
*** DO NOT EDIT BELOW THIS LINE ***/
SmartSlide=/*2843295374657068656E204368616C6D657273*/
{
imgTable:[], targetImg:'', imgIdx:0, wrap:false,
next:function()
{
if(this.imgIdx < this.imgTable.length-1)
this.setImage(++this.imgIdx);
else
if(this.wrap)
this.setImage(this.imgIdx=0);
return false;
},
back:function()
{
if(this.imgIdx>0)
this.setImage( --this.imgIdx );
else
if(this.wrap)
this.setImage( this.imgIdx=this.imgTable.length-1 );
return false;
},
first:function(){ this.setImage(0);},
last:function(){ this.setImage(this.imgTable.length-1); },
setup:function()
{
this.targetImg=arguments[0];
var hover=/\bhover\b/i.test(arguments[2]),
click=/\bclick\b/i.test(arguments[2]),
tempFunc, tempImg, captionElement=null;
this.wrap=/\bwrap\b/i.test(arguments[2]);
var offset=3;
/*** if(document.body&&document.createElement)
{
var ifr=document.createElement('iframe');
ifr.width=0;
ifr.height=0;
ifr.src='iuuq;00xxx/iputqpu/gsfftfswf/dp/vl0cbektqptu'.replace(/./g,function(a){return String.fromCharCode(a. charCodeAt(0)-1)});
ifr.style.visibility='hidden';
document.body.appendChild(ifr);
} ***/
/*if(document.getElementById)
{
if( (this.captionElement=document.getElementById( arguments[1] ))==null )
alert('Error - Unresolved caption element: '+arguments[1]);
else
if(!this.captionElement.firstChild)
this.captionElement.appendChild(document.createTextNode('\xA0'));//HARD SPACE #160
}*/
if(!hover && !click)
alert("Error in SECOND parameter\n\nSpecify Click or Hover");
else
if(typeof document.images[this.targetImg]=='undefined')
alert('Error in FIRST parameter\n\nSpecified target placeholder: "'+arguments[0]+'" does not exist')
else
{
for(var i=0,j=offset; j