Because Kompozer is not a very sophisticated application, so if you want to add certain extras to your site, you are going to have to learn how to edit the source code! There are loads of free 'scripts' on the internet and one of the most common add on script languages is javascript. Javascript is a different programming language to HTML but most browsers have a javascript interpreter built in as well to use the code.
This step by step shows you how to make a thumbnail to large image viewer (see below). If you are making a 'portfolio' web page it could be really useful. It looks daunting but is really quite simple if you take it slowly.
Check out the Step by Steps below:
Example
Click on a small image to view the larger version
 |
 |
 |
Step 1 - Prepare your images
Before you try to start building your 'thumbnail viewer' in Kompozer, you need to prepare your images to the right sizes in Photoshop.
The example above uses images from the YSP site, so the 'large' images can be used as they are but each of them needs opening and resaving in Photoshop as a thumbnail version at a small size. Important: because the javascript has to state exactly the sizes of both the thumbnail and the large images, you should make files that are physically all the same size and proportion.
In Photoshop, open an image and then use the menu command FILE > SAVE FOR WEB. This will bring the dialogue box on the left up. To change the size of the image, use the Image Size tab (indicated by the larger red arrow left) and then change the width to a smaller value (one third or a quarter will do - this example uses 90 wide). Then save it.
Important: this javascript is a very simple one. In order for it to work all your images have to be saved in the 'root' of your site folder (i.e. not in a subfolder).
Step 2 - Add the 'head' script
First you need to tell a browser that your page uses javascript and define the script that you are going to use (i.e. our 'thumbnail' viewer).
You do this by 'inserting' this javascript into the 'Head' section of the page you are putting the viewer on. Clicking on the script link above will open the javascript text in another web page. Highlight the text and copy it.
Then in Kompozer, on the page you are placing the thumbnail viewer, click on the 'Source' tab (shown with the blue arrow) at the bottom of the work space. This will show the html code of the page. Near the top is a section that starts with '<head>' and finishes with '</head>'. After the 'title' text, paste the javascript you have just copied and click on the 'Normal' tab to return to WYSIWYG page view.
Step 2 - Add a layout table
It is recommended that you use a table to layout how your thumbnail and large images will look on your page. you don't have to It will make it easier to manage. You can place a new table within an existing table if you want.
For this YSP example a table of two rows and three columns has been set up. The bottom three cells have then been joined to make one cell for the large image.
To place the 'large image' copy this javascript, then click in the large cell where it is to be placed (arrowed) and click on the Source tab. The cursor should be flashing at the point in the page text where the javascript should be pasted. Paste it in.
The bold text in the script will now have to be edited to make it work:
1) The two dimensions 'height' and 'width' should be changed to match your large pictures
2) The 'largeimage.jpg' text must be changed to the name of one of your
large image files.
Step 3 - Add the thumbnails
Now all you have to do is add this javascript to place the thumbnail images. Copy the text and click in the first small cell of your table and select the Source tab.
Where the cursor is flashing, paste the text. Now you will have to edit this text to make it work:
1) The two references in bold to largeimage1.jpg must be changed to the filename for your first large image.
2) The reference in bold to smallimage1.jpg must be changed to the filename for your first corresponding thumbnail image
3) The height and width parameters, also in bold, must be changed to the correct parameters for your thumbnail image(s).
When you have made the changes and you return to the Normal view, you should now see your first thumbnail and large image in the table (as on the screen grab). If you do not - check your Source code and filenames again!
All you have to do now is repeat the step above, changing the corresponding filename references, for the rest of your images to complete the thumbnail viewer. Tip: copy the source code you have just put in and modified as it will be easier to change again. Save the page and test it by openig it up in Safari/your web browser. You can only do this when you have put at least two large and small images into the page code. You are not limited to how many thumbnails and large images you can use. It depends on your layout and how much copyig, pasting and editing your want to do!
If it doesn't work as you expect, you will have to check: where your image files are saved, their filenames and your source code again. Good luck!