Chrestothèque

This post describes a slideshow plugin for a b2evolution blog v5 or v6.
Pour voir la version française cliquer ICI.

I previously developped a slightly enhanced version of the b2evolution Photoblog (explanations in the forum). The enhancements were 1/ the possibility to display either an index limited to the current category or a full index and 2/ the possibility to control the automatic change of the photos belonging to the current category. Unfortunately, this hack do not works with the present version of b2evo, so I do not porpose any longer to download it.

The new plugin (download : see at the bottom of page)

I developped a plugin for my b2evolution blog which displays a slideshow from images files found in the same directory. A rendering function of the plugin makes it easy to insert the slideshow in a post. The slideshow shown below is set to display its interface in english, with a 440 pixels wide image refreshed every 10 seconds. See another demo in the photoblog (click).

|< < o>>| 

>>>>>>

 * ?

Slideshow (delay: 10s)

At start, the image changes every 10 sec but you can go to the next with a click on the image or make some settings with the nav bar which is dimmed at the top of each image. In fullscreen mode use the left or right arrow keys, the numeric keypad to change speed, the minus key to exit.
 
To copy an image, stop the automatic display [o] and then use your mouse right button ...
 
To clear this help window : click here !
 
©Jacques Louvel 2010-2020

Note the navigation bar which is present (partly dimmed between image change) at the top of the image. It includes options to stop or start the slideshow or to set its speed or to manually change to the previous or next photo. It also have a fullscreen option (*) and a short help one (?).

Below, the main functionalities of the plugin:

• It inserts a slide show awyhere in a post using a code similar to the Wikipedia links. With the right parameter, the slideshow may be insterted in the "teaser" location.
• The code used here is for instance :
  { { speed=10 ; size=440 ; path=photos/vieille_auto ; position=1} }
  One can see that it is composed of parameters sepparated by ';'
  NB spaces are only used here for clarity - do not insert spaces in your code
• The language used for the service messages is the one choosen for the post. It is possible to - easily - create traduction files for more languages starting from the two given templates in the locale dir.
• The speed of the slideshow is selectable. The parameter 10 in this exemple means 10 seconds delay between 2 images; the possible values are from 1 to 99 seconds; 0 displays only a static frame with the first photo.
• The size of the image window is set with the parameter 440 (in pixels). Standard values are available : 1024, 720, 620 and 440, the last one optimized for a textual blogs with lateral bar; intermediate values are allowed between 100 and 999 pixels.
• The path to the image files is given in the last part of the code (the path is necessarily in the directory "your-b2evo/media/blogs")
• Position of the slideshow : one can choose to have the slideshow in the post body (parameter position=1), as in our example, OR in the "teaser" (head) position (parameter position=0). The parameter is to be added at the end of the code, following the path.

More optionnal parameters not used in our example
(see the list of all parameters below)
• List of images : Version x.1 : a parameter (list=file.txt) allows to pass the name of a text file which contains a list of image files to be displayed. Optionally each file name is associated with a small text or comment to be displayed under the image.
• Index of the images : it is possible to have in the text body, an thumbs index of the slideshow images (parameter index=1)
• Full screen mode : the slideshow may run fullscreen (to trigger the fs mode use the ((*) option in the command bar or the '+' key. Escape or '-' key to exit). During full screen one may use the keyboard arrows to go to the next or previous image (as in normal mode, this stops the automatic slideshow)
• Deep Zoom : the parameter zoom=0 asks to display a deep zoom image (using the free script openSeaDragon). This means that the visitor may zoom in the image as deep as the level determined by the blogger when preparing the image. See details on the openSeaDragon site. See a sample HERE.
• B2evo Compatibility : the present version of the plugin (v3.1) is compatible with versions 5 or 6 of b2evo. The plugin is completely re written to allow first clearer keywords in the code and second to make all parameters optional (except of course the path to the images).

A few tech points : since I'm not a super expert in b2evolution, I found easier to develop an independant slide show page (in fact before I came to b2evo). Handling the images files is done with some PHP code which prepares some HTML code, the display of which is controlled through some javascript code. The HTML slideshow page (or code) is inserted in any post inside the body or inside the teaser position, according to the value of the 't' parameter.

The whole set of parameters (all optional except the path to the images)
The default parameters may be set in the file jl_b2diarama.ini.inc (careful !)

• Template { { speed=n ; width=n ; path=xxxxxx ; position=0 ; etc...} }
• lang (or locale) = used for the help texts : the one choosen for the message; add your own by modifying the locale file
• interval (or speed) = n => pace of the slideshow (in seconds)
• width (or size) = image width (use default values : 440,620,720,800,1024). Some skins have a limited available width (often 440px). Then the image width will be automatically reduced to 440px. A "trick" : if you want to impose your choice, give a width which is 1px less than the default value (for instance 719 instead of 720).
• path (or dir) = start !!after!! "your-b2evo-blog/media/blogs/"
• h (or help) = 0 => 1: display help box at start (default 0)
• e (or ext) = jpg,png => allowed file extensions, coma separated (default jpg,jpeg,png,gif,tif,tiff )
• r (or ratio) = 0.xx => image w-h ratio (default 0.75) - put 0.67 for 24x36 or 0.55 for 16/9
• m (or mode) = 1 => image mode (default 1=undetermined images number) ; 0=only one image changing with time
• c (or circ or loop) = 0 => slideshow mode (default 0 stop at the last image) ; n>0 = loop n times
• f (or first) = # => # of the 1st image to be displayed
• d (or last) = # => # of the last image to be displayed
• o (or order) = x => order images presentation (default = 2, do nothing i.e. date of the file on most systems), -1=inverse order
  other values : according to their name 0=random, 1=alphanum, -2=inverse alphanum
• l (or list) = name of image list file (text file : 1 line = file-name.ext ; legend to the image). Alternatively a default file for the list of images to display may be used with the name is jlb2_(name-of-the-image-dir).txt => if this file is present in the valid image dir and no other list file is given, it will be used automatically
• t (or teaser or position) = 0 => image position (default 0=teaser, head of the post body) ; 1=in the post body ; 2=only index in the body ; 3=in the post body w index
• i (index) = 0 (default, no index) >0 thumbs index (clickable miniatures) added in the body
  other values 1 => zone width =632, image width =120 / 2 => zone width =632, image width =90 / 3 => zone width =100%, image width =100
• j = 0 => how the index photos be displayed (default 0 in a colorbox) =1 replace the teaser image (head of post)
• z (or zoom or osd) if present and >=0 ask for a deep zoom image (open seadragon, OSD) ; if given, z is the default zoom value
  OSD should be copied in /b2evo-dir/plugins/b2slideshow_plugin/openseadragon/ (default) or you should change the var $diarama_osd in the ini file
• zv (or zvis) = 1 => visibility ratio (default 1) use 1.05 to prevent right-left borders to be displayed
• zt (or ztype) = dzi type : 0, deep zoom (default) ; 1, simple image w built pyramid ; 2, id 1 without built pyramid
• zwh = 0 dis/allow dzi image horizontal wrap : 0, false (default) ; 1, true
• zwv = 0 dis/allow dzi image vertical wrap : 0, false (default) ; 1, true
• s (or skip) = n => # of the image ti skip in colorbox slideshow (usually the first, which is use as teaser)
• all parameters are optional except the path to the images (see the jl_b2diarama.ini.inc file)
• => in case of only 1 param is given, it is considered to be the path even without the keyword "path=" or "dir="

Compatible skins. B2evo skins are not all built exactly with the same template and some need a special care for the slideshow to run *as a teaser* (a slide show should run in the post body whichever the skin used). The followin skins are compatible with the slideshow as teaser : photoblog (of courser), evopress, nifty_blue (yellow, green), nifty_corners, dating_mood, pixelgreen. And others, not yet tested, which may be also compatible. Since version 3.1 of the plugin, an attempt is made to check the compatibility when the slideshow is launched; a warning is given if a possible non-compatibility is found.

Compatible browsers. The plugin and a post with a slideshow have been tested under the main browsers (recent versions) : MSIE 9 or 11, Firefox, Opera, Google Chrome and similar. All are Ok (except a small problem of height/width ratio in full screen for Chrome)

To download the new plugin click HERE

Once downloaded, unzip the file in a sub dir with the same name as the zip file (check that the unzip process di not add an additional sub-dir level). In windows, this should be the default behaviour. Then copy the full sub-dir in the "plugins" sub-dir of your b2evo instance. Finally, install the plugin from the back-office Main settings/Plugins.

When you first want to use the slideshow, it may be necessary to validate the corresponding "text renderer" at the bottom of the right column when editing your post in expert mode.