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

ImagePopup

Questions answered by this recipe

How can I better view an image on a page? Can I have a larger view of the image in a popup?

Description

The ImagePopup cookbook is a plugin for PmWiki which after including an (:imagepopup :) directive in a wiki page gives you automatically image popups for images on a wiki page. That is when you click on an image it will open a larger popup window with the image allowing you to take a better look at the image. The popup of the image is intelligently placed such that it doesn't overlay the original image or doesn't overlap a specified surrounding box around the image so that info around the image is kept visible. Eg. see the example below in the devcontainer. If you click on another image the old popup window is removed and a new one is opened. You can also close the popup window by clicking on the image again or by clicking on the popup window.

The source code of the ImagePopup plugin is at https://github.com/harcokuppens/pmwiki-cookbook-imagepopup/, which also provides a devcontainer in which you can see the plugin in action and further develop it.

The directive (:imagepopup ) has the following options:

class

only images with this css style class get the popup handling. The css class may also be placed on a span/div tag enclosing the image tag..

width

the width of the popup window

closebutton

boolean which specifies whether to show a close button on the popup window

padding

the padding in the popup window

margin

the margin in the popup window

wrapcount

The image popup window is intelligent placed such that it does not overlap the original image. With wrapcount=n the n-th enclosing tag of the image is taken as the area which the popup window may not overlap. The purpose of wrapcount is to allow info next to the image to still be shown when the popup window is shown, where wrapcount then specifies the surrounding box around the image and its info.

with wrapcount=0 only the image is shown in the popup window, but with wrapcount=1 also the enclosing tag is shown in the popup window. With wrapcount=n the n enclosing tags are shown in the popup window. The purpose of wrapcount is

Example

The following pmwiki markup:

(:imagepopup class="popup" width="500" closebutton="false" padding="15" margin="5" wrapcount="0" :)

For example you could add a set of images with class popup in a page like this:

%width=200px class=popup% Attach:person1.jpg\
%width=200px class=popup% Attach:person2.jpg\
%width=200px class=popup% Attach:person3.jpg\
%width=200px class=popup% Attach:person4.jpg\
%width=200px class=popup% Attach:person5.jpg\
%width=200px class=popup% Attach:person6.jpg

Installation

Download imagepopup-20241031.zipΔ, unpack the files to the associated directories, and add to config.php:

Notes

The pmwiki code which applies the class attribute with the 'popup' value on the image:

%width=200px class=popup% Attach:person1.jpg

gives as html:

<span class="popup"> 
    <img width="200px" src="http://localhost:8080/pmwiki/uploads/Main/person1.jpg" alt="">
</span>

The class attribute is not applied on the img tag, but on an extra span tag which is wrapped around the img tag. That's why the imagepopup code is flexible with where the class attribute is placed: it allows that the class attribute may also be placed on a span/div tag enclosing the image tag..

Release Notes

• 2024-10-31: initial version - imagepopup-20241031.zipΔ - HarcoKuppens?

See Also

• Images

Contributors

HarcoKuppens?

Comments

See discussion at ImagePopup-Talk?