0

I have an OpenLayers map and I try to implement a "lightbox" image gallery , in the same page.

By "lightbox" image gallery" I mean that the images/arrows/exit button cover the whole screen.

The problem is that OpenLayers map covers the lightbox gallery (see image).

I have set z-index to the map and to the lightbox divs, like so

<div id='map_element' style='width: 900px; height: 400px; z-index:1;'> </div>

//and then for lightbox
#imagegal2 img {
 height:85%;    
 z-index:90;    
}

And this does not work

How do I fix this?

enter image description here

1

I have written down a small piece of code on jsFiddle please have look it might be helpful for you.

Sample Code

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>- jsFiddle demo by farhatabbas</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://dev.openlayers.org/releases/OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<script type='text/javascript' src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox-2.6.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
<style type='text/css'>
#map {
    width:800px;
    height:400px;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function() {
    init();
});

var map, layer;
        function init(){
            map = new OpenLayers.Map( 'map');
            layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
            map.addLayer(layer);
            map.setCenter(
                new OpenLayers.LonLat(-71.147, 42.472).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    map.getProjectionObject()
                ), 4
            );    
        }
});//]]>  

</script>
</head>
<body>
<div id="map"></div>
<a href="http://lokeshdhakar.com/projects/lightbox2/img/demopage/image-2.jpg" data-lightbox="image-1" title="My caption">image #1</a>
</body>
</html>
1

For z-Index to work, you must have explicitly positioned the elements in CSS or InLine Style statements or it will be ignored:

z-index only works on positioned elements
(position:absolute, position:relative, or position:fixed

Ref W3Schools

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.