...

View Full Version : Stuck passing vars for photo gallery site



schuby
01-11-2007, 03:37 AM
Hi I'm a noob at Java script but I'm hoping to learn it. That aside, I am trying to build a photo gallery website. My webpage format is simple: I have a left frame that has the thumbnails and a right frame (main page) which I want to have the main images appear onMouseover of the thumbnails. I've got all of the coding for the mouseover done and I have all of the large images happening in a div, which I like. Unfortunatly all of the code only worked in one frame. When I moved the div over to the right frame I had problems. So then I copied the code for the appearing of the images to the right frame and I still have problems and this is where I am at right now:

FRAMESET
<html>
<head>
<title>Discover Paris - Photo's by Marc</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<FRAMESET frameborder=1 cols="20%,80%">
<FRAME src="Test 1.htm" NAME="LeftFrame" scrolling=YES>
<FRAME src="Welcome.html" name="RightFrame" scrolling=NO>
</frameset><noframes></noframes>
<body>
</body>
</html>

Test 1 (left frame)
<html>

<head>
<title>Mouseover Image Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function Picture(t) {
parent.RightFrame.PictNum= (0);
}
</script>
</head>

<body>
<table width="119" border="0" cellspacing="2" cellpadding="0">
<tr>
<td><a href="http://www.yahoo.com" onMouseOver="Picture(0)"><img src="Thumbnails/cleric_anime.jpg" width="75" height="58"></a></td>
</tr>
<tr>
<td><a href="http://www.yahoo.com" onMouseOver="Picture(1)"><img src="Thumbnails/DuPoint.jpg"></a></td>
</tr>
<tr>
<td><a href="http://www.yahoo.com" onMouseOver=""><img src="Thumbnails/Entering Lybria.jpg" width="75" height="58"></a></td>
</tr>
<tr>
<td><a href="http://www.yahoo.com" onMouseOver=""><img src="Thumbnails/Equilibrium- The Lybrians.jpg" width="75" height="58"></a></td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

Welcome (right frame)
<html>
<head>
<title>Welcome</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
/***********************************************
* Java script needed for controlled animation/load of mouseover images
* Array is used for loading in the images and then an immediate link
***********************************************/

//Specify image paths and optional link (set link to "" for no link):
var dynimages=new Array()
dynimages[0]=["cleric_anime.jpg", "http://www.google.ca"]
dynimages[1]=["DuPoint.jpg", ""]
dynimages[2]=["Entering Lybria.jpg", ""]
dynimages[3]=["Equilibrium- The Lybrians.jpg",""]

//Preload images ("yes" or "no"):
var preloadimg="yes"

//Set optional link target to be added to all images with a link:
var optlinktarget=""

//Set image border width
var imgborderwidth=0

//Optionally, change 1.0 and 0.7 below to affect Wipe gradient size and duration in seconds in IE5.5+:
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"

///////No need to edit beyond here/////

if (preloadimg=="yes"){
for (x=0; x<dynimages.length; x++){
var myimage=new Image()
myimage.src=dynimages[x][0]
}
}

function returnimgcode(theimg){
var imghtml=""
if (theimg[1]!="")
imghtml='<a href="'+theimg[1]+'" target="'+optlinktarget+'">'
imghtml+='<img src="'+theimg[0]+'" border="'+imgborderwidth+'">'
if (theimg[1]!="")
imghtml+='</a>'
return imghtml
}

function modifyimage(loadarea, imgindex){
if (document.getElementById){
var imgobj=document.getElementById(loadarea)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()
}
imgobj.innerHTML=returnimgcode(dynimages[imgindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false
}
}

var PictNum;
window.onload = function() {
modifyimage('dynloadarea', PictNum)
}
</script>
</head>

<body>
Welcome to my webpage!
<div id="dynloadarea" style="position:absolute; top:50px; left:200px; width:500;height:500;background-color:">test</div>
</body>
</html>

I'm at the point where all I need is to be able to pass a number from frame 1 to PictNum in frame 2 to tell my modifyimage command what thumbnail the user mousedover.

I'm really lost on this, any help would be greatly appreciated

Thanks

TripperTreats
01-12-2007, 02:39 AM
I can't find your problem off-hand, but I have a couple of suggestions:

Don't use tables for layout, use <div> tags. It simplifies many, many parts of coding.
Don't reinvent the wheel if you don't have to. There are many photo gallery generating programs out there that you can customize to do absolutely anything you like. Check out www.jalbum.org. You can download a skin and modify to your liking.

fishluvr
01-12-2007, 03:45 PM
At a glance, I'd say change your Picture function in the left frame. You're setting a variable in the right frame, but not calling the function to change the image.

Try:

parent.RightFrame.modifyimage('dynloadarea', t);

schuby
01-12-2007, 05:39 PM
Man that line of code DID IT!!!! :thumbsup:

parent.RightFrame.modifyimage('dynloadarea', t);

auuuuu.... ;)

man it works so perfectly, I like freaked out on testing it. You have no idea how long I spent trying to figure out this problem!

Thanks again... Schuby



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum