• 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.

  • Posts

    • Universal Media Server 15.6.0

      By Copernic · Posted

      Universal Media Server 15.6.0 by Razvan Serea Universal Media Server is a DLNA-compliant UPnP Media Server. UMS was started by SubJunk, an official developer of PMS, in order to ensure greater stability and file-compatibility. The program streams or transcodes many different media formats with little or no configuration. It is powered by MEncoder, FFmpeg, tsMuxeR, AviSynth, MediaInfo and more, which combine to offer support for a wide range of media formats. Because it is written in Java, Universal Media Server supports all major operating systems, with versions for Windows, Linux and Mac OS X. To see a comparison of popular media servers, click here. Universal Media Server 15.6.0 changelog: General Added Discogs integration for audio metadata and UPnP Added new options for DNS resolution handling (thanks, @henry701 Henrique Campos!) Added a loading indicator to the Shared Content area on the web settings (#6037) Improved detection of sample videos Improved stability of speed test (thanks, @henry701 Henrique Campos!) Fixed support for servers with no Internet access (#6047) (thanks, @henry701 Henrique Campos!) Fixed wrong Linux yt-dlp binary being packaged (#6011) (thanks, @Pro-pra!) Fixed API lookups happening for TV series when episode lookup fails, even if the series metadata is already in the local database (#6080) Fixed JDK being used in Docker image instead of JRE (#6089) (thanks, @mvanhorn Matt Van Horn!) Fixed editing a video feed on the web settings erases the URL (#6046) (thanks, @serinekjo kjo!) Fixed docs for FFmpeg GPU support (thanks, @Harshit-dell Harshit Kumar Sahu!) Translation updates via Crowdin Dutch (97%) (thanks, Lefteye!) English (United Kingdom) (80%) (thanks, Andi Chandler!) Italian (63%) (thanks, parduz!) Portuguese (Brazilian) (67%) (thanks, Henrique Campos!) Download: Universal Media Server 15.6.0 | 157.0 MB (Open Source) Download: Other operating systems View: Universal Media Server Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Signal accuses UK government of using child safety as cover for mass surveillance

      By +Warwagon · Posted

      Think of the children!
    • Classic Outlook vs New Outlook — Which one do you prefer and why?

      By tsupersonic · Posted

      When you're in enterprise IT environment, you're kinda forced into it...otherwise I'm not touching any mail client for personal use.  I can't stand New Outlook. It's complete trash - half the features I need in (Classic) Outlook are just missing in New Outlook. I haven't talked to a single person who actually likes the new client. 
    • macOS ‘Golden Gate' unveiled with standalone Siri app, performance improvements and more

      By +mram · Posted

      I think it's cute that Apple is implementing their tools at precisely the same evolutionary level as other devices' tools. In other words, I see no innovation; it's "the same but different." "Hey Siri, help me write this document about shoes." Powered by Google. "Sure thing, while we're here, can I interest you on some Nike's? They're on sale at Target right now!"
    • Is your Apple Watch supported? Check the watchOS 27 compatibility list

      By +Warwagon · Posted

      Walmart was still selling the Apple Watch SE 2 on Black Friday in 2024. I got 1 for my mom and one for my dad for christmas.

  • Recent Achievements

    • Very Popular
      Captain_Eric earned a badge
      Very Popular
    • One Month Later
      amusc earned a badge
      One Month Later
    • One Month Later
      DJC50PLUS earned a badge
      One Month Later
    • Week One Done
      DJC50PLUS earned a badge
      Week One Done
    • Proficient
      Eric Biran went up a rank
      Proficient

  • Popular Contributors

    1. 1
      +primortal
      509
    2. 2
      PsYcHoKiLLa
      222
    3. 3
      ATLien_0
      92
    4. 4
      +Edouard
      86
    5. 5
      Steven P.
      81
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!