CODEWITHSUNDEEP
phpjqueryloops
Simon Carlson
Simon Carlson

Reputation: 1989

Dynamic jQuery function with PHP

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?

Upvotes: 0

Views: 87

Answers (3)

Telvin Nguyen
Telvin Nguyen

Reputation: 3559

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.

Upvotes: 0

Blazemonger
Blazemonger

Reputation: 92903

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/

Upvotes: 2

Komlan
Komlan

Reputation: 102

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.

Upvotes: -1

Related Questions