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 2 of 2
  1. #1
    Junior Member
    Join Date
    Dec 2011
    Posts
    7
    Member #
    30360
    Liked
    1 times
    Sorry if this is a dumb question, or in the wrong spot, but I am struggling with what to actually call my problem. I have a simple website designed to help customers view pictures of products. I want them to be able to click on a link to view a larger picture. That I can do easily. What I want to now, is that when this new page comes up, the picture is scaled down enough to fit on the screen without having to scroll. Then, if you click on it, it blows up to it's actual size, where you can really see a zoomed in version of the product. Here's a link to what I actually am trying to do:

    http://altawebworks.com/articles/wp-...o-drop-top.gif

    If you hover over this picture, a magnifying glass shows up, and you can click to make the picture bigger. How is this done? And also, what is this technique called? Thank you in advance for your time and your help!

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,715
    Member #
    5580
    Liked
    717 times
    That's actually a function of your browser ... you have no control over it.
    With IE, it's "enable automatic image resizing" ... a feature of Advanced Options.

    You won't know what the user's browse size is (their monitor size).

    If you make two sizes of each photo ... a thumbnail (tiny) and a full size (400 pixels high),
    you'll cover most browser/monitor sizes. iPhones, iPods, etc. will of course not work correctly.
    Technically, you can determine if a user is using a PC, iPod, Android, etc.

    There are some tricks you can also do with PHP GD. If you display a <table><td> on a page,
    you can find out how many pixels wide it is by using javascripting. So if a <td> was made to
    be 100% wide, you would know how many pixels wide it is. Then, save that value as a cookie
    and then you use PHP GD to resize that image to the proportional height to that width.
    I don't know how smooth that would be. It would have to render a <td>, determine the
    width and then execute a PHP script. There might be an extra page refresh required.

    Try this test ... copy and upload the script below (call it "screen.html"),
    then view it on your browser ... so you can change window sizes.
    Click the link at the bottom of the page to see the current width of the window.

    PHP Code:
    <html>
    <
    head><title>Test DIV width in pixels</title>
    <
    script>
    function 
    getOff()
    {
    document.getElementById('test');
    return 
    x.offsetWidth;
    }
    </script>
    <style>
    #test{
    margin: 0px auto;
    }
    </style>
    </head>
    <body>
    <table style="width:100%; height:100%; border:1px solid #000;"><tr>
    <td id="test">This is the TD to measure.</td>
    </tr></table>
    <br /><br />
    <a href="javascript:alert('offsetWidth = ' + getOff())">Get Pixel Width</a>
    </body>
    </html> 
    So I would envision a script that does this javascript thing when it loads,
    and then jumps to a PHP script to render the image. The javascript determines
    the window size and saves it as a cookie, then it executes the PHP script.
    The PHP script reads the cookie and resizes the image based on the width.

    The disadvantage to doing this is the processing time. This would happen every
    time someone clicks on a thumbnail. Not very efficient, but effective.



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 02:32 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com