Use of pop-ups and slideshow effects

General

With the help of this module web authors can create pop-up effects and galleries with simple and modifiable HTML elements.

Pop-up effect: Extension of Bootstrap Modals
either an embedded gallery or a gallery to be opened via pop-up effect with playback function

Embed

To use the functions, php/hs.inc must be loaded in the page header.

<?php …
 require_once('php/hs.inc');
 seite(__FILE__);
?>

For your information

Content provided via pop-up will not be printed!

Predefined functions

Image pop-up (hs_image())
Pop-up with custom HTML content (hs_html())
Pop-up with linked page as content (hs_url())
Image gallery (hs_slideshow())
Complex example

Image pop-up
`string hs_image(string $image_small, string $image_large, string $text [, array $style])`

Creates a (usually) small image that is enlarged on click.

Parameters

`$image_small`	filename/URL of the small, immediately visible preview image
`$image_large`	filename/URL for larger image (visible in pop-up)
`$text`	HTML text as caption (visible in pop-up)
`$style`	`array('property' => 'value', …)` – can also be empty: `array()` Properties: `img_style` – CSS style(s) for small image `img_alt` – alt tag for small image (text) `img_title` – title tag for small image (text), default: "Click to enlarge" `img_w, img_h` – width and height (pixels), default: auto detected `content_width` – maximum width (pixels) of pop-up content, default: `800`

Return value

HTML text - can be output with echo.

<?php echo hs_image('/tu/images/campus-200.jpg', '/tu/images/campus.jpg',
                    'The <b>Central Auditorium Building</b>',
                    array('img_w' => '100',
                          'img_style' => 'float:right;border:1px solid orange')); ?>

Pop-up with custom HTML content
`string hs_html(string $link_text, string $html_text, string $title, [, array $style])`

Creates a clickable text - when clicked, a pop-up window with HTML content opens

Parameters

`$link_text`	link text that is clickable (HTML is also possible)
`$html_text`	HTML code - will be displayed after expanding
`$title`	title of the popup window (text)
`$style`	`array('property' => 'value', …)` – can also be empty: `array()` Properties: `w, h` – width and height (pixels) of the pop-up window (default: auto detected)

Return value

HTML text - can be output with echo.

<?php
echo hs_html('Click me!', '<h1>You clicked me &hellip;</h1> <b>Great!</b>', 'Click test'); ?>

Pop-up with linked page as content
`string hs_url(string $link_text, string $url, string $title, [, array $style])`

Creates a clickable text - when clicked, pop-up window opens with document of URL as content

Parameters

`$link_text`	link text that is clickable (HTML is also possible)
`$url`	web address of the page to be expanded For web pages in TUCAL layout `?content` can be appended, which will display only the content (without frame) in the pop-up.
`$title`	title of the pop-up window (text)
`$style`	`array('property' => 'value', …)` – can also be empty: `array()` Properties: `w, h` – width and height (pixels) of the pop-up window (default: auto detected)

Return value

HTML text - can be output with echo.

Notes on Planning

<?php
echo hs_url('Notes on Planning', 'planung.html.en?content', 'Planning', array('w' => '500')); ?>

Image gallery
`string hs_slideshow(string $directory, string $type, [, array $style])`

Creates an image gallery from all JPEG images (file names ending in .jpg or .JPG) in the $directory:

Sorts alphabetically by file name
Displayed for an aspect ratio of 16:9
If there is only one image in the gallery, controls are hidden and the predefined aspect ratio is ignored
Full screen function
Playback function
Thumbnails
- height 40px
- Naming convention: Original image.jpg → Thumbnail image-t.jpg
- Generate
  on Windows
  e. g. with IrfanView:
  
  File → Batch conversion/renaming
  
  (•) Batch conversion + rename
  
  Batch conversion options
  
  [✓] special options active (resize, etc.) → Set
  
  [✓] Resize
  
  (•) Set one or both sides: height: 40 Pixel
  
  Batch rename options: Name (pattern): $N-t.jpg
  on Linux
  with convert command (ImageMagick package):
  
  # create from all .jpg files of the current directory # create a new file each with ...-t.jpg, maximum height 40 pixels for d in *.jpg; do convert "$d" -resize x40 "$( basename "$d" .jpg )-t.jpg"; done
No JavaScript available
- If styles are defined for the gallery, the first image is displayed large with description, other images below with 40px height.
- Otherwise all images with 40px height.
If available, the gallery description is displayed, otherwise the description of the first image.

Parameters

`$directory`	directory name containing the image and preview files to be displayed (can also be relative to the directory of the PHP script)
`$type`	type of display `'intern'`: Show inside the page (internal). `'popup'`: show in own "window" (pop-up).
`$style`	`array('property' => 'value', …)` – can also be empty: `array()` Properties: `intervall` – time interval for automatic display (playback function) in ms (default: 5000 ms) `img_style` (for type `'popup'`) – CSS for preview image `div_style` (for type `'popup'`) – CSS for preview image paragraph including caption `more_text` (for type `'popup'`) – text for a hint about more images below thumbnail

Return value

HTML text - can be output with echo.

Examples

`string hs_slideshow(array(array('image.jpg', 'Description 1'), array(...)), string $type, [, array $style])`

Creates an image gallery with caption from all image files listed in the first field. No thumbnails are necessary.

Return value

HTML text - can be output with echo.

Example

PHP code → Image gallery

Complex example

PHP code (with many comments) → Result page

Pop-up effects basics

Basic framework with modification options that can be used for all pop-up elements.

<div class="hs-modal">
  <a href="#" ... data-toggle="modal" data-target="#hs-modal" data-width="1200" data-height="400"
     data-title="Pop-up" data-vertical="top">
    Link
   </a>
  <div class="modal-footer">
    Attached content, e. g. description for the content
  </div>
</div>

Parameters

These general parameters with default values can be omitted.

`href`	Link that is called when JavaScript is not active. Must contain at least "`#`"
`data-width`	Default value: `800` Default value for images: image width Specified in pixels Sets the maximum width
`data-height`	Default value: `auto` (content) Default value for URL: `100%` (content + title) Use only `data-width` if possible
`data-title`	Default value: empty title for the op-up
`data-vertical`	Default value: `central` Examples: `top`, `bottom` values from CSS (`vertical-align`) can be used
link	May contain all elements except new `a`-elements (links).

Image pop-up

Creates a link that displays a pop-up with an image when clicked.

<div class="hs-modal">
  <a href="/tu/images/campus.jpg" data-toggle="modal" data-target="#hs-modal" data-image>
    <img src="/tu/images/campus-200.jpg" alt="The Auditorium building">
  </a>
  <div class="modal-footer">The <b>Auditorium building</b></div>
</div>

Parameters

`href`	link to image
`data-image`	without content

Pop-up with custom HTML content

Creates a link that, when clicked, displays the HTML content from the element with the class "modal-body" in a pop-up.

<div class="hs-modal">
  <a href="#" data-toggle="modal" data-target="#hs-modal" data-html>
    <strong>Click me!</strong>
  </a>
  <div class="modal-body">
    <h1>You clicked me &hellip;</h1>
    <p><b>Great!</b></p>
    <hr />
    <a href="https://www.tu-chemnitz.de/">Go to TU-Chemnitz homepage</a>
    <hr />
    <button id="click">Click me!</button>
  </div>
</div>

Parameters

`data-html`	without content
`modal-body`	content of the pop-up

Pop-up with linked page as content

Creates a link that, when clicked, displays the linked web page within the pop-up.

<div class="hs-modal">
  <a href="https://www.tu-chemnitz.de/mb/" data-toggle="modal" data-target="#hs-modal"
     data-remote-frame="/mb/?content" data-title="Faculty of Mechanical Engineering">Link to Mechanical Engineering</a>
</div>

Parameters

data-remote-frame

Link to the content to be displayed
Embedding via iframe

Image gallery

When creating a gallery, you can choose between two options – either as a direct display or as a pop-up, which is opened via a preview image..

Option 1

<ul data-gallery="intern" data-interval="5000" class="test">
  <li>
    <a data-desc="The first image" href="images/sportfest/campussportfest_01.jpg">
      <img src="images/sportfest/campussportfest_01-t.jpg" alt="The first image">
    </a>
  </li>
  <li>
    <a data-desc="The second image" href="images/sportfest/campussportfest_02.jpg">
      <img src="images/sportfest/campussportfest_02-t.jpg" alt="The second image">
    </a>
  </li>
  <li>
    <a data-desc="The third image" href="images/sportfest/campussportfest_03.jpg">
      <img src="images/sportfest/campussportfest_03-t.jpg" alt="The third image">
    </a>
  </li>
</ul>

Parameters

`data-gallery`	Default value: `intern` `intern`: gallery is displayed directly `popup`: gallery is opened via a preview image as popup
`data-interval`	Default value: `3000` Specified in ms Can be omitted.
`data-gdesc`	Only for `popup` Description of the gallery Can be omitted.
`data-desc`	Description of the image
`style`	`popup`: CSS styles that are then applied to the gallery preview `intern`: CSS styles that are then applied to the gallery Can be omitted.
`class`	`popup`: CSS classes that will be applied to the gallery preview `intern`: CSS classes that will be applied to the gallery Can be omitted.
`href`	Link to the image Link if JavaScript is disabled
`src`	Link to the thumbnail

Option 2

<div class="hs-modal">
  <a href="#" data-toggle="modal" data-target="#hs-modal" data-html
     data-title="Sports Festival Gallery">
    Click me!
  </a>
  <div class="modal-body">
    <?php echo hs_slideshow('images/sportfest'); ?>
  </div>
</div>

Description

This is a mixed variant with the slideshow command and an HTML pop-up to combine the advantages. This way a pop-up gallery can be created very quickly from a folder with the settings options of the pop-up.

Note

Nested pop-ups are not possible.

Use of pop-ups and slideshow effects

General

Embed

For your information

Predefined functions

Image pop-upstring hs_image(string $image_small, string $image_large, string $text [, array $style])

Parameters

Return value

Pop-up with custom HTML contentstring hs_html(string $link_text, string $html_text, string $title, [, array $style])

Parameters

Return value

You clicked me …

Pop-up with linked page as contentstring hs_url(string $link_text, string $url, string $title, [, array $style])

Parameters

Return value

Image gallerystring hs_slideshow(string $directory, string $type, [, array $style])

Parameters

Return value

Examples

string hs_slideshow(array(array('image.jpg', 'Description 1'), array(...)), string $type, [, array $style])

Return value

Example

Complex example

Manual use

Pop-up effects basics

Parameters

Image pop-up

Parameters

Pop-up with custom HTML content

You clicked me …

Parameters

Pop-up with linked page as content

Parameters

Image gallery

Option 1

Parameters

Option 2

Description

Note

Image pop-up
`string hs_image(string $image_small, string $image_large, string $text [, array $style])`

Pop-up with custom HTML content
`string hs_html(string $link_text, string $html_text, string $title, [, array $style])`

Pop-up with linked page as content
`string hs_url(string $link_text, string $url, string $title, [, array $style])`

Image gallery
`string hs_slideshow(string $directory, string $type, [, array $style])`

`string hs_slideshow(array(array('image.jpg', 'Description 1'), array(...)), string $type, [, array $style])`