SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: image popup

  1. #1
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    philmont
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    image popup

    I wasnt sure where to place this as I am using php as well as javascript.

    I found this script as I was browsing the site and thought to try it out.
    test.htm
    Code:
    <html><head>
    <script language="javascript">
        function PopupPic() {
            window.open("PopUp.htm","","width=100,height=100,resizable,scrollbars=no,status=0");
        }
    </script>
    
    </head><body>
    
    <a href="javascript:PopupPic()">
    <img src='image.jpg' />
    </a>
    </body></html>

    popup.htm

    Code:
            <script language='javascript'>
                function fitPic() {
                    if (window.innerWidth){
                        iWidth = window.innerWidth -300;
                        iHeight = window.innerHeight -30;
                    }else{
                        iWidth = document.body.clientWidth -300;
                        iHeight =document.body.clientHeight -30;
                    }
                    iWidth = document.images[0].width - iWidth;
                    iHeight = document.images[0].height - iHeight;
                    window.resizeBy(iWidth, iHeight);
                };
            </script>
            </head>
    
    <BODY bgColor="yellow" leftMargin="10" topMargin="10" rightMargin="10" bottomMargin="10" onload="fitPic();">
    
      	<a href="javascript:window.close()" title="Close this Window.">
                 
      
    <img src='image.jpg' width='400' /></a><br />
    </body></html>



    what Im looking to do is have a page with those items placed into it. I have a database of images that always increases or changes depending on the category I choose.


    here is what I tried to accomplish (I also worked on variations as well to get a result):

    test.php:
    PHP Code:
    <html>
    <?php
    include('../includes/connect.php');

    error_reporting(E_ALL & ~E_NOTICE);
            
    $images_dir './uploads';


        
    $gcat $_GET['cat'];
        

    ?>

    <head>


    <script language="javascript">
        function PopupPic() {
            window.open("PopUp.php","","width=100,height=100,resizable,scrollbars=no,status=0");
        }
    </script>
    </head>

    <body>




    <div id='text' style='position:absolute; left:17%; top:50px; width:73%; z-index:4'>

                    <?php
       $pics_id 
    mysql_query"SELECT * FROM var_a WHERE category = '$gcat'" );

                while( 
    $p_id_row mysql_fetch_array($pics_id)) {

       
    $p_id       $p_id_row['photoid'];
       
    $p_name     $p_id_row['photo_name'];
       
    $p_cats     $p_id_row['category'];



    ?>

    <a href="javascript:PopupPic()">



    <?php
             
    echo "<img src='".$images_dir."/".$p_name."' width='70' /></a><br />";




        }


    ?>




    </body>
    </html>


    popup.php

    PHP Code:
    <html>
    <head>


    <?php
    include('../includes/connect.php');

    ?>


            <script language='javascript'>
                function fitPic() {
                    if (window.innerWidth){
                        iWidth = window.innerWidth -300;
                        iHeight = window.innerHeight -30;
                    }else{
                        iWidth = document.body.clientWidth -300;
                        iHeight =document.body.clientHeight -30;
                    }
                    iWidth = document.images[0].width - iWidth;
                    iHeight = document.images[0].height - iHeight;
                    window.resizeBy(iWidth, iHeight);
                };
            </script>
            </head>

    <BODY bgColor="yellow" leftMargin="10" topMargin="10" rightMargin="10" bottomMargin="10" onload="fitPic();">

    <table border="0" cellspacing="2" cellpadding="2">
      <tr>
       <td rowspan='5'>
       <a href="javascript:window.close()" title="Close this Window.">


      <?php
       $pics_id 
    mysql_query"SELECT * FROM var_a WHERE photoid = '$gpid'" );
    list(
    $p_id$p_name$p_cats)= mysql_fetch_array($pics_id);



    ?>


    <img src='<?php echo $images_dir."/".$p_name;?>' width='400' /></a><br />




       </td>

       <td>
       </td>
      </tr>
      <tr>
       <td>Name</td>
      </tr>
      <tr>
       <td>Location</td>
      </tr>
        <tr>
       <td>Building</td>
      </tr>
        <tr>
       <td><div style="position:relative; width:75%;">
                blahblahblahblahblahblahblahblahblahblah<br />
                blahblahblahblahblahblahblahblahblahblah<br />
                blahblahblahblahblahblahblahblahblahblah<br />
                blahblahblahblahblahblahblahblahblahblah<br />
                </div>
            </td>
      </tr>



    </table></body></html>


    some of this doesnt work as I cant seem pass certain variables. But how would I be able to get the popup to show the image that was clicked on, based on what was put into the database?

    I hope this was clear.

  2. #2
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    philmont
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    any suggestions on this?

  3. #3
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    test.php:
    PHP Code:
    <html>
    <?php
    include('../includes/connect.php');

    error_reporting(E_ALL & ~E_NOTICE);
            
    $images_dir './uploads';


        
    $gcat $_GET['cat'];
        

    ?>

    <head>


    <script language="javascript">
        function PopupPic(pic) {
            window.open("PopUp.php?i=" + pic,"","width=100,height=100,resizable,scrollbars=no,status=0");
        }
    </script>
    </head>

    <body>




    <div id='text' style='position:absolute; left:17%; top:50px; width:73%; z-index:4'>

                    <?php
       $pics_id 
    mysql_query"SELECT * FROM var_a WHERE category = '$gcat'" );

                while( 
    $p_id_row mysql_fetch_array($pics_id)) {

       
    $p_id       $p_id_row['photoid'];
       
    $p_name     $p_id_row['photo_name'];
       
    $p_cats     $p_id_row['category'];



    ?>

    <a href="javascript:PopupPic('<?php echo $images_dir."/".$p_name?>')">



    <?php
             
    echo "<img src='".$images_dir."/".$p_name."' width='70' /></a><br />";




        }


    ?>




    </body>
    </html>


    popup.php:
    PHP Code:
    <html>
    <head>



            <script language='javascript'>
                function fitPic() {
                    if (window.innerWidth){
                        iWidth = window.innerWidth -300;
                        iHeight = window.innerHeight -30;
                    }else{
                        iWidth = document.body.clientWidth -300;
                        iHeight =document.body.clientHeight -30;
                    }
                    iWidth = document.images[0].width - iWidth;
                    iHeight = document.images[0].height - iHeight;
                    window.resizeBy(iWidth, iHeight);
                };
            </script>
            </head>

    <BODY bgColor="yellow" leftMargin="10" topMargin="10" rightMargin="10" bottomMargin="10" onload="fitPic();">

    <table border="0" cellspacing="2" cellpadding="2">
      <tr>
       <td rowspan='5'>
       <a href="javascript:window.close()" title="Close this Window.">


    <img src='<?php echo $_REQUEST['i']; ?>' width='400' /></a><br />




       </td>

       <td>
       </td>
      </tr>
      <tr>
       <td>Name</td>
      </tr>
      <tr>
       <td>Location</td>
      </tr>
        <tr>
       <td>Building</td>
      </tr>
        <tr>
       <td><div style="position:relative; width:75%;">
                blahblahblahblahblahblahblahblahblahblah<br />
                blahblahblahblahblahblahblahblahblahblah<br />
                blahblahblahblahblahblahblahblahblahblah<br />
                blahblahblahblahblahblahblahblahblahblah<br />
                </div>
            </td>
      </tr>



    </table></body></html>

  4. #4
    SitePoint Addict
    Join Date
    Aug 2004
    Location
    philmont
    Posts
    315
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you, I really appreciate it.

    this helped me out a lot. it seems that i wasn't too far from the answer, I was just doing things wrong

    + pic and the $_Request parts are the parts I had wrong


Bookmarks

Posting Permissions

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