Javascript resize on every image load

Question

I've got this code:

while ($row = mysql_fetch_assoc($result1)) {
echo "
<a href='#'id='VV".$row['id']."'>
<p>".$row['title']."</p>
<p>".$row['date']."</p>
<img onload='scale()' id='II".$row['id']."' src='../res/videos/img/".$row['img']."'/>
</a>
<script type='text/javascript'>
function scale(){
    var image = document.getElementById('II".$row['id']."');
    var width = image.width;
    var height = image.height;
    if (width > 150) {
    image.style.width = '150px';
    image.style.height = 'auto';
    }
    width = image.width;
    height = image.height;
    if (height > 80) {
    image.style.height = '80px';
    image.style.width = 'auto';
    }
    width = image.width;
    height = image.height;
}
VV".$row['id'].".onclick = function() {
var Result = '".$row['id']."';
location.href='loged.php?Result=' + Result;
     }
</script>
";
}?>

I want the resize function be called on every image loaded, but it is called when the last image is loaded, and only the last image takes effect. What should i change?

Answer 1

You are placing the script for each $row. I would have 1 copy of the javascript function and then you can call that single function N times passing the id to the function. This way it will work for all rows, not just the last (since the last copy of the JS function will be the only one called as you've found out).

Short answer: make your function better by taking a id parameter and only put that function on the page once. allow you foreach to call said function with each id.

Answer 2

I think you are trying to fit an image in a 150x80 area. If that's the case, I suggest you use CSS background-size: contain to do the scaling for you.

while ($row = mysql_fetch_assoc($result1))
    echo "<a href='#' id='VV" . $row['id'] . "'>" .
           "<p>" . $row['title'] . "</p>" .
           "<p>" . $row['date'] . "</p>" .
           "<div id='II" . $row[id] . "' " .
                "style='width: 150px; " .
                       "height: 80px; " .
                       "background: url(../res/videos/img/" . $row['img'] . "); " .
                       "background-size: contain; " .
                       "background-repeat: no-repeat;'>" .
           "</div>" .
         "</a>";

It'd be a good idea to abstract out the styling into a CSS file.

while ($row = mysql_fetch_assoc($result1))
    echo "<a href='#' id='VV" . $row['id'] . "'>" .
           "<p>" . $row['title'] . "</p>" .
           "<p>" . $row['date'] . "</p>" .
           "<div id='II" . $row[id] . "' " .
                "class='my_img_box' " .
                "style='background: url(../res/videos/img/" . $row['img'] . ");'>" .
           "</div>" .
         "</a>";

The CSS

div.my_img_box {
    width: 150px;
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
}