Resizing an image and offering a show original option using css/html/php/jquery

In my site template I want to place an image code which re-sizes images with a width larger than 910px down to 910px, but leaves those with a width smaller than 910px. If the image is resized it should offer a show original image option.

I would like to implement something like this http://w开发者_运维知识库ww.mangareader.net/94-8-3/bleach/chapter-1.html

This is the code I have so far:

HTML:

<img src="http://localhost/manga2anime/upload/Bleach/1/03.png" class="resize">

CSS:

.resize {
    max-width: 910px;
    max-height : auto;
}

Easiest would be if you also stored the img's width in your database. If that's the case, something like this will do:

<?php
   // Connect to DB etc.

   $result = mysql_query("SELECT 'img_path', 'width' FROM table");

   if(mysql_row_count($result) != 0){
       while($row = mysql_fetch_array($result)){
            $img = "<img src='" . $row['img_path'] . "'";
            if($row['width'] > 910){
                $img .= " class='resize'";
                // OR
                // $img .= " width='910'";
                echo "<a onclick='showOriginal()'>Show Original</a>";
            }
            $img .= " >";
            echo $img;
       }
   }else{
       echo "No images found.";
   }
?>

If the img is already loaded and your php isn't that handy, you can also adjust it with jQuery:

function adjustImage(){
   if($('img#needed_img').width() > 910){
       $(this).addClass('resize');
       // OR
       // $(this).attr('width', '910');
       $('#show_original_button').show();
   }
}

And just call the above function when the document loads (so not in combination with the jQuery ready function). I dont know what your HTML looks like, so its hard to also come up with a working 'show original' function.. but i think something like a lightbox or modal would be most useful in your case to show the original img, for it wont alter your template and just 'sit on top of it'.