HOME ➔ SUPPORT ➔ Community ➔ General CourseLab issues ... Zooming into displayed images
Zooming into displayed images
  View type:
Here's something people might find useful!!
OK so we have a module page and a picture. Once the picture is scaled to fit the page you loose a lot of information, so how do we get to view the full detail using the following considerations:
(a) Not having to use a pop up window to a remote URL that may or may not be available.
(b) To have it work from a CD without needing any other resource like active net access.
(c) To work on an L/CMS.
(b) Tp keep the module a self contained item.
(c) NOT having to do a lot of hand coding and modification to the courselab output files.
>>
EASY!! we seperate the images and zooming from courselab but still use courselabs functionality to provide the display platform.
>>
First the tools you'll need (all free OSS)..
1. a simple image editor, The Gimp for example
http://www.gimp.org/windows/
2. a simple html editor, AMAYA from WC3
http://www.w3.org/Amaya/
3. TJPZOOM, Janos Toth's nice js scripts
http://valid.tjp.hu/tjpzoom/
>>
Here is a brief step by step
1. take your image and make a scaled copy that is slightly smaller than the area you have available to display it in.
2. make a simple web page with AMAYA using the html codes for TJPZOOM substituting in your images and URLs. Put the image into a DIV with a page relative origin of 0,0.
3. Save the page you made and the image files in a named folder WITHIN the courselab folders.
3. Embed the html in your page using an iframe with a relative link.
AND THEN
Run the page(s).....
you get the html delivered scaled image shown on your page and when you scroll the mouse over it you can zoom into the original hi-res image.
DON'T forget to include the html page and images in your bundled module AND remember to use links for the js files and images that are relative to the html page itself ONLY. No http://linky/link (BAD) just /zoom/script.js or /zoom/zoompage.htm (GOOD)
It looks very slick and works rather nicely.
I'm using this in another project where I wan't the users to be able to zoom into images to see fine detail the images start at a size of around 3000 x 2000 pixels and can be up to 8000 x 8000 so are not easy to display on a standard PC monitor without hiding everything else.
I might get a sample posted towards the end of the week for anyone interested.
 
A guide to this will be on the friendsofcourselab site in a day or so.
 
 
Files available from tomorrow on http://friendsofcourselab.info .
There will be a standalone which explains step by step how to do this and the base files I used to make this content work.
 
 
 
Also I've made the process as simple as possible, if you can open and save an image, cut and paste text and files then you can do this too [:D]
 
 
 
 
All in place, thanks for looking people.

I've added a minor information page, the link is in the text on the home page (last paragraph 'here' is the link). I've looked at the capibilities of visitors PCs and pulled out a few interesting statistics and added two important take home messages or thoughts if you prefer based on these.
Subject:
Message options
No additional options