CODEWITHSUNDEEP
phpjavascriptjqueryajax
user1517199
user1517199

Reputation: 41

I need to resize pictures according to the visitors viewport

Folks, please be gentle, I am not a professional programmer, just a site admin and I need some help. Here is my problem:

I am running a web site, with php. I would like to show pictures to my members, but I would like those pictures to remain within specific size limits, so they do not cause the visitors to scroll horizontally in order to view the whole picture. So far, I have limited the size of uploaded pictures to 800x600 as a least common denominator. However, I believe that users with larger monitors should be allowed to see larger pictures, so I plan to remove that 800x600 limit, but I still would like to make sure that the image displayed wouldn't be larger than the visitor viewport (actually let's say 2/3's of the viewport).

Now, I understand that php runs on the server and javascript runs on the client and that there is no easy way to pass the viewport dimensions to the php code, I tried and failed miserably, so that is clear.

But I've also read (especially in this site) that there are ways to do it, using JQuery and/or Ajax. My main problem? I do not know how to program in Javascript, JQuery or Ajax. So my question is: What exactly should I include in my php file to cause the client to return the browser width to the php file or my html template, in order to use the browser width in the statement my program generates?

If I understand this right, when a visitor asks to see a page and my server send them the result of my page, there should be some code, which will send me back the browser width, then the server will resend the page, using the value it received. Am I correct in that? If that's the way it works, it would be ideal if I could get that browser width value and store it in a php global variable, so that not every page is generated twice. Can that be done?

Please be very specific, as I said, I am a newbie on these things.

Needless to say, any help would be greatly appreciated.

Many thanks for your attention.

P.S.: I have already download and installed JQuery in my server, but I have no idea how to use it for this problem.

Upvotes: 2

Views: 572

Answers (2)

whizzzkid
whizzzkid

Reputation: 1295

I wrote this simple snippet to get things started for you. As you said you needed to resize the image as per the client size and you mentioned that you would be looking for something related to ajax/jquery.

I use here a image resizing/caching script available from github to load a sample image upto 80% of the available browser width.

without much ado:

  1. index.php

    <html>
<head>
    <script>
    function getImg(img){
        if (img==""){
            return;
        }
        width = screen.availWidth;
        if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }else{// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function(){
            if (xmlhttp.readyState==4 && xmlhttp.status==200){
                document.getElementById("img_div").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","resizer.php?i="+img+"&w="+width,true);
        xmlhttp.send();
    }
    </script>
</head>
<body>
    <center>
    <div id="img_div" style="left:0px; top:0px; height: 100%; width:100%;">
            <a href="#" onClick="getImg('xyz.jpg');">Show The Image</a>
    </div>
    </center>
</body>

  2. resizer.php

    <?php
//resizing library
include 'function.resize.php';

$i = $_GET['i'];
$w = $_GET['w'];
echo "Image Requested: ".$i." ; Client's Browser Width: ".$w."px";
$w = 0.8*$w;
echo " ; We will show 80% of width: ".$w."px";
$i_settings['w'] = $w;
echo '<img src="'.resize($i,$i_settings).'" />';
?>

  3. function.resize.php from github

  4. The Image you want (in our case it is a 1920x1080 one)

Now the code is pretty much self explanatory. But things can get a bit confused at times. So CLICK HERE to see the working example and tell me is this something of a solution you were looking for?

Hope I helped! Regards

Upvotes: 0

kiranvj
kiranvj

Reputation: 34127

Try style="max-width:100%;"

Demo : http://jsfiddle.net/5HeG2/1/

Upvotes: 1

Related Questions