Creating Your Own Highslide Outline Graphics


Highslide JS comes with several stock outline graphics that can be used to highlight your popup image. Click on the thumbnails below to see just a few.

Thumbnail image Thumbnail image Thumbnail image

You can create your own custom outline graphics and place them in the highslide/graphics/outlines directory. Highslide JS for Joomla will include your outline for use along with those supplied with the plugin.

Custom outlines can add that personal touch to the popup images on your website. Take a look at some of the outlines available with Highslide JS for Joomla.

Thumbnail image Thumbnail image gallery5

Creating Your Own

The custom outlines provided with Highslide JS for Joomla were created with a small Joomla module called the 'Highslide Outline Graphic Generator'. This module takes a single jpg, png or gif image of arbitrary size and creates a png image suitable for use with Highslide JS.

You can use this same module to create your own outlines by either going to the Highslide Outline Graphic Generator page or downloading the module itself for use on your own site.

What You Need

To create a Highslide outline graphic, you will need a jpg, png or gif image. There are many graphic editing programs available that can be used to create the image. Photoshop, Gimp, Photoimpact... etc.

The image must be a minimum of 40x60 pixels. Other than that it can be of any size, however, only portions of the image, as you will see below, are of any importance. To illustrate, the following image was used to create the 'picture-frame5' outline used above.


It is a 100x100 pixel png image created with PhotoImpact. A color-coded magnified view of the image reveals the parts of the image used to create the outline graphic.


The outline graphic is a 40x3000 pixel png file created from the sections depicted above.

  • The four corners. 20x20 pixels.
  • The top and bottom edges. These are 40x20 pixels in size and are taken from the center of their respective edge. Highslide JS will repeat these sections across the top/bottom edges of the popup to fill the edge to the necessary width.
  • The right and left sides.  These a 20 pixels wide. Their height is the height of the image less the corners. The outline generator will repeat the left/right edges to fill the graphic out to the necessary height.

A magnified view of the outline graphic created from the image above would appear as follows:


Though gradient colors and textures are tempting to use in your source image, the resulting outline tends to highlight the fact that repetition is used to create the edges.


Creating your own outline graphics is fairly easy way to personalize your website and get the most out of  Highslide JS. 



Configuration: Custom Overlay (Part 2)

Beginning with version 1.0.1 of the Configuration Component, you can place parameterized text in the custom overlay. In the example HTML below, the text {popuptitle} represents a predefined parameter for the title attribute from the expanders popup image.

  2. <div style="background: black; font-weight: bold; color: white; margin-top: 2em; padding: 1em;">
  3. The title attribute of this popup is:
  4. <span style="font-size: 150%; color: white;">{popuptitle}</span></div>


The parameters that may be used are:

  1. {popuptitle} - Title attribute from the popup image.
  2. {thumbtitle} - Title attribute from the thumbnail image.
  3. {thumbalt} - Alt attribute from the thumbnail image.



Placing the HTML code above into the Custom Overlay HTML section of the configuration along with the Custom Overlay Settings pictured gives the following results (See Video).

By Michi Lauke By WiciaQ Source Unknown

Note that the Popup Caption option in the Captions section of the configuration is set to "ALT attribute from IMG Tag".



        Highslide JS Examples

Joomla Highslide er en Joomla udvidelse som integrere det medste af Highslide JS . Ken Lowther  er manden der har lavet denne programudvidelse til Joomla

Desværre er udviklingen af dette værktøj stoppet. programmerne kan stadig hentes på den oprindelige hjemmeside men er ikke opdateret til at fungere under Joomla 3.x . Jeg har lavet mindre modifikaioner der gør at det medste af Joomla highslide fungere på min hjemmeside. Jeg har tilladt mig at låne dokumentationen fra Ken Lowther's hjemmeside idet jeg her giver alt materiale , tekst som programmer Kredit og copyright til Ken Lowther  .Desuden skal man være opmærksom på at selve Higslide JS ikke må bruges i indtjenings øjemed uden en lisens fra Torstein Hønsi som har lavet Highslide JS .
Ken Lowther 's hjemmeside kan findes her Joomla highslide
Torstein Hønsi's hjemmeside kan findes her Highslide JS
                                                          Thumbnail image   Thumbnail image   Thumbnail image              
  Thumbnail image   Thumbnail image   Thumbnail image  
  Thumbnail image   Thumbnail image   Thumbnail image                                                    

HTML Content


Scrolling HTML Content


AJAX Content


Dynamic AJAX Content


Content in iframe


Display flash




 Klik her for at se se eksemplerne med kode der kan indsættet

Kode eksempler





 Configuration: Custom Overlay

This section of the Highslide Configuration enables you to define a custom overlay that will automatically be applied to all qualifying thumbnail/popups. This is most useful for createing a navigation control bar that will be used 'slideshow' style on all popups in an article. Take a look at the configuation below.


The Overlay id 'mycustom-overlay' is the name of the HTML DIV that is created to contain the HTML code in the Custom Overlay HTML section. The presence/absence of the Overlay Id is what determines whether a custom overlay will be created. If Overlay Id is not specified, no overlay will be created even though there may be HTML defined in the Custom Overlay HTML section. Like the custom overlay options in the JCE plugins, the remaining options tell Highslide JS where on the popup image to position the overlay, whether to hide the overlay when the mouse leaves the popup and the opacity of the overlay. Additionally, there is an option to restrict whether the overlay should pertain to HsHtmlExpander popups.configoverlay2

The HTML code in the Custom Overlay HTML section above defines the standard 4 navigation links. The class 'controlbar' is defined in the configuration CSS section as follows:

/* Controlbar example */
.controlbar {
background: url(/plugins/content/highslide/graphics/controlbar4.gif);
width: 167px;
height: 34px;
.controlbar a {
display: block;
float: left;
/*margin: 0px 0 0 4px;*/
height: 27px;
.controlbar a:hover {
background-image: url(/plugins/content/highslide/graphics/controlbar4-hover.gif);
.controlbar .previous {
width: 50px;
.controlbar .next {
width: 40px;
background-position: -50px 0;
.controlbar .highslide-move {
width: 40px;
background-position: -90px 0;
.controlbar .close {
width: 36px;
background-position: -130px 0;

The options specified above will cause any thumbnail/popup in this article to automatically get the navigation control bar, without having to specify anything in the thumbnail/popup definitions themselves. Click on the thumbnails below.

Thumbnail image Thumbnail image Thumbnail image


 Thumbnail image  Thumbnail image

Her er kun defineret Thumbnail id   som er Thumbnail1 samt en slideshow gruppe ved navn test3

One benefit of using this method to create the overlay is that the definition carries over from one page to another.

Thumbnail image Thumbnail image Thumbnail image

None of the thumbnail/popups in this article directly reference the custom overlay. All the definition was done in in the Highslide configuration.

You can restrict which thumbnail/popups qualify for the custom overlay by specifying either a Thumbnail id or Slideshow group in the custom overlay settings. For example, a thumbnail id of 'thumb4' in the custom overlay settings would restrict the overlay to thumbnail/popups with a thumbnail Id equal to 'thumb4' in the Id field of the Thumbnail tab in the HsExpander plugin.



Likewise, a slideshow group of 'group1' in the custom overlay settings would restrict the overlay to thumbnail/popups with a slideshow group equal to 'group1' in slideshow group field of the Popup tab of the HsExpander plugin.



Finally, the use of a custom overlay does not preclude you from using a custom overlay in the HsExpander or HsHtmlExpander plugins. This means that you can define a text overlay, for example, as well has having a navigation controlbar overlay.

Thumbnail image



Last Updated on Sunday, 15 April 2012 10:15