User Tools

Site Tools

J!TrackGallery J!2.5 demo J!TrackGallery forum J!TrackGallery GitHub


Fullscreen maps

Displaying fullscreen maps

J!TrackGallery offer a fullscreen feature. Css styling is used to put maps layers above all other layers. This is done using the z-index property. Higher z-index items are displayed above others.

Unfortunately, defining the correct z-index to put the map layers above all other layers is tricky and sometimes not possible:

  • in some case you may want to keep some items above the full screen map
  • in some templates, z-index are defined with very high values to put menus in front as an example.
  • When using different templates on one website, z-index may be variant.

z-index values must be adjusted for a correct rendering of J!TrackGallery fullscreen maps. You can achieve this in two different ways:

  • modify your template CSS
  • modify J!TrackGallery CSS
  • you can also modify both

Modification can take place in:

  • J!TrackGallery CSS stylesheet template override
  • in your template CSS stylesheet override (see template documentation)

Modifying Template CSS

Further examples are indicative and must probably adapted to your website.

jsn_boot_pro example

#jsn-rightsidecontent {
    z-index: 7;
#jsn-sitetoolspanel {
    z-index: 9;
#jsn-menu {
    z-index: 8;

Modifying J!TrackGallery CSS

Before starting, see usefull J!TrackGallery manual/ template override information

1- Create or modify css stylesheet user_templates_folder/css/jtg_style.css (*)
user_templates_folder real name and location depends on your Joomla install, …it is located somewhere under /template folder

2- add the following css to this file and increase z-index as necessary

file =user_templates_folder/css/jtg_style.css
#jtg_map.fullscreen {
    z-index: 200;

How to find z-index

You can use firebug /Mozilla to search for z-index values

manual/tracks/fullscreen.txt · Last modified: 2014/05/12 22:23 by cseguinot