how to resize a thumb image when clicked

Question

Take facebook gallery as an example.I have a thumb image first, and then when the user click it, the the image preview show up, which contains the large image. Should I have save the image for both thumb image and large one, and then I access it through different file or just have a original image and control its size using html width and height, but I want to let the image has its original size scale and , but the largest height or width can not exceed my container height or width.

score 0 · Answer 1 · edited May 23 '17 at 12:03

If you use one image and have it as thumbnail, your thumbnails will take longer to load, as its the complete image file. This is the reason, we use smaller resolution images as thumbnails. You can write your own function to generate thumbnails or your original images with desired height and width.

Take a look at this tread It shows how you can write your thumbnail generator function in php.

Facebook loads the complete big image through ajax, only when you click on the thumbnail and open it in the theater(modal) mode.

Bottomline: Its better you create your thumbnails of your original full-length images, and store it as different files. This helps in loading the gallery page faster as it has only low resolution thumbs, and on click load the full length image.

EDIT Found this code written in php for creating thumbnails of images,

<?php
function createThumbs( $pathToImages, $pathToThumbs, $thumbWidth )
{
  // open the directory
  $dir = opendir( $pathToImages );

  // loop through it, looking for any/all JPG files:
  while (false !== ($fname = readdir( $dir ))) {
    // parse path for the extension
    $info = pathinfo($pathToImages . $fname);
    // continue only if this is a JPEG image
    if ( strtolower($info['extension']) == 'jpg' || strtolower($info['extension']) == 'jpeg' )
    {
      echo "Creating thumbnail for {$fname} <br />";

      // load image and get image size
      $img = imagecreatefromjpeg( "{$pathToImages}{$fname}" );
      $width = imagesx( $img );
      $height = imagesy( $img );

      // calculate thumbnail size
      $new_width = $thumbWidth;
      $new_height = floor( $height * ( $thumbWidth / $width ) );

      // create a new temporary image
      $tmp_img = imagecreatetruecolor( $new_width, $new_height );

      // copy and resize old image into new image
      imagecopyresized( $tmp_img, $img, 0, 0, 0, 0, $new_width, $new_height, $width, $height );

      // save thumbnail into a file
      imagejpeg( $tmp_img, "{$pathToThumbs}{$fname}" );
    }
  }
  // close the directory
  closedir( $dir );
}
// call createThumb function and pass to it as parameters the path
// to the directory that contains images, the path to the directory
// in which thumbnails will be placed and the thumbnail's width.
// We are assuming that the path will be a relative path working
// both in the filesystem, and through the web for links
createThumbs("upload/","upload/thumbs/",100);
?>

Ref: create_thumbnail_images

score 0 · Answer 2 · answered Feb 02 '14 at 19:56

you can use both methods:

<img src="<path_to_full_image>" onclick="show_full(this)" /> + css that resizes image to fit your container

or

<a href="<path_to_full_image>" onclick="show_full(this)"><img src="<path_to_thumb>" /></a> function will always be like this

function show_full(image) {
    // now image variable is your image or link
    var full_image_ path = this.getAttribute('src');
    // for <img> tag
    var full_image_ path = this.getAttribute('href');
    // for link
    // now you have path to full image and can insert it in popup or anywhere else
}

Of course, you have to generate thumbnail first and store it somewhere, second way will work faster cause browser has to load images with smaller weight

Tip Take a look at colorbox or fancybox

how to resize a thumb image when clicked

2 Answers2