Check out this DEMO I created to showcase something interesting. In this demo, you will find a basic example of setting up a blueimp gallery, a navigation bar, and a button.
<div class="nav">nav</div>
<div class="wrapper">
<div id="links">
<a href="images/banana.jpg" title="Banana">
<img src="images/thumbnails/banana.jpg" class="image" alt="Banana">
</a>
<a href="images/apple.jpg" title="Apple">
<img src="images/thumbnails/apple.jpg" class="image" alt="Apple">
</a>
<a href="images/orange.jpg" title="Orange">
<img src="images/thumbnails/orange.jpg" class="image" alt="Orange">
</a>
</div>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
</div>
<button type="button" class="button">Click Me</button>
When a user clicks on an image, it opens and takes up the full screen. However, if the .wrapper has a relative position, the image won't occupy the full screen as the navigation bar will overlap the image.
Try it out yourself.
- Open the demo.
- Click on an image.
- Close the image.
- Click the button.
- Click on an image again.
After trying the steps above, you'll notice that the navigation bar overlaps the image.
Wondering how to solve this issue?