Image Thumbnails

Question

It is possible to produce thumbnails from an image within a viewport slicing them? Possibly with Jquery! Like in this example but without using the canvs element. Galleria does something like that, but it's pretty slow on loading all the pictures in the cache and then resized them. I'm using a preloader but I don;t know how to resize the pictures as I need all the thumbnails being 50X50. Thanks in advance for your help!

Answer 1

Theres an image cropping plugin available. Not entirely sure what you mean though.

Answer 2

Any large amount of thumbnail generation should really be done before the user ever visits the page. You would save more time running them all through a thumbnail generator beforehand and just using files.

I'm going off the assumption that because they are 50x50, there's going to be a lot of them.

Answer 3

The fact that you mention jQuery implies that you want to do thumbnail generation as part of a webpage?

If this is the case, as Sneakyness implied it is a bad idea to do this on the client (in a web browser). If you plan on doing this on the client, you might as well do <img src="/images/really_large_file.jpg" border="0" height="50" width="50"> because generating the thumbnails on the client (in a web browser) will require the visitor to download the full version of every single image you want to thumbnail. If those images are large, this will be very slow. Even 100 images of 10KB each is 1MB of images. Over a dial-up modem they would require about 4 minutes to download.

The thumbnails should be generated on the server either in advance (as they are uploaded) or dynamically (as they are requested by the visitors).

If you really still want to do this (NOT RECOMMENDED), you could do it with something like:

<script type="text/javascript">
function maintainAspectRatio(img) {
    // retrieve a new copy of the image that is not sized 50 x 50
    var newImg = new Image();
    newImg.src = img.src;
    // get the ratio of the width to the height
    var ratio = newImg.width / newImg.height;
    if (ratio > 1) {
        // ratio is >1, preserve width 50, scale height
        img.width = 50;
        img.height = 50 / ratio;
    } else if (ratio < 1) {
     // ratio is <1, preserve height 50, scale width
        img.width = ratio * 50;
        img.height = 50;
    }
}
</script>
<!--
load image as 50 x 50 "thumbnail" to reserve screen space
this will most likely result in the aspect ratio being corrupted
we will use JavaScript to fix this
-->
<img src="http://www.google.com/intl/en_us/images/logo.gif"
    border="0" height="50" width="50"
    onload="maintainAspectRatio(this);">