Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Stuck passing vars for photo gallery site

    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="progidXImageTransform.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

  • #2
    New Coder TripperTreats's Avatar
    Join Date
    Oct 2006
    Posts
    92
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Psychedelic digital art at www.trippertreats.com.

    "And in the end, the love you take
    is equal to the love you make
    ."

  • #3
    Regular Coder fishluvr's Avatar
    Join Date
    Nov 2005
    Posts
    110
    Thanks
    1
    Thanked 12 Times in 12 Posts
    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:
    Code:
    parent.RightFrame.modifyimage('dynloadarea', t);

  • #4
    New to the CF scene
    Join Date
    Jan 2007
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    You Are God

    Man that line of code DID IT!!!!

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •