• View
• Edit
• History
• Attach
• Print
• Backlinks

ImgFocus

All sections are optional, you can remove those that do not apply to your recipe, and add new ones.

Description

Example:

Demo available at Jsfiddle:
https://jsfiddle.net/2d7qx80x/5/

This recipe finds all the images on the page and applies visual effects to hovered and/or clicked images. On clicking an image, a copy of it pops up at the center of the browser with fade-in effect; the background is dimmed and blurred at the same time to give the image a focused feel. The popup image is removed with another click or by pressing Esc, also with fading effect. The image size can be adjusted freely simply by scrolling. By pressing 'M', the image is zoomed to fit the browser visible area. When either the width or the height exceed the browser border, the popup image can be dragged, or moved using direction keys.

Images serving as hyperlinks will be automatically identified and skipped.

Installation

• Download imgfocus.zipΔ
• Place imgfocus.php in your /cookbook/ directory, the /imgfocus/ dir with all files in your /pub/ directory.
• Add to local/config.php this line:
  include_once("$FarmD/cookbook/imgfocus.php");

Configuration

Parameters related to the fade in/out time can be configured. Specifically the fade-in time of showing an image, the fade-out time of removing an image, and the autofit to browser time can be configured. An exception list can also be configured; images matching filenames listed in the exception list will be skipped.

Set these variables in config.php:

• $ImgfocusFadeInTime = 125; //default to 125 milliseconds
• $ImgFocusFadeOutTime = 200; //default to 200 milliseconds
• $ImgfocusZoomToFitTime = 100; //default to 100 milliseconds
• $ImgfocusExceptionList = array('pic1.jpg', 'pic2.jpg'); //default to an empty list

Notes

I am an academic researcher who have been using Pmwiki as my private website for documenting research progress. I found myself constantly opening figures in a new tab to get a focused view with zooming, then restoring the browser zoom and closing the tab to continue reading the page text. Gallery is not of particular interest to me as all I need is an easy way to examine and zoom a figure without affecting the page layout and disturbing the reading. The recipe is written to achieve such a goal, and such a goal only.

Note that this recipe currently works on Chrome and Safari only. Support for other browsers can definitely be added in the future as long as there are people finding this plugin useful ;)

Change log / Release notes

If the recipe has multiple releases, then release notes can be placed here. Note that it's often easier for people to work with "release dates" instead of "version numbers".

• 20160724 - first release.
• 20160726 - small bug fixes for Safari.
• 20160728 - minor performance improvement; allow an exception list

Contributors

• Recipe written and maintained by LSMeng.

Comments

See discussion at ImgFocus-Talk.