• 0

Need help editing this JavaScript please!

Asked by rageagainstmachine,

 Share

Question

Grand Master

rageagainstmachine

Posted
Posted

The script is for a scrolling dhtml scrolling image viewer and the code is below.

Ok, two things I would like to change in this script:

1. have no border/padding surrounding each image thumbnail so that each thumbnail come immediately after the other seamlessly.

2. when you click a thumbnail, I would like a webpage to be loaded in a separate tab or window, instead of an enlarged version of the thumbnail pic. Can this be done.

Thanks. 

//---------------------------------------------------------------------------------------------------

// |||||||||||||||||||||||||||||||||||||||||||
// | Set Position, Dimensions And Color HERE  |
// |||||||||||||||||||||||||||||||||||||||||||

// Image Viewer Dimensions settings (pixels):
	var PagePositionLEFT		= 300; 			// Set position of Image viewer from LEFT of page
	var PagePositionTOP			= 300; 			// Set position of Image viewer from TOP of page

	var InterFaceWidth 			= 700; 			// Set [Overall] WIDTH |||| minimum length=300
	var ViewingAreaHeight		= 275; 			// Set [Viewing area] HEIGHT |||| minimum length=10

	var OverALLBorder			= ''; 			// Set [Over All] Border 'on' or '' (blank) for off

// Image Viewer Colors [example: 'red' or '#FF0000']
	var OverALLBorderColor		= 'white'; 		// Set color of [Over All] Border

	var ControlsBGColor			= 'white'; 		// Set color of [Control Area] Background |||| use '' = no color
	var ControlsFontColor		= 'white'; 		// Set color of [Control Area] Font

	var ViewAreaBGColor		= '';		// Set color of [Viewing Area] Background |||| use '' = no color

	var ImageBorderColor		= 'black'; 		// Set color of [Image] Border

	var ButtonBGColor			= '#70838e'; 		// Set color of [Button] Background
	var ButtonFontColor			= 'white'; 		// Set color of [Button] Font
	var ButtonBorderColor		= 'white'; 		// Set color of [Button] border

// Image Alignment
	var ImageValignment		= 'middle'; 		// Set verticle alignment within viewer (options: top, bottom. middle)

var ImageArray = new Array
(

// |||||||||||||||||||||||
// | Define Images Here  |
// |||||||||||||||||||||||

// Thumbnail image filenames MUST be the SAME as the full sized image (to be popped)
// Therefore, here you are ONLY providing that ONE filename.
// All the thumbnail images are to be placed in the folder "Thumbnails"
// All full sized images are to be placed in the folder "Images"

// 1) Place single quotes around each filename
// 2) Place a comma after each filename EXCEPT for the LAST filename

'MichaelFalatineBlueMetalHorse.jpg', 
'MichaelFalatineColdCalmPeace.jpg',
'MichaelFalatineDecision.jpg', 
'MichaelFalatineHyroEye.jpg', 
'MichaelFalatineRealizingTheConnection.jpg',
'ToysrUS.jpg',
'game.jpg',
'vodafone.jpg',
'MikeFalatineNest.jpg'

// Do not edit below this line
)

//--------------------------------------------------------------------------------------------------
// All material contained within this and associated downloaded pages is the property of 4thorder(TM) 
// Copyright ? 2005.  All rights reserved.
//
// Author: Michael Falatine || Authors email: [email protected]
//
// USAGE: You may use this script for commercial or personal use, however, the copyright is retained-
// by 4thorder (TM).
//
// For other free Scripts visit: http://www.4thorder.us/Scripts/
//---------------------------------------------------------------------------------------------------
// :::::::::::::::::::::::::
// ::: Initialize Page ::::
// :::::::::::::::::::::::::

window.onload=InitializePage;

function InitializePage()
{
// Install Image Viewer HTML file name holderInput element
FirstDIV=document.createElement('DIV')
document.body.appendChild(FirstDIV)
FirstDIV.innerHTML="<INPUT type=hidden id=fileNameHolder>"+
"<DIV id='interface'>" + 
"	<DIV id='ViewingArea'>" + 
"	<TABLE border='0' cellpadding='0'>" + 
"		<TR  id='ImageContainer'>" + 
"		</TR>" + 
"	</TABLE>" + 
"	</DIV>" + 
"	<DIV id='controls'>" + 
"		<DIV id='Verbiage'>" + 
"		</DIV>" + 
"		<DIV id='ScrollLeft'>" + 
"			<INPUT onclick='moveLeft()' type='button' value='<--'>" + 
"		</DIV>" + 
"		<DIV id='ScrollRight'>" + 
"			<INPUT onclick='moveRight()' type='button' value='-->'>" + 
"		</DIV>" + 
"	</DIV>" + 
"</DIV>"


if (ImageArray!=null)
	{for (l=0; l<ImageArray.length; l++)
		{
		TDElement=document.createElement("TD");
		TDElement.innerHTML="<IMG border='0' src='Thumbnails/"+ImageArray[l]+"'>"
		document.getElementById('ImageContainer').appendChild(TDElement)		
		}
	}

SElement=document.getElementById('Verbiage')
SElement.innerHTML='<A href=http://www.4thorder.us/Scripts/ target=_blank><font color='+ControlsFontColor+'>[DHTML Image Viewer]</font></A><br><font size=2>Use arrows to scroll images | Click image to view</font>'

setStyles();
setIDs();
attachEventhandlers();
}

function setStyles()
{
// set Image Scroller DIVs width Dimensions and position type
document.getElementById('interface').style.position="absolute";
document.getElementById('interface').style.width=InterFaceWidth+"px";
document.getElementById('interface').style.overflow="hidden";

DIVCol=document.getElementById('interface').getElementsByTagName('DIV');
if (DIVCol!=null)
	{for (p=0; p<DIVCol.length; p++)
		{
		DIVCol.item(p).style.position="absolute";
		DIVCol.item(p).style.width=InterFaceWidth+"px";
		if(DIVCol.item(p).id=="ScrollRight")
			{
			DIVCol.item(p).style.width=InterFaceWidth-40+"px";
			DIVCol.item(p).style.textAlign="right";
			}
		}
	}

document.getElementById('ScrollLeft').style.width=40+"px";
document.getElementById('Verbiage').style.width=InterFaceWidth-80+"px";

// set z-index
document.getElementById('interface').style.zIndex=1;
document.getElementById('ViewingArea').style.zIndex=2;
document.getElementById('controls').style.zIndex=2;
document.getElementById('Verbiage').style.zIndex=5;
document.getElementById('ScrollLeft').style.zIndex=4;
document.getElementById('ScrollRight').style.zIndex=4;


// set positions (left)
document.getElementById('ViewingArea').style.left=0+"px";
document.getElementById('controls').style.left=0+"px";
document.getElementById('ScrollLeft').style.left=2+"px";
document.getElementById('ScrollRight').style.left=38+"px";
document.getElementById('Verbiage').style.left=40+"px";

// set positions (top)
document.getElementById('ViewingArea').style.top=0+"px";
document.getElementById('ScrollLeft').style.top=5+"px";
document.getElementById('ScrollRight').style.top=5+"px";
document.getElementById('controls').style.top=ViewingAreaHeight+2+"px";

// set Image Scroller DIVs height Dimensions
document.getElementById('controls').style.height=35+"px";
document.getElementById('Verbiage').style.height=35+"px";
document.getElementById('ViewingArea').style.height=ViewingAreaHeight+"px";
document.getElementById('interface').style.height=ViewingAreaHeight+35+"px";

// Set Viewer Page position
document.getElementById('interface').style.left= PagePositionLEFT+"px";
document.getElementById('interface').style.top= PagePositionTOP+"px";

// text alignment for controller text
document.getElementById('Verbiage').style.textAlign='center';

// image Viewer Color Scheme
document.getElementById('controls').style.backgroundColor=ControlsBGColor;
document.getElementById('Verbiage').style.color=ControlsFontColor;
document.getElementById('ViewingArea').style.backgroundColor=ViewAreaBGColor;

if(OverALLBorder=='on'){
document.getElementById('interface').style.borderStyle='solid';
document.getElementById('interface').style.borderWidth="1px";
document.getElementById('interface').style.borderColor=OverALLBorderColor;}

// Image Styles
IMGCol=document.getElementById('interface').getElementsByTagName('IMG');
if (IMGCol!=null)
	{for (im=0; im<IMGCol.length; im++)
		{
		IMGCol.item(im).style.borderStyle='solid';
		IMGCol.item(im).style.borderWidth="0px";
		IMGCol.item(im).style.borderColor=ImageBorderColor;
		}
	}

// Button Styles
BTNCol=document.getElementById('interface').getElementsByTagName('INPUT');
if (BTNCol!=null)
	{for (p=0; p<BTNCol.length; p++)
		{
		BTNCol.item(p).style.borderStyle='solid';
		BTNCol.item(p).style.borderWidth="1px";
		BTNCol.item(p).style.backgroundColor=ButtonBGColor;
		BTNCol.item(p).style.color=ButtonFontColor;
		BTNCol.item(p).style.borderColor=ButtonBorderColor;
		}
	}

// Table Cell Styles
TDCol=document.getElementById('interface').getElementsByTagName('TD');
if (TDCol!=null)
	{for (td=0; td<TDCol.length; td++)
		{TDCol.item(td).style.verticalAlign=ImageValignment;}}
}


// ::::::::::::::::::::::::
// ::: Event Handlers ::
// ::::::::::::::::::::::::

function onclickHandler(e)
{
// Browser compatibility code
	var targ;
	if (!e){var e = window.event;}

	if (e.target)
		{	targ = e.target;
			var xpos=(e.pageX); var ypos=(e.pageY);}

	else if (e.srcElement)
		{	var xpos=(event.x);	var ypos=(event.y);
			targ = e.srcElement;}

// Strip file name from image src
	var spath=targ.getAttribute('src');
	wholePathLength=spath.length;
	strippedPathLength=spath.substring(0,spath.lastIndexOf("/")).length;
	ifm= spath.substring(strippedPathLength+1,wholePathLength);
// Store file name in holder for use by popup windoow
	document.getElementById('fileNameHolder').value=ifm;
// Open the window at location of thumbnail image
	var pos = "left="+xpos+",top="+ypos;
	window.open("imageViewerPopup.htm","imageWindow","width=18,height=18,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,"+pos);
}

// Attach event handlers to all images within container
function attachEventhandlers()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');

if (TDCol!=null)
	{for (l=0; l<TDCol.length; l++)
		{
		IMGCol=TDCol.item(l).getElementsByTagName("IMG");
		IMGCol.item(0).style.cursor="pointer"
		IMGCol.item(0).setAttribute('id',"Image"+l)
		IMGCol.item(0).onclick=onclickHandler;
		}
	}
}

// Set ID's for all table cells
function setIDs()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');
if (TDCol!=null)
	{	for (i=0; i<TDCol.length; i++)
			{TDCol.item(i).setAttribute('id',i)}
	}
}

// :::::::::::::::::::::::::
// ::: Scroll Functions ::
// :::::::::::::::::::::::::

function moveLeft()
{
ContainerElement=document.getElementById("ImageContainer");
firstTD=document.getElementById("0");
dupfirstTD=firstTD.cloneNode(false)
dupfirstTD.innerHTML=firstTD.innerHTML
ContainerElement.removeChild(firstTD);
ContainerElement.appendChild(dupfirstTD);
setStyles; setIDs();attachEventhandlers();
}

function moveRight()
{
lastTD=document.getElementById(TDCol.length-1);
duplastTD=lastTD.cloneNode(false)
duplastTD.innerHTML=lastTD.innerHTML
firstTD=document.getElementById("0");
ContainerElement=document.getElementById("ImageContainer");
ContainerElement.insertBefore(duplastTD,firstTD);
ContainerElement.removeChild(lastTD);
setStyles; setIDs();attachEventhandlers();
}

4 answers to this question

Recommended Posts

  • 0
Enthusiast

smiddy

Posted
Posted

I'm pretty sure this does what you're asking.

//--------------------------------------------------------------------------------------------------
// All material contained within this and associated downloaded pages is the property of 4thorder(TM)
// Copyright ? 2005.  All rights reserved.
//
// Author: Michael Falatine || Authors email: [email protected]
// Modified by Jonathan Packer || Email: [email protected] || Website: www.relasz.com
//

