Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 4 of 4
  1. #1
    Senior Member ericbusch's Avatar
    Join Date
    Aug 2003
    Location
    Daejeon, South Korea
    Posts
    241
    Member #
    2779
    First of all, my javascript skills are super low and frankly the whole language is intimidating.

    that being said, I am looking for a script that will interact with data from mysql. A thumbnail will provide a link. When the user clicks on the link(thumbnail), it opens up a new window with the dimensions of that picture. (the dimensions are stored in the mysql table: $img_width, $img_height)

    Then, to keep new different sized images from opening up in the same pop-up window, I want the pop-up window to close when the main "thumbnail" page is clicked.

    Does this make sense? If anyone has any ideas, could you let me know in simple javascript jargon?

    Thanks, Eric
    Blogs For Sale - Each blog is packed with 1000s of signatures and ads are highly integrated into the site. Great CTR! Completely customizable from Admin CP. On Sale!
    Complete Websites For Sale - Fantastic looking sites rich with content. Come complete with domain names. I only have a couple of these.

  2.  

  3. #2
    WDF Staff smoseley's Avatar
    Join Date
    Mar 2003
    Location
    Boston, MA
    Posts
    9,729
    Member #
    819
    Liked
    205 times
    Ok, today's your lucky day (cause I'm feeling nice)... I have a program that does pretty much exactly that, and I'm gonna let you use it.

    Check it out on my homepage here: http://www.stevenmoseley.com/gallery...ery=web_design

    There are two files, gallery.php (which lists the images in a specified folder), and gallery_image.php (which displays the photo). Look at the link above to see how they interact.

    gallery.php
    PHP Code:
    <script language="javascript">
        function showPhoto(src, caption, w, h) {
            try {
                photo.close();
            } catch (e) {}
            photo = window.open('gallery_image.php?img=' + src + '&title=' + caption, 'photo', 
                'width=' + w + ',height=' + h + ',directories=no,location=no,menubar=no,scrollbars=no,status=no,toolbar=no,resizable=no');
            return false;
        }
    </script>
    <?php

    include './includes/header.php';

    echo 
    "<h1>Gallery - ".ucwords(str_replace("_"" "$gallery))."</h1>";
    $thumbsize 100;
    $path "./galleries/$gallery/";
    if (
    $dir dir($path)) {
        
    $i 0;
        echo 
    "<table cellpadding=\"5\" cellspacing=\"0\" border=\"0\" width=\"100%\">";
        while(
    $name $dir->read()) {
            if (
    ereg(".*.jpg$|.*.gif$"$name)) {
                
    $size getimagesize($path.$name);
                if (!
    file_exists($path."sm/".$name)) {
                    
    thumbnail($path$name$thumbsize);
                }
                
    $title substr($name0strlen($name) - 4);
                
    $title ucwords(str_replace("_"" "$title));
                
                if (
    $i == 0) echo "<tr>";
                echo 
    "<td align =\"center\" valign=\"top\">";
                echo 
    "<p><a style=\"cursor:hand;cursor&#58pointer\" 
                        onclick=\"showPhoto('"
    .$path.$name."','$title','".$size[0]."','".$size[1]."');\">";
                echo 
    "<img src=\"".$path."sm/".$name."\" alt=\"$title\" 
                        width=\"
    $thumbsize\" height=\"$thumbsize\" border=\"0\">";
                echo 
    "</a><br>$title</p>";
                echo 
    "</td>";
                
    $i += 1;
                if (
    $i == 0) echo "</tr>";
            }
        }
        echo 
    "</table>";
    } else {
        echo 
    "Gallery not found.";
    }
    include 
    './includes/footer.php';

    /*
     *  Thumbnail Gemerator
     */
    function thumbnail($path$name$size) { 
        
    $img imagecreatefromjpeg("$path/$name"); 
        
    $imgw imagesx($img);
        
    $imgh imagesy($img);
        
    $thumbx = (integer) ($imgw >= $imgh) ? : (($imgh $imgw) * $size $imgh) / 2;
        
    $thumby = (integer) ($imgh >= $imgw) ? : (($imgw $imgh) * $size $imgw) / 2;
        
    $thumbw = (integer) ($imgw >= $imgh) ? $size $size $imgw $imgh;
        
    $thumbh = (integer) ($imgh >= $imgw) ? $size $size $imgh $imgw;
        
    $thumb imagecreate($size$size);  //new thumbnail
        
    imagefill($thumb00"#FFFFFF");  //white bg
            
    imagecopyresized($thumb$img$thumbx$thumby00$thumbw$thumbh$imgw$imgh); 
        
    // Create the folder if it doesn't exist
        
    if (!file_exists($path."sm/")) {
            
    mkdir($path."sm/");
        }
        
    imagejpeg($thumb$path."sm/".$name); 
        return 
    true;

    ?>
    gallery_image.php
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
        <head>
            <title>Photos</title>
            <link rel="stylesheet" type="text/css" href="css/style.css"></link>
        </head>
        <body leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0" marginwidth="0" marginheight="0">
            <div style="position:absolute; top:20px; left:20px;">
                <table id="contentTable" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td align="center" valign="center">
                            <h1>Loading <?php echo $title ?>...</h1>
                        </td>
                    </tr>
                </table>
            </div>
            <div style="position:absolute; top:0px; left:0px; width:100%; height:100%;">
                <table id="contentTable" width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
                    <tr>
                        <td align="center" valign="middle">
                            <img id="photo" name="photo" src="<?php echo $img ?>
                                alt="Click to close window" border="0" style="cursor:hand" 
                                onclick="window.close()"><br>
                        </td>
                    </tr>
                </table>
            </div>
        </body>
    </html>

  4. #3
    Senior Member ericbusch's Avatar
    Join Date
    Aug 2003
    Location
    Daejeon, South Korea
    Posts
    241
    Member #
    2779
    Transio,

    Thanks. I actually "got" the idea after viewing some of your photos on your website. I noticed in the source that something that was not hardcoded in HTML was being used to produce the window size.

    I think the last part of the code is all I need. I will hardcode the thumbnail page and have the thumbnail page link to one single php page.

    I have another question about opening and displaying images in a pop-up window. when i use the following code and i view it on another browser sometimes a scroll bar appears and the iamges doesnt seem to fit. I dont want a scrollbar, and the image is smaller than the window is supposed to be. How can you get around this?

    <a href="#" onClick="window.open('http://www.page.html', 'Image_Window', 'height=440, width=740'); return false;">LINK</a>

    Thanks again for the code!
    Eric
    Blogs For Sale - Each blog is packed with 1000s of signatures and ads are highly integrated into the site. Great CTR! Completely customizable from Admin CP. On Sale!
    Complete Websites For Sale - Fantastic looking sites rich with content. Come complete with domain names. I only have a couple of these.

  5. #4
    Senior Member skrlin's Avatar
    Join Date
    Apr 2003
    Location
    Illinois
    Posts
    562
    Member #
    1063
    In page.html, try adding
    Code:
    topmargin=0 leftmargin=0 marginheight=0 marginwidth=0
    to your body tag.
    - Brian


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 11:51 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2020 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com