Skip to content


Subversion checkout URL

You can clone with
Download ZIP
A javascript multimedia viewer for Concerto and other software
JavaScript PHP Perl
Fetching latest commit...
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


|                                                       |
| Concerto Viewer				                        |
|                                                       |

1. About
2. License
3. Usage
	A. Stand-Alone Viewer
	B. Included Viewer
4. Changelog

| 1. About
This package is released as part of the Concerto project. Please
for updates and more information.

This package was developed by Adam Franco (Educational Technology,
Middlebury College) in conjunction with the rest of the Concerto and
Harmoni projects.

Copyright (c) 2005 Middlebury College

| 2. License
GNU General Public License (GPL)
See the LICENSE.txt text file for text of the license.

| 3. Usage of this package

This package can be used in two ways:
	A. As a stand-alone application (requires PHP)
	B. Included in another application's [X]HTML (PHP optional)

	| 3. Usage of this package
	|		A. Stand-alone viewer
	If PHP is availible on your webserver, you can run the viewer as a
	stand-alone application.
	The 'index.php' file is a PHP script which creates an XHTML page with
	a viewer as its only element. As well, the script will resize the
	viewer to fit the entire browser-window.
	To test the stand-alone viewer with a sample slideshow, simply point
	your browser at the 'index.php' file in this directory.
	To open the viewer with a particular slideshow, pass the URL
	(relative or absolute) of your slideshow XML file to the viewer as
	the 'source' parameter:
	As well, you can specify which of the included themes you wish to use
	as the default:
	Alternatively, you can specify the URL of your own style-sheet to use
	instead of the included ones:
	You can also use Javascript to open a new window with no menues,
	location bar, etc. Please see the example4.html file for an example
	of this:
	| 3. Usage of this package
	|		B. Included viewer
	As an alternative to stand-alone usage, the viewer can also be placed
	directly into any HTML file. 
	The Viewer is made up of a self-contained Javascript library and some
	(optional) style-sheets to theme the result. Both should be included
	in the <head> element of your HTML document. One or more viewers can
	be put on a page by placing div tags in the body of the HTML
	document, giving each a unique id, the class 'viewer', and
	size/position styles. A Javascript command for each viewer in the
	<body> tag's 'onload' attribute will create and run each viewer.
	Put the following lines in the <head> section of your HTML document
	to provide access to the viewer classes:
		<script type='text/javascript' src='viewer.js'></script>
	As well, you should also add the following lines the head section to
	import one or more style sheets for the viewer to give you nice icons
	instead of html buttons.
	One style-sheet:
		<link rel="stylesheet" type="text/css" href="main/themes/white/style.css"/>
	Multiple style-sheets (user-selection supported by Mozilla/Gecko
		<link rel="stylesheet" type="text/css" href="main/themes/white/style.css" title="White"/>
		<link rel="alternate stylesheet" type="text/css" href="main/themes/black/style.css" title="Black"/>
	Somewhere in the body of your HTML document you need to put a div
	element in which the viewer will be placed. This div element should
	have class, 'viewer', and a unique id. You should specify both the
	height and width via CSS. As well, it is important that you nest the
	viewer div inside another div element. The viewer will force the
	'position' style of its div element to 'relative' in order to
	acomidate its absolutely positioned children. If the viewer element
	is not nested inside another div it may cover up subsequent content.
	An example is below:
			<div id='viewerA' class='viewer' style='height: 500px; width: 650px; position: relative;' />
	Finally, to create the viewer you must place the following Javascript
	command in your HTML with the id of your viewer element and the URL
	of your source XML file as arguments:
		Javascript:new SlideShow('viewerA',	'');
	This line is customarily put in the <body> tag's 'onload' attribute
	to start the viewer when the page is loaded:
		<body onload="Javascript:new SlideShow('viewerA', '');">
	Alternatively, the command could be placed in a button's 'onclick'
	attribute to start the slideshow when a button was clicked.
	Please look at the following files in the 'sample/' subdirectory for

| 4. Changelog
Version 2.1.5
 - Fixed image caching for destination URLs with ampersands in them.
   URLs that had ampersands stored as '&amp;' in the source XML were not being
   converted back to '&' when doing the caching, rendering the url invalid.
   All URLs are now stripped to '&' for JS caching calls and converted to '&amp;'
   in printed URLs.
Version 2.1.4
 - Loading indicator is now centered on the screen and displayed during image loading.
Version 2.1.3
 - Default theme is now black
 - Themes specify a body background-color style, so pages including
   the viewer will need to override that body style with their own.
   This was required for properly theming the full stand-alone window.
 - Stand-alone viewer now has additional margins on left and right.
 - Fixed IE sizing issues.
 - Default slide playing time is now 10 seconds
 - Added a compare button to open a second viewer on the same slide.
 - Added style-sheet choosing.

Version 2.1.2
 - Fixed an invalid alignment property in the media-buttons rendering.

Version 2.1.1
 - Now supports default media size
 - Now puts a download link under Tiff images to allow their access if the browser
   doesn't support their inline display (i.e. FireFox)
Version 2.1.0
 - Now uses urldecode to support url-encoded source and theme urls that may 
   contain &'s and parameters themselves.
 - Now text-left/right/top/bottom slides  now don't throw errors if no media are
 - Now allows for text-only and media-only slides, both centered on the viewer.
 - Added a default "title" and "noscript" elements to the stand-alone viewer to improve
 - Moved stand-alone viewer's onresize declaration out of the body tag and into
   the script to allow for valid XHTML 1.0.
 - Now can take in a slide index with which to start display. Useful for displaying
   items in the middle of large result sets.
 - Now supports slide-by-slide loading via AJAX.
   A slideshow-skeleton is loaded with a 'source' attribute and the text-position
   element for each slide. The content is then fetched for the slide as the
   load() or display() is called on the slide.
 - Can now extract media sizes from outline xml.
 - Now doesn't die on lack of title value
 - Now reliably sizes media in Firefox/Gecko, IE 6, Safari

Version 2.0.0
 - No changes as this is the first release of Viewer 2.
 - Major differences between Viewer 2 and Viewer 1 are below:
 	- Now doesn't require PHP
 	- Now fully object-oriented Javascript
 	- Slideshow definition is now up to the user, no more 'input modules'.
 	- Now uses an XML file for the Slideshow source.
 	- Can now be included into an [X]HTML document.
 	- All theming is done via CSS
 	- Can be used without CSS support
 	- User-specified themes/style-sheets can be used.
Something went wrong with that request. Please try again.