// USAGE: You may use this script for commercial or personal use, however, the copyright is retained-
// by 4thorder (TM).
//
// For other free Scripts visit: http://www.4thorder.us/Scripts/
//---------------------------------------------------------------------------------------------------
// :::::::::::::::::::::::::
// ::: Initialize Page ::::
// :::::::::::::::::::::::::

window.onload=InitializePage;

function InitializePage()
{
// Install Image Viewer HTML file name holderInput element
FirstDIV=document.createElement('DIV')
document.body.appendChild(FirstDIV)
FirstDIV.innerHTML="<INPUT type=hidden id=fileNameHolder>"+
"<DIV id='interface'>" +
"	<DIV id='ViewingArea'>" +
"	<TABLE border='0' cellpadding='0'>" +
"		<TR  id='ImageContainer'>" +
"		</TR>" +
"	</TABLE>" +
"	</DIV>" +
"	<DIV id='controls'>" +
"		<DIV id='Verbiage'>" +
"		</DIV>" +
"		<DIV id='ScrollLeft'>" +
"			<INPUT onclick='moveLeft()' type='button' value='<--'>" +
"		</DIV>" +
"		<DIV id='ScrollRight'>" +
"			<INPUT onclick='moveRight()' type='button' value='-->'>" +
"		</DIV>" +
"	</DIV>" +
"</DIV>"


if (ImageArray!=null)
	{for (l=0; l<ImageArray.length; l++)
		{
		TDElement=document.createElement("TD");
		TDElement.innerHTML="<IMG border='0' src='Thumbnails/"+ImageArray[l]+"'>"
		document.getElementById('ImageContainer').appendChild(TDElement)		
		}
	}

SElement=document.getElementById('Verbiage')
SElement.innerHTML='<A href=http://www.4thorder.us/Scripts/ target=_blank><font color='+ControlsFontColor+'>[DHTML Image Viewer]</font></A><br><font size=2>Use arrows to scroll images | Click image to view</font>'

setStyles();
setIDs();
attachEventhandlers();
}

function setStyles()
{
// set Image Scroller DIVs width Dimensions and position type
document.getElementById('interface').style.position="absolute";
document.getElementById('interface').style.width=InterFaceWidth+"px";
document.getElementById('interface').style.overflow="hidden";

DIVCol=document.getElementById('interface').getElementsByTagName('DIV');
if (DIVCol!=null)
	{for (p=0; p<DIVCol.length; p++)
		{
		DIVCol.item(p).style.position="absolute";
		DIVCol.item(p).style.width=InterFaceWidth+"px";
		if(DIVCol.item(p).id=="ScrollRight")
			{
			DIVCol.item(p).style.width=InterFaceWidth-40+"px";
			DIVCol.item(p).style.textAlign="right";
			}
		}
	}

document.getElementById('ScrollLeft').style.width=40+"px";
document.getElementById('Verbiage').style.width=InterFaceWidth-80+"px";

// set z-index
document.getElementById('interface').style.zIndex=1;
document.getElementById('ViewingArea').style.zIndex=2;
document.getElementById('controls').style.zIndex=2;
document.getElementById('Verbiage').style.zIndex=5;
document.getElementById('ScrollLeft').style.zIndex=4;
document.getElementById('ScrollRight').style.zIndex=4;


// set positions (left)
document.getElementById('ViewingArea').style.left=0+"px";
document.getElementById('controls').style.left=0+"px";
document.getElementById('ScrollLeft').style.left=2+"px";
document.getElementById('ScrollRight').style.left=38+"px";
document.getElementById('Verbiage').style.left=40+"px";

// set positions (top)
document.getElementById('ViewingArea').style.top=0+"px";
document.getElementById('ScrollLeft').style.top=5+"px";
document.getElementById('ScrollRight').style.top=5+"px";
document.getElementById('controls').style.top=ViewingAreaHeight+2+"px";

// set Image Scroller DIVs height Dimensions
document.getElementById('controls').style.height=35+"px";
document.getElementById('Verbiage').style.height=35+"px";
document.getElementById('ViewingArea').style.height=ViewingAreaHeight+"px";
document.getElementById('interface').style.height=ViewingAreaHeight+35+"px";

// Set Viewer Page position
document.getElementById('interface').style.left= PagePositionLEFT+"px";
document.getElementById('interface').style.top= PagePositionTOP+"px";

// text alignment for controller text
document.getElementById('Verbiage').style.textAlign='center';

// image Viewer Color Scheme
document.getElementById('controls').style.backgroundColor=ControlsBGColor;
document.getElementById('Verbiage').style.color=ControlsFontColor;
document.getElementById('ViewingArea').style.backgroundColor=ViewAreaBGColor;

if(OverALLBorder=='on'){
document.getElementById('interface').style.borderStyle='none';}

// Image Styles
IMGCol=document.getElementById('interface').getElementsByTagName('IMG');
if (IMGCol!=null)
	{for (im=0; im<IMGCol.length; im++)
		{
		IMGCol.item(im).style.borderStyle='none';
		}
	}

// Button Styles
BTNCol=document.getElementById('interface').getElementsByTagName('INPUT');
if (BTNCol!=null)
	{for (p=0; p<BTNCol.length; p++)
		{
		BTNCol.item(p).style.borderStyle='none';
		BTNCol.item(p).style.backgroundColor=ButtonBGColor;
		BTNCol.item(p).style.color=ButtonFontColor;
		}
	}

// Table Cell Styles
TDCol=document.getElementById('interface').getElementsByTagName('TD');
if (TDCol!=null)
	{for (td=0; td<TDCol.length; td++)
		{TDCol.item(td).style.verticalAlign=ImageValignment;}}
}


// ::::::::::::::::::::::::
// ::: Event Handlers ::
// ::::::::::::::::::::::::

function onclickHandler(e)
{
// Browser compatibility code
	var targ;
	if (!e){var e = window.event;}

	if (e.target)
		{	targ = e.target;
			var xpos=(e.pageX); var ypos=(e.pageY);}

	else if (e.srcElement)
		{	var xpos=(event.x);	var ypos=(event.y);
			targ = e.srcElement;}

// Strip file name from image src
	var spath=targ.getAttribute('src');
	wholePathLength=spath.length;
	strippedPathLength=spath.substring(0,spath.lastIndexOf("/")).length;
	ifm= spath.substring(strippedPathLength+1,wholePathLength);
// Store file name in holder for use by popup windoow
	document.getElementById('fileNameHolder').value=ifm;
// Open the window at location of thumbnail image
	window.open("imageViewerPopup.htm", '_blank' ,"toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no", true);
}

// Attach event handlers to all images within container
function attachEventhandlers()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');

if (TDCol!=null)
	{for (l=0; l<TDCol.length; l++)
		{
		IMGCol=TDCol.item(l).getElementsByTagName("IMG");
		IMGCol.item(0).style.cursor="pointer"
		IMGCol.item(0).setAttribute('id',"Image"+l)
		IMGCol.item(0).onclick=onclickHandler;
		}
	}
}

// Set ID's for all table cells
function setIDs()
{
ContainerElement=document.getElementById('ImageContainer')
TDCol=ContainerElement.getElementsByTagName('TD');
if (TDCol!=null)
	{	for (i=0; i<TDCol.length; i++)
			{TDCol.item(i).setAttribute('id',i)}
	}
}

// :::::::::::::::::::::::::
// ::: Scroll Functions ::
// :::::::::::::::::::::::::

function moveLeft()
{
ContainerElement=document.getElementById("ImageContainer");
firstTD=document.getElementById("0");
dupfirstTD=firstTD.cloneNode(false)
dupfirstTD.innerHTML=firstTD.innerHTML
ContainerElement.removeChild(firstTD);
ContainerElement.appendChild(dupfirstTD);
setStyles; setIDs();attachEventhandlers();
}

function moveRight()
{
lastTD=document.getElementById(TDCol.length-1);
duplastTD=lastTD.cloneNode(false)
duplastTD.innerHTML=lastTD.innerHTML
firstTD=document.getElementById("0");
ContainerElement=document.getElementById("ImageContainer");
ContainerElement.insertBefore(duplastTD,firstTD);
ContainerElement.removeChild(lastTD);
setStyles; setIDs();attachEventhandlers();
}

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.