it seems linking thumbnail to large image manually one by one not a clever way, anyone can help with this issue?
How are the
pages output? Are the images in static HTML pages or is the page output by server side scripting (for most today, that's PHP)?
With static pages, there's no good way other than manually coding them in. An often seen really cheesy "shortcut" is to scale the huge images down to thumbnail size and use one image for both, this is a really bad idea. It makes your pages terribly slow.
If they are dynamically output, and you adhere to some sort of image naming convention, it's pretty easy. You may even be able to do this via Javascript. let's take your large image,
sample.jpg
and if you **always** name your thumbnails like so,
sample-tn.jpg
You can do something like this.
<?php
foreach ($images as $img) {
list ($file,$extension) = preg_split('/./',$img);
$thumb = $file . '-tn.jpg';
$output .= "<p><a href=\"$img\"><img src=\"$thumb\" alt=\"click for enlargement $img\"></a></p>
}
echo $output;
If you want a purely JS solution, that may give you some ideas.
An aside, Worpress does work in the same way. If you set up your thumbs at say 100px X 50px, it will generate thumb files named sample100x50.jpg, and a "medium" file, with the full sized image named as the original was named.
