> pictools > doc > slideshowGuide
> pictools > doc > slideshowGuide
Pictools: How Things Work
V3.3 (445)
Slideshow Howto
How slideshows work - starting with how the button gets there
button labelled "Slideshow", in context

When a directory has a captions file, gendirs.php creates one subdirectory for each "segment" in that file. That subdirectory will contain two files, index.php and localcaptions.cap. When viewed from a browser, the index.php file will be seen as a thumbs page. The upper left corner will contain a "Slideshow" button, as shown to the right.

Displaying the Slideshow button

Gendirs consults property thumbs.template to get the name of the template for creating the index.php file. The standard value is /library/thumbsparms.php. This template starts with code to set a few "thumbsparm..." properties to values derived from the captions file. Among these is thumbsparm.pictures which has the body of a page derived from the segment.   This code is generated on the site manager's local computer and uploaded to the server. Once there the code is executed when the page is requested. As its final step the thumbsparm code gets a file name from property thumbs.wholepage–the default is /library/thumbs.php–and includes it so it is the page the user sees. There is not yet a Slideshow button.

The header of thumbs.php assigns values to two  properties of interest to our story. The first assignment is to page.toprow; its value is set from property thumbs.toprow, which which by default has names /library/dirbar.php and /library/thumbstitle.php as rows to load atop the page. The Slideshow button is in the second of these and has an href attribute. It is now visible, but still inactive. The second assignment is to property bodytable.addtoclassattr. It is set in such a way as to add a separate attribute: onload="enableSlideshow()".

Thumbs.php is a standard Pictools page and thus includes beginpage.php which in turn loads /scripts.js, home of the Javascript function enableSlideshow. This function (finally) activates the Slideshow button by wrapping it in an <a> tag, with its href taken from the href attribute of the slideshow button. The latter is a link to /library/SlideShow.php?dir=$dir, where the $dir field was filled in by php code in thumbs.php.

Running the Slideshow

When the user clicks a slideshow button, /library/SlideShow.php is invoked as the page to view. This page has almost no predefined content. Instead it parses the captions file to generate a list of Pic objects, one for each picture in the segment. It also defines three buffers--one each for the previous, current, and next visible pictures. Control of these is relegated to /library/slideshowdefs.js which is loaded in the header. The <body> tag in SlideShow.php has onload="startShow()". This invokes startShow in slideshowdefs, which starts the show. As its last act, SlideShow.php provides the popup control panel by including /library/slidescontrol.php.

Create /images/Loading.gif

The animated "Loading . . ." gif was originally in a paint file which was saved 8 times with different combinations of circles blackened. The original sequence was designed to display the numbers in Gray code. This was far more clever than good looking, so the current version is created thusly:

convert   -dispose background -delay 0 \
	Loading0.png -transparent white -delay 25 \
	Loading1.png -transparent white \
	Loading2.png -transparent white \
	Loading5.png -transparent white \
	Loading4.png -transparent white \
	Loading7.png -transparent white \
	   -layers Optimize -loop 0  Loading.gif
        
 
Copyright © 2023 ZweiBieren, All rights reserved. Feb 5, 2023 17:05 GMT Page maintained by ZweiBieren