JGU Imagescroller

Use the image scroller shortcode to add a slideshow to your page. An example of such an image scroller/slider can be found on the university´s start page: www.uni-mainz.de

If your Shortcode is still visible on the published page, activate this plugin in the Dashboard  → JGU Tools  → Plugins

Warning: ⚠️ Be careful to edit the Shortcode in the Text mode only. Editing in the Visual mode may cause the shortcode to fail entirely due to HTML Tags in the Code.

Some plugins require administrative preparations (JGU Auth, JGU Downloadcenter). Follow the instructions in Dashboard  → JGU Tools  → Plugins  → Activateand we will set up the plugin for you.

Choose between a JGU Imagescroller as slideshow, a JGU Imagescroller that refers to a selection of your blog pages or a JGU Imagescroller that refers to any internet adress/URL.

Parameters of the JGU Imagescroller

  • autoplay: automatically run through all images. By default, this feature is active. To deactivate it, set the parameter to autoplay="off".
  • loop: pictures will loop infinitely. By default, the loop feature is active. To deactivate it, set the parameter to loop="off".
  • duration: sets the time until the next image is shown in seconds. Example: duration="5"
  • max_width:  sets the width of the JGU Imagescroller in pixels. Example: max_width="450"
Please note: to avoid mixing Shortcodes and HTML-Code, better enter shortcodes in the editor's text mode (not in visual mode).


Image sizes & ratio

All images in the imagescroller should have the same proportions and sizes. We recommend using images with a 16:9 ratio and a pixel size of 626x352.

These are the recommended pixel width sizes for the different positions on the web page:

  • Middle column and Open University: 625px
  • Start page (one column): 836px
  • Right column: 300px


Link JGU Imagescroller to an internet address/URL (or without links)

If the images of your scroller need to be linked to internet addresses outside your blog, use the shortcode imagelink to achieve this.

First, upload the images for your scroller to the media area of your blog. Then, copy the address (URL) of any image from its field 'URL', which can be seen when editing the image in the media area of your WordPress blog.

Example for an image scroller using the imagelink attribute:

[imagescroller] [imagelink imageurl="" url="http://www.zdv.uni-mainz.de" subtitle="Dies ist nur ein Test"] [/imagescroller]

The attribute imageurl contains the full URL of the image to be used.
The attribute url contains the full URL of the link target, which is the internet address that should be delivered to the user if they click on the image. If you do not want to link to any target page, omit that attribute altogether.
The attribute subtitle may contain text that should be displayed as a caption text at the bottom of the image. You may omit this attribute, but we recommend using it since it improves the accessibility of your web content.

You may enter any number of imagelinks. However, we recommend using no more than about 10, if you consider the times it takes to load all these images for anyone with a slow network connection...