[The recipe is at end of this file. Fuller expls elsewhere.]
This is really v.2 of DOCclip; summarising what the problem and sol.s are.
Also: DOCimgPDF says how to show pdf docs as/like IMGs; perhaps clipped.
A] IMGs AND OVERVIEW OF HOW TO DO CLICKABLE THUMBNAILS
=======================
DOC on thumbnail images ... DOCclip
THE GENERAL PROBLEM (brief)
How to do clickable thumbnails, so can have small portraits and clicking on
them gets more info/images.
OVERVIEW OF THE BASIC SOL.s / SOL-ELEMENTS
1) A > IMG.
max-width: 50px (or height but not both) in the inner (IMG_) creates the
thumbnail from a bigger pic.
Del. the 'Q's as required to control size on the page;
and oval, and spin animation.
= RECIPE 2 =========
-------------------------------------------------------------------
If I'm going to use only pictures hosted remotely (i.e. owned by the person
shown), then the full recipe and instrs are below.
It is a "cliche" / pattern for using thumbnail photos and includes:
A) Cropping to a reduced-scale pic from a much bigger original pic.
B) Allows for, to some extent, using more than one pic of same person i.e. not
having large and small versions come from same pic.
C) The CSS stuff that lets text appear beside the pic; but not run on to the
area where the next thumbnail is.
D) Installing an Anchor for jumping to the place on the page where the
thumbnail is.
E) Fancier effects (rotating pic; oval pic;)
Instructions (explanatory notes below the recipe)
* Check the file/page has these includes in :
*Copy all this including these instructions.
* Delete surrounding DIV unless inside a
list.
* Get the thumbnail (inner) version to work by iterating over Q1 to Q5 and
getting each size right in turn to extract and scale the pic bits you want.
* Then decide whether to include extra effects: Q9, Q10
*Don't use the Q10 rotate class for the IMG, only? in SPAN.
*The outer HREF may be either an alt. home page or a full-size version of the pic
or an alternative pic.
*Use the clear:both above and below when doing thumbnails and text beside them.
* Use extra in front of the text if it's too little to wrap and needs
pushing down from upper top edge of pic