Dynamic jQuery function with PHP

Question

I got a jQuery function that scales pictures so that the largest measurement is 350px, no matter of the original size.

jQuery:

function Scale(){
    var img = new Image();
img.onload = function () {
    alert('Orignal width:'+img.width+', height:'+img.height);
    var width, height;
    if (img.width > img.height) {
        width = (img.width > 350 ? 350 : img.width);
        height = img.height * (350 / img.width);
    } else {
        height = (img.height > 350 ? 350 : img.height);
        width = img.width * (350 / img.height);
    }
    img.width=width;
    img.height=height;
    $("#img-holder").append(img);
}

img.src = "picture.jpg"
}

I'm retrieving picture links from my database using a PHP loop.

PHP:

$q = "SELECT * FROM `items`";
$row = mysqli_query($con, $q) or die(mysqli_error());
while($r = mysqli_fetch_assoc($row))
{
  //do stuff
}

The picture link will then be stored as $r['picture'] every time the loop runs.

My problem: How do I run the jQuery script for every picture I retrieve with the loop?

Did you know there's a css property for that?

Blazemonger
– Blazemonger

2013-04-11 14:57:35 +00:00
Commented Apr 11, 2013 at 14:57 — Blazemonger
– Blazemonger, Commented Apr 11, 2013 at 14:57
Does that CSS property keep the proportions of the picture?

Simon Carlson
– Simon Carlson

2013-04-11 15:01:59 +00:00
Commented Apr 11, 2013 at 15:01 — Simon Carlson
– Simon Carlson, Commented Apr 11, 2013 at 15:01
Depending on how you do it, yes. Submitted an answer.

Blazemonger
– Blazemonger

2013-04-11 15:02:53 +00:00
Commented Apr 11, 2013 at 15:02 — Blazemonger
– Blazemonger, Commented Apr 11, 2013 at 15:02

Blazemonger · Accepted Answer · 2013-04-11 15:06:59Z

2

Assign max-width and max-height in your CSS for all such images. No JavaScript required.

#img-holder img {
   max-width: 350px; 
   max-height: 350px;
}

or, to maintain proportions:

#img-holder img {
    max-width: 350px;
    max-height: 350px;
    width: auto;
    height: auto;
}

http://jsfiddle.net/mblase75/FKsL8/

edited Apr 11, 2013 at 15:06

answered Apr 11, 2013 at 15:01

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:12:35Z

There has many ways to implement your need. One of them is you create a class model "ShowImage" include two property width, height, or just simple is create array of images that you got from SQL and pass to view. Then you can fetch each image and show them with your expect size.

But I recommend you do not do that. Just leave server side's stuff is on server side and client side's stuff is on client side.

You can do exactly thing with php like what your function Scale did since php there has function to get dimension of given image getimagesize.

Best is you just need one function that generates thumbnail with given max size, so you can resuse it, you will not worry about such stuff around image anymore.

There are so many functions that handle thumbnail stuff that you can find, such as here <<

I don't encourage making by CSS, in the practice, you really do not want your page loads all the big images & just show them up by 350px.

Komlan · Accepted Answer · 2013-04-11 15:02:03Z

-1

You will have to use Ajax for that one. You could setup a button that would request the link via ajax to your php file. Then when you get the link back you would just display however you want it.

answered Apr 11, 2013 at 15:02

Komlan

1024 silver badges12 bronze badges

Collectives™ on Stack Overflow

Dynamic jQuery function with PHP

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related