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 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2006
    Posts
    96
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Passing Javascript to new page through php

    Hi all
    I have the following:

    Code:
    <head>
    <script type="text/javascript" src="Javascript/new_window_640x480.js"></script>
    <script type="text/javascript">
      var aryImages = new Array(3);
      aryImages[0] = "images/car1.jpg";
      aryImages[1] = "images/car2.jpg";
      aryImages[2] = "images/car3.jpg";
      for (i=0; i < aryImages.length; i++) {
        var preload = new Image();
        preload.src = aryImages[i];
      }
    
      function swap(imgIndex) {
        document['imgMain'].src = aryImages[imgIndex];
      }
    </script>
    </head>
    <BODY onLoad="swap(0);">
    <div id="popup_main_pic"><img class="pic320" name="imgMain" src=""></div>
    <div id="popup_magnify"><a href="#" onclick="picwindow('big_pic.php?id=<?php echo $row['id']; ?>')"><img src="images/magnifying_glass.png" alt="magnifying glass" /></a></div>
    <div id="popup_small_pic_1"><a href="javascript:swap(0)"><img class="pic100" src="images/car1.jpg" alt="911" /></a></div>
    <div id="popup_small_pic_2"><a href="javascript:swap(1)"><img class="pic100" src="images/car2.jpg" alt="911" /></a></div>
    <div id="popup_small_pic_3"><a href="javascript:swap(2)"><img class="pic100" src="images/car3.jpg" alt="911" /></a></div>
    The javascript switches pictures into a main display. I would like the magnifying link to open an new window (which I can do 'big_pic.php?id=<?php echo $row['id']; ?>') and display a larger version of the selected main image (imgMain). How do I also send the swap number or actual image name (imgMain) to the new page?

    Does that make sense.

    Cheers
    Steve

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If I may make some suggestions...
    Code:
    <head>
    <script type="text/javascript" src="Javascript/new_window_640x480.js"></script>
    <script type="text/javascript">
      var aryImages = new Array(3);
      aryImages[0] = "images/car1.jpg";
      aryImages[1] = "images/car2.jpg";
      aryImages[2] = "images/car3.jpg";
      for (i=0; i < aryImages.length; i++) {
        preload = new Image();
        preload.src = aryImages[i];
      }
    
    var current_smallpic_idx = 0;
    if (typeof window.onload == 'function') {xOldOnLoad = window.onload;}
    window.onload = function()
    {
      if (window.xOldOnLoad) xOldOnLoad();
      var i = 1, a = document.getElementById('popup_magnify');
      if (a) {a.onclick = magnify_click;}
      while ((a = document.getElementById('popup_small_pic_' + i)) != null) {
        a.onclick = smallpic_click;
        a.smallpic_idx = i;
        ++i;
      }
      document.getElementById('popup_small_pic_0').onclick();
    };
    function magnify_click()
    {
      var url = 'big_pic.php?id=' + current_smallpic_idx + '&nm=' + aryImages[current_smallpic_idx];
      picwindow(url); 
      return false;
    }
    function smallpic_click()
    {
      document.getElementById('imgMain').src = aryImages[this.smallpic_idx]; 
      current_smallpic_idx = this.smallpic_idx;
      return false;
    }
    </script>
    </head>
    <body>
    <div id="popup_main_pic"><img class="pic320" id="imgMain" src=""></div>
    <div><a id="popup_magnify" href=""><img src="images/magnifying_glass.png" alt="magnifying glass" /></a></div>
    <div><a id="popup_small_pic_0" href=""><img class="pic100" src="images/car1.jpg" alt="911" /></a></div>
    <div><a id="popup_small_pic_1" href=""><img class="pic100" src="images/car2.jpg" alt="911" /></a></div>
    <div><a id="popup_small_pic_2" href=""><img class="pic100" src="images/car3.jpg" alt="911" /></a></div>
    I haven't tested it. Let me know how it goes
    Last edited by MikeFoster; 02-15-2007 at 07:56 AM.

  • #3
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I didn't know what to do with $row['id']. And I'm not sure about the argument to picwindow.

  • #4
    New Coder
    Join Date
    Jul 2006
    Posts
    96
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Mike thanks for the reply.

    Couldn't get the script to work - 'but then that's maybe not the script!'.

    It only displayed the first small pic but not the main or other small ones. But it has given me some things to read up on. Very new to the whole javascript thing been working in php up till now. Is it me or is it all backwards!! LOL.

    The $row['id'] is use in conjunction with the MySQL database to load the appropriate info 'page.php?id=<?php $row['id'] ?>' will result in 'page.php?id=1' when calling record 1 and then filling the page with info from record one.

    Steve

  • #5
    New Coder
    Join Date
    Jul 2006
    Posts
    96
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Just a thought. The code:

    Code:
      function swap(imgIndex) {
        document['imgMain'].src = aryImages[imgIndex];
      }
    Is the bit that actually swaps the image.
    I can transfer a variable over to the next page with this:

    Code:
    <script type="text/javascript">
    var img = 100;
    document.write ('<a href="big_pic.php?id=<?php echo $row['id']; ?>&image='+img+'">test</a>')
    </script>
    Would there be any way (remember I'm new) to set var img to that of imgIndex so I can transfer the number 0,1 or 2 to the new page. Ive tried var img = imgIndex; with no joy but this may be cos there in two different scripts not sure if JS works akin to php or each script is a separate program/function.
    Or alternatively can you extract the path name images/car1.jpg from the 'document' imgMain.

  • #6
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Look at my function magnify_click(). It creates a url with the picture's index and file name.

    Give us a link to your page or post the updated code.

  • #7
    New Coder
    Join Date
    Jul 2006
    Posts
    96
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Hi Mike

    The code is as follows:
    Code:
    <?php echo "<?xml version=\"1.0\" encoding=\"iso-8859-1\"?".">"; ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <?php
    include('phpmysql/config.php');
    include('phpmysql/connect.php'); 
    
    // Get ID of page
    $id = $_GET['id'];
    
    // Run SQL query
    $query = "SELECT * FROM motors WHERE id='$id'";
    $result = mysql_query($query);
    $row = mysql_fetch_array($result);
    
    
    ?>
    
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link href="css/popup.css" rel="stylesheet" type="text/css" />
    
    <script type="text/javascript">
    function picwindow(url) {
    mywindow2 = window.open(url, 'name2', 'resizable=0, scrollbars=0, height=480, width=640');
    return false;
    }
    </script>
    <script type="text/javascript">
      var aryImages = new Array(3);
      aryImages[0] = "images/car1.jpg";
      aryImages[1] = "images/car2.jpg";
      aryImages[2] = "images/car3.jpg";
      for (i=0; i < aryImages.length; i++) {
        preload = new Image();
        preload.src = aryImages[i];
      }
    
    var current_smallpic_idx = 0;
    if (typeof window.onload == 'function') {xOldOnLoad = window.onload;}
    window.onload = function()
    {
      if (window.xOldOnLoad) xOldOnLoad();
      var i = 1, a = document.getElementById('popup_magnify');
      if (a) {a.onclick = magnify_click;}
      while ((a = document.getElementById('popup_small_pic_' + i)) != null) {
        a.onclick = smallpic_click;
        a.smallpic_idx = i;
        ++i;
      }
      document.getElementById('popup_small_pic_0').onclick();
    };
    function magnify_click()
    {
      var url = 'big_pic.php?id=<?php echo $row['id']; ?>&pic' + current_smallpic_idx + '&nm=' + aryImages[current_smallpic_idx];
      picwindow(url); 
      return false;
    }
    function smallpic_click()
    {
      document.getElementById('imgMain').src = aryImages[this.smallpic_idx]; 
      current_smallpic_idx = this.smallpic_idx;
      return false;
    }
    </script>
    </head>
    <body>
    
    <div id="popup_head"><img src="images/private_motors_hd.png" alt="Private Motors" /></div>
    <div id="popup_title"><h1 class="popup"><?php echo $row['year']; ?> <?php echo $row['model']; ?> <?php echo $row['make']; ?></h1></div>
    <div id="popup_main_pic"><img class="pic320" id="imgMain" src=""></div>
    <div><a id="popup_magnify" href=""><img src="images/magnifying_glass.png" alt="magnifying glass" /></a></div>
    <div><a id="popup_small_pic_0" href=""><img class="pic100" src="images/car1.jpg" alt="911" /></a></div>
    <div><a id="popup_small_pic_1" href=""><img class="pic100" src="images/car2.jpg" alt="911" /></a></div>
    <div><a id="popup_small_pic_2" href=""><img class="pic100" src="images/car3.jpg" alt="911" /></a></div>
    </body>
    </html>
    The first thing is that on loading the page it doesn't insert pic 1 in main window or when selected. Although on mag click it will insert the pic number and path in the hyperlink it won't insert the mysql id number from the php, like the document.write would.

    Steve

  • #8
    New Coder
    Join Date
    Jul 2006
    Posts
    96
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Fistly an edit to my last message.

    The link works perfectly. I initially just typed in test.php in my browser and not test.php?id=1.

    Obviously the page then gets it's id from the above filename.
    Clicking on the magnify pic does launch the required new page and ads in the required content:

    big_pic.php?id=1&pic=0&nm=images/car1.jpg

    Which using $_GET in php I can drop into a string to display my large pic.
    The only problem now is that pic 0 (car1) does not display on page load or when clicking on the thumbnail with the mouse (though the thumbnail is there with the rest of them. Pic 1 (car2) and 2 (car3) do display and load in the 'popup_main_pic' area. And mag clicking with these cars does change the hyperlink correctly.

    As I know very (very) little JS I'm not fully sure how Mike's script works to see why the first image won't display. (But books are on order!).

    Steve
    Last edited by Cacus; 02-15-2007 at 07:38 PM.

  • #9
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cacus,

    In the onload function, change the initial value of "i" to 0. That was my fault.

    Look at the function "magnify_click". I still think you do not need to echo $row['id'] as the id argument to big_pic.php. The user chooses which pic's id will be passed to big_pic.php.
    Code:
    function magnify_click()
    {
    //  var url = 'big_pic.php?id=<?php echo $row['id']; ?>&pic' + current_smallpic_idx + '&nm=' + aryImages[current_smallpic_idx];
      var url = 'big_pic.php?id=' + current_smallpic_idx + '&nm=' + aryImages[current_smallpic_idx];
      picwindow(url); 
      return false;
    }
    Btw, I don't know anything about MySQL so take a look at Ancora's advice.

  • #10
    New Coder
    Join Date
    Jul 2006
    Posts
    96
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Mike

    Works a treat! Thanks alot.

    I will, when my js book arrives, go through it to see how it actually works.

    Re: the 'echo id' this is not for the picture id but so the new page knows which record in the MySQL table to access for other information.

    Once again many thanks for the help.

    Steve

  • #11
    Regular Coder
    Join Date
    May 2004
    Location
    Alabama, USA
    Posts
    237
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You're very welcome, Steve.


  •  

    Posting Permissions

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