Passing variables with javascript

@Kanga-KeithNov 27.2004

Help – l am new to programming but would like to setup my website with some photographs. I am using frontpage and have setup a page with all my thumbnails on. What l would like to do is by clicking on a thumbnail it opens a new page and pass the variable (photo name) so that a large image is displayed on the new page.
I can do this by using a hyperlink to a previously created page but when there are several hundred images this is a bit of a pain.
What l need is a single “large” image page which will accept the thumbnail name and display the larger image, but everything l do does’nt seem to work.
Any advise would be most appreciated.
Kanga-Keith

to post a comment

JavaScript

3 Comments(s) _↴

@vwphillipsNov 27.2004 — #see

[URL]http://homepage.ntlworld.com/vwphillips//ThumbNailDisplay/ThumbNailDisplay.htm[/URL]

@Warren86Nov 27.2004 — #Here is code for circular thumbnail paging with automatic centering and display of the fullsize image upon clicking a thumbnail. It doesn't matter how many photos you have, only 4 thumbnails display at a time, and you can "page" through them, forward and backward. There is a customization section to set the number of images. The only caveat is that they must have file names consisting of consecutive numbers, e.g. 1.jpg, 2.jpg, etc. I'm also attaching a small bgimage file. It displays in any of "empty" cells, if the number of photos you are using is not a multiple of four. This bgimage must be in the same folder (path) as your photos.

Oh, and this forum sometimes changes javascript to java script. So, make any corrections, if necessary.

<HTML>

<Head>

<Script Language=JavaScript>

//------- Customization----------------

var header = "City Landmarks";

var alignTo = "center";

var colorPref = "#F0F8FF"; //aliceblue

var backIMG = "vertbluebars.gif";

var nPix = 10;

var pixPath = "Images/"; // use "" if images are in current folder

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

// -------- Do not edit below this line --------

var largerView = "";
 
  function openFullSize(Pix){
 
   if (largerView != ""){largerView.close()}
   nullIMG.src = Pix;
   wStr = nullIMG.width;
   offsetW = wStr;
   wStr = wStr+20;
   wStr = "width="+wStr;
   hStr = nullIMG.height;
   offsetH = hStr;
   hStr = hStr+20;
   hStr = "height="+hStr;
   lStr = (screen.width-50-offsetW)/2;
   lStr = "left="+lStr;
   tStr = (screen.availHeight-50-offsetH)/2;
   tStr = "top="+tStr;
   largerView = window.open(Pix,"FullSize","toolbar=0,status=0,								"+tStr+","+lStr+","+wStr+","+hStr+" ");
  }
 
  function buildSupport(){
 
   styleStr = "<Style> .placeHolder {Position:Absolute;Top:-2000;}</Style>";
   divStr = "<Div class=placeHolder><IMG Src=Null ID=nullIMG></Div>"
   document.write(styleStr);
   document.write(divStr);
  }
 
  function getSize(){
 
   W = screen.width;
   tmpStr = "";
   if (W <= 800){tmpStr = "120 |90"};
   if (W > 800 && W < 1200){tmpStr = "155 |116"};
   if (W > 1200){tmpStr = "195 |146"};
   return tmpStr;
  }
 
  pane = new Object;
  pane.nThumbs = nPix; 
  pane.path = pixPath;
  pane.size = getSize();
  pane.size = pane.size.split("|");
 
  pane.nPages = (pane.nThumbs/4).toFixed(2)
  var tmpCalc = pane.nPages;
  tmpCalc = parseFloat(tmpCalc) - parseInt(tmpCalc);
  if (tmpCalc == 0){pane.nPages--}
  if (tmpCalc > 0){pane.nPages = parseInt(pane.nThumbs/4)}
 
  panel = buildPanels();
  var pg = -1;
 
  function buildHolderTbl(){
 
   tmpStr = "<Table class=holder align="+alignTo+" cellspacing=0 			cellpadding=2><TR><TD class=header colspan=4 height=30>"+header+"</TD></TR><TR>";
 
   for (i=1; i<=4; i++)
   {
   tmpStr += "<TD class=pane id="+i+"></TD>";
   }
   tmpStr += "</TR><TR><TD class=btns bgcolor="+colorPref+" colspan=4 align=center height=30><input type=button id='pBtn' value='<'onClick="TurnPage('prev')"> <input type=button id='nBtn' value='>'onClick="TurnPage('next')"></TD></TR></Table>";
   document.write(tmpStr);
  }
 
  function buildPanels(){ 
 
   aStr = "<a href=javascript:openFullSize('"
   bStr = ")><img src='";
   cStr = " width="+pane.size[0]+"height="+pane.size[1]+" alt='Click to enlarge'></a>";
   tmpStr = new Array();
   tmpStr[0] = "";
 
   for (i=1; i<=pane.nThumbs; i++){
   tmpStr[i-1] = aStr +pane.path+i+ ".jpg'" + bStr 							+pane.path+i+ ".jpg'" +cStr;
   }
   return tmpStr;
  } 
 
  function buildStyle(){
 
   styleStr = "<Style> .btns {Background-Color:"+colorPref+";padding-left:0px;padding-right:0px;padding-top:3px;margin-left:0px;margin-right:0px;Text-Indent:0px;text-decoration:none;Text-Align:center;font-style:normal;font-weight:normal;border-right:solid;border-width:1px;border-color:black;}.pane{Background-Color:"+colorPref+";padding-left:4px;padding-right:4px;margin-left:0px;margin-right:0px;Text-Indent:0px;text-decoration:none;Text-Align:center;font-style:normal;font-weight:normal;border-right:solid;border-width:1px;border-bottom:solid;border-width:1px;border-color:black;}A:visited IMG{border-color:blue};A:active IMG{border-color:blue;}.header{Background-Color:"+colorPref+";padding-left:0px;padding-right:0px;margin-left:0px;margin-right:0px;Text-Indent:0px;text-decoration:none;Text-Align:center;font-style:normal;font-weight:normal;font-size:14pt;border-bottom:solid;border-width:1px;border-color:black;border-right:solid;border-width:1px;border-color:black;}.holder{margin-left:8px;margin-right:6px;margin-top:6px;margin-bottom:2px;border-left:solid;border-width:1px;border-color:black;border-top:solid;border-width:1px;border-color:black;border-bottom:solid;border-width:1px;border-color:black;}</Style>"
 
   document.write(styleStr);
  }
 
  function TurnPage(direction){
 
   if (direction == 'next'){if (pg < pane.nPages){pg++} else{pg = 0}}
   if (direction == 'prev'){if (pg > 0){pg--} else{pg = pane.nPages}}
 
   for (i=1; i<=4; i++)
   {
   document.getElementById(i).innerHTML = panel[i-1+4*pg]; 
   if (i-1+4*pg >= pane.nThumbs)
   {
   document.getElementById(i).innerHTML = "<img 				   src='"+pane.path+""+backIMG+"' width="+pane.size[0]+" 				   	   height="+pane.size[1]+">"
   }
   }
  }
 
  function displayPanes(){
 
   buildHolderTbl();
   buildPanels();
   buildStyle();
   buildSupport();
   TurnPage('next');
   if (pane.nThumbs < 5)
   {
   pBtn.style.visibility = "hidden";
   nBtn.style.visibility = "hidden";
   } 
  }

</Script>

</Head>

<Body>

<center>

<H3>Portable circular paging 1x4 Pane thumbnail box<BR>

with automatic display of image at its actual full size.</h3>

</center>

<Script>

displayPanes();

</Script>

</Body>

</HTML>

[upl-file uuid=cc11ff3f-c0c9-42d3-9e0d-99a61bb25a86 size=148B]vertbluebars.gif[/upl-file]

@KorNov 28.2004 — #a simplified DOM solution can be also this:

[code=php]
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Untitled Document</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Script-Type" content="text/javascript">
 <style type="text/css">
 <!--
 #pic{
 position: absolute;
 z-index: 2;
 left: 100px;
 top: 10px;
 display:none
 }
 -->
 </style>
 <script language="JavaScript" type="text/JavaScript">
 function showP(obj){
 var root = document.getElementById('pic');
 while (root.hasChildNodes()){
 root.removeChild(root.childNodes[0]);
 }
 var newObj = obj.cloneNode(obj);
 newObj.removeAttribute('width');
 newObj.removeAttribute('height');
 root.appendChild(newObj)
 root.style.display='block'
 }
 function hideP(){
 document.getElementById('pic').style.display='none';
 }
 </script>
 </head>
 <body>
 thumbnails<br>
 <br>
 <img src="00.jpg" width="50" height="50" onclick="showP(this)"><br>
 <img src="01.jpg" width="50" height="50" onclick="showP(this)"><br>
 <img src="02.jpg" width="50" height="50" onclick="showP(this)"><br>
 <a href="#" onclick="hideP();return false">close the layer</a> 
 <div id="pic"> </div>
 </body>
 </html>
 [/code]

Also in #JavaScript _↴

Dynamic Form with Dropdown Menu and Text Box For Loops - Date of birth Javascript game hangman help

Success!

Help @Kanga-Keith spread the word by sharing this article on Twitter...

Tweet This

Passing variables with javascript

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Passing variables with javascript

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