php display image and add zoom

Question

I don't know if I'm doing it right, but I have a bunch of images I'm retrieving from the page and since I don't wan a page to have too many images of big sizes, I have displayed them with a much smaller size but I have attached each of them to a link so that when a user click on a picture it opens that image with its original size. The problem is that those images are really big and my client wants the ability to zoom in and out which I don't know how to do. The client thought about resizing the size of the window (in the browser) but sadly it resizes all other windows (for the application) and this is not ok because he needs to see the image and compare it with some information on the app. SO Below is the code of the images displayed and after the user have clicked on the image.
small images

  $count = 0;
       echo " <div class=\"row\">"; 
   while($row = $result->fetch_assoc()) {
       $ext = $row['Extension'];
      $ImageID=$row['ImageID'];
       if(($count%3) ==0){
        echo "</div>";
         echo " <div class=\"row\">"; 

            echo "  <div class=\"col-sm-2\">";
            echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
            echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
            echo"</a></div>";      


        ++$count;

       }else{
                echo "  <div class=\"col-sm-2\">";
            echo " <a href=\"viewimage.php?ImageID=$ImageID\" class=\"thumbnail\">";
            echo '<img id=\"myImg\" src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'" style=\"width:130px;height:130px\"/>';
            echo"</a></div>";
            ++$count;

       }

   }
 echo "</div>" ;

Image after link is clicked

<?php
$ImageID = $_GET['ImageID'];
$query = "Select * from $dbname.Images where ImageID = $ImageID";

$result = mysqli_query($conn,$query);


$row = $result->fetch_assoc();
$ext = $row['Extension'];
echo '<img src="data:image/$ext;base64,'.base64_encode( $row['Image'] ).'"/>';


?>

I don't know what to do at this point, how can I provide that zoom in/out functionality?

Answer 1

First things first: Generally don't add base64 encoded images directly into your html. Link to them, and host them on your server. It is quite an expensive way of making images appear, both for the server, database, and for the client. It also makes it impossible for the client to cache the images, and it means that each repeated page visit causes the entire data to be sent.

Make two folders on your webservers:

images/

thumbnails/

Put your small images in "thumbnails" and large images in "images" And if you need to, store the image-names in your database, so you can do something more like this:

echo '<a href="thumbnails/'+$imageName+'"><img src="images/'+$imageName+'"></a>'

If you want to, you can do an on-demand resizing of your images, using gd-lib. The basic idea being, in pseudocode:

//Before the echo command, but after fetching the filename from database
if thumbnails/$imageName exists
  then use gdlib to read images/$imageName and save a small version to thumbnails/$imageName 

This approach is also applicable if you want to use client-side javascript to show larger versions on the same page. See my page finalkey.net for an example http://finalkey.net/gallery