Code Examples for Header Image
Using Hyperlink Anchors with the Slideshow
(Commercial Unlimited License only)
The Slideshow Feature uses its own DIV Container, so therefore any <A HREF=“…”>
tag will break across that DIV Container and will stop working, as well as will break HTML conformity.
When using the Image Extension feature together with the Slideshow feature any hyperlink anchor that shall get applied to the currently displayed slideshow image needs to get passed as parameter.
For any slideshow participating image, which shall have a link attached, the corresponding .image.html
file needs to be in place in the same directory as the related images are. For example:
- Slideshow Image
himg_c10s4.png
» Associated Image Extension File ishimg_c10s4.image.html
- Slideshow Image
himg_c10s4_001.png
» Associated Image Extension File ishimg_c10s4_001.image.html
- Slideshow Image
himg_c10s4_002.png
» Associated Image Extension File ishimg_c10s4_002.image.html
- and so on…
This following example shows the Image Extension file for the image named himg_c10s4
using the url=…
parameter for the Image tag:
This is some Text or HTML above the image... #__image[url=http://www.somwhere.com] This is some Text or HTML below the image...
When needing the same URL for all slideshow images, then copy the Image Extension file to the other images using the above shown naming convention.
Opening Hyperlink Anchors in new Browser Window
Per default these anchors (as described above) are opened in the same browser window the page is currently in.
To change this behaviour is currently only possible global for all slideshows handled by Header Image by modification of the Slideshow Script:
mod_header_image_ce/libs/slideshow.js
// Replace this function: activateLink: function() { if (this.anchor) { self.location.href = this.anchor; } }, // With this function: activateLink: function() { if (this.anchor) { window.open(this.anchor); } },
You may add parameters to the window.open
as documented for this JavaScript function here...