Offline Documentation :
Microsoft Word Document : jonetImageViewer.doc (82k)
Text Document : jonetImageViewer.txt
(13k)
Online Documentation :
HTML Example
<applet code="jonetImageViewer.class" width=300 height=300>
<param name="num_x" value="3">
<param name="num_y" value="3">
<param name="speed" value="10">
<param name="animate" value="on">
<param name="foreColor" value="FFFFFF">
<param name="backColor" value="000000">
<param name="text" value="loading...">
<param name="fontstyle" value="Helvetica">
<param name="fonttype" value="italic">
<param name="fontsize" value="10">
<param name="image_1" value="images/a.jpg">
<param name="image_2" value="images/b.jpg">
<param name="image_3" value="images/c.jpg">
<param name="image_4" value="images/d.jpg">
<param name="image_5" value="images/e.jpg">
<param name="image_6" value="images/f.jpg">
<param name="image_7" value="images/g.jpg">
<param name="image_8" value="images/h.jpg">
<param name="image_9" value="images/i.jpg">
<param name="tooltip_1" value="This is my first image">
<param name="tooltip_2" value="This is my second image">
<param name="tooltip_3" value="None of the other images have
tooltips">
</applet>
Installation and Configuration
Download the class file. Use the "Buy Now" button
above. Copy the above code (in bold) into your HTML
(note, not the content) of your web page, then copy the class
file into the same directory. Copy your image
files into the same directory, or into a subdirectory. You can customise your
applet by changing the following parameters (some or all of
which are optional, i.e. can be omitted) :
|
width
height |
Adjust to
suit the size of applet you wish to appear on your page.
This will be the size
your images will appear as when the user clicks on a
thumbnail. See note below. |
|
num_x |
The number of images to
be displayed on the X axis (across). Defaults to 3. |
|
num_y |
The number of images to
be displayed on the Y axis (down). Defaults to 3. |
|
animate |
"on" or "off", should the image animate
into supersize when the user clicks, or should the image
just "appear" large. |
|
speed |
The speed
of the animation when the user clicks on a thumbnail. The higher the value,
the faster the animation. Defaults to 10 if omitted. |
|
backcolor |
The
background color to the applet. This is the color of
the area the user will see
whilst the images are
loading. Defaults to white if omitted. |
|
forecolor |
The
color of the "loading" text that the user will see whilst
each image is being downloaded into the applet.
Defaults to black if omitted. |
|
fontstyle |
The fontstyle of the "loading" text.
Helvetica, TimesRoman or Courier. Defaults to Helvetica
if parameter is omitted |
|
fonttype |
The fonttype of the "loading" text. Plain,
Bold, Italic. Defaults to Plain if parameter is omitted |
|
fontsize |
The size of the "loading" text. Defaults to 11 if omitted |
|
text |
The text displayed on
each thumbnail whilst the browser is downloading your
images. Defaults to "loading..." |
|
image_n |
The
name of the JPEG or GIF file, where n is an incrementing
sequential number starting at 1. Image 1 will appear
in the top left hand corner, the last image will appear in
the bottom right hand corner. You can use
subdirectories to store your images by specifying "subdirectoryname/filename.jpg" |
|
tooltip_n |
A message that will appear in
the browsers status bar when the user hovers over each
image, one message per image. Optional. |
This applet is best used with a
consistent number of images, for example a grid of 3x3
images, or 4x4, 5x3 and so on (this, of course, would equate
to 9, 16 or 15 images). However it is not totally
necessary to have 9, 16 or 15 images. For example, if
you have a grid of 4x3 images (space for 12) but you only
supply the applet 10 images, the last two "spaces" will not
load any image, but instead will simply be set to the
background color.
Autothumbnail Feature
This applet will auto thumbnail the
images you supply to fit the size of applet, and the number of
images you wish to display (num_x by num_y). So, for
example, if you have an applet size which is 300x300 and you
have 3x3 images on display, each image will be resized to
100x100 pixels.
When the user clicks on the image to "supersize"
it, each image will be resized to the size of the applet
automatically (300x300 in our example). This means that
if your images are all slightly different sizes (290x305 say)
it doesn't matter. However, note that if you have an
image which is significantly narrower or shorter than the
other images, this image may appear stretched when supersized.
You may wish to resize this image manually first.
Image Sizes and Number of Images
Note : Too many
images will slow down your users browser
Whilst this applet will work quite happily with any number
of images (e.g. 3x3, 4x4, 5x3), we suggest you restrict the
number of images to a sensible number to keep the download
speed to a sensible time.
Note : Remember
that some users still have small screen resolutions
Whilst this applet will work with any size of image, we
suggest you restrict the size to a sensible level.
Remember that some users still have their monitor resolutions
set at 640x480 and 800x600, and your page should be designed
with this in mind.
Note : Large images
may cause flicker on animation
Another consideration with extra large images is one of the
animation. The animation routine may flicker if you have
particularly large (both in terms of number of K bytes and/or
width x height) image, and you may wish to reduce the speed of
the animation, or turn animation off completely.
Note : Remember
download speeds - cater for 56k modems
As
with any web development which involves display images on a
web site, it is imperative that you keep the size of the
images to an absolute minimum. Very large images can
take a very long time to down, particularly if your user is
using a 56k dial up modem. Use JPEG compression to
reduce the number of K each image takes up. Try to keep
as small as possible.
Note : Reducing
image size to suit the applet will reduce the number of K
bytes.
Another way of reducing the size of images is to ensure that
the size (width/height) of each image is identical to the
width/height of the applet itself. Whilst the applet
will always resize the images to fit perfectly, if your applet
is (say) 300 x 300 pixels on the web page, and the images you
are using are 600 x 600, even though the images will be
resized perfectly to 300 x 300, the images will be much larger
(in K bytes) than is absolutely necessary, which means
download times for your users will be increased.
Color Hex Values and URL Target Values
More information on calculating color hexadecimal values
and what URL Target window values mean can be found
here.
Download Demo
There is a demo version which you can use to try out the
Java (TM) applet before purchasing. Demo version is fully
functional, but a demo message will always be displayed, the
image grid is limited to 3 x 3 images, and the images will
always animated and at a set speed.
Replace the name of the
class in the html specified on the documentation page with jonetImageViewerDemo.class,
alternatively use the examples supplied in the zip file. Download here : jonetImageViewerDemo.class Download including demo class file, all documentation and
examples : jonetImageViewerDemo.zip
(168k)
[home] [products]
[site map]
[license
information]
[support]
[links] | 
