You can see it HERE.
The uniqueness is that it uses the same image file for thumb and large versions. The image is scaled down automatically in proportion. There is no image specific dimension entered anywhere.
In the example all images have different sizes. If you replaced them with new images that have different dimensions it would just work without and setting alteration.
If you had changed the thumb width, all thumbs would be updated on the fly.
As far as I know this was not done before.
Comparison with existing systems:
1. dynamicdrive
Two files are needed for thumb and large. You need to create a thumb image in an image editor for each large image. If you wantde to change the thumb heights you would have to create all thumbs again.
small file is here: http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg
large file is here: http://www.dynamicdrive.com/cssexamples/media/tree.jpg
My system uses only one file.
2. cssplay.co.uk
Works again with two files:
small file is here: http://www.cssplay.co.uk/img/tdrips.jpg
large file is here: http://www.cssplay.co.uk/img/drips.jpg
3. randsco.com
Uses asingle file but you need to specify both the height ad width for each thumb in the HTML like this:
style="width:210px; height:137px;
For instance if you have an image at 560x240 px dimensions and what is the height of the thumb if you want the width to be, say, 190 px ? You need to calculate this and enter it in the HTML for each thumb.
In my system you don't enter any image specific value. You can have 10 images all at different sizes and they will all display with the same width.
The uniqueness is that it uses the same image file for thumb and large versions. The image is scaled down automatically in proportion. There is no image specific dimension entered anywhere.
In the example all images have different sizes. If you replaced them with new images that have different dimensions it would just work without and setting alteration.
If you had changed the thumb width, all thumbs would be updated on the fly.
As far as I know this was not done before.
Comparison with existing systems:
1. dynamicdrive
Two files are needed for thumb and large. You need to create a thumb image in an image editor for each large image. If you wantde to change the thumb heights you would have to create all thumbs again.
small file is here: http://www.dynamicdrive.com/cssexamples/media/tree_thumb.jpg
large file is here: http://www.dynamicdrive.com/cssexamples/media/tree.jpg
My system uses only one file.
2. cssplay.co.uk
Works again with two files:
small file is here: http://www.cssplay.co.uk/img/tdrips.jpg
large file is here: http://www.cssplay.co.uk/img/drips.jpg
3. randsco.com
Uses asingle file but you need to specify both the height ad width for each thumb in the HTML like this:
style="width:210px; height:137px;
For instance if you have an image at 560x240 px dimensions and what is the height of the thumb if you want the width to be, say, 190 px ? You need to calculate this and enter it in the HTML for each thumb.
In my system you don't enter any image specific value. You can have 10 images all at different sizes and they will all display with the same width.
Last edited:
