Often we want to have a thumbnail image, even if it is several hundred pixels in width and heighth, that when clicked displays a larger image as an overlay to the page. It can be done.
There are a multitude of such plugins / applets out there that will accomplish this. Myself, I use the one that can be located over at RocketTheme.Com, RokBox. It is free, it works, and better yet, installs seemlessly into your Joomla51 template install. I've used it for Neptune and for Draco with stellar results.
Here is the coding:
<p style="text-align:center;"><a href="/url to large image" title=Some text" rel="rokbox[1024 771](demo)"><img src="/url to small image" border="0" alt="Some text" title="Some text" width="width of small image" height="height of small image" /></a></p>And here is how it works. The first "href" statement is the url to the large version of the image [color=#ff0044]IF[/color] it is different than the base thumbnail image. The "src" is the url on your server's structure to the image that will be the thumbnail image. They can be the same image URL. You can pass along the width and heighth of the thumbnail using the "width" and "height" statements near the end of the code. The "rel="rokbox[1024 771]" statement tell the plugin how large to make the javascript popup window. Make sure you set the dimension, "height" and "width" large enough to accomodate your image, allowing for a suitable border around your image.
It is also recommended that somewhere within the code, using the "alt" and "title" phrases, that you indicate to your users that they can click on the thumbnail image to view a larger version. Something like: A picture of me [Click for a larger image].
