Home/ Questions/Q 8237491
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-07T19:29:08+00:00

I’m using the Maximage jquery plugin to create a fullscreen slideshow. The plugin allows

  • 0

I’m using the Maximage jquery plugin to create a fullscreen slideshow. The plugin allows you to include HTML elements which are layered over the top of the background image. I would like to use HTML to provide a caption for each image and have the caption layered on top of my site footer (separate from Maximage). I have tried various positioning but cannot find a way to do this, the caption is always behind the footer due to the order of the elements. Does anyone have any idea how I might do this? My code is as follows after is has been rendered by the maximage plugin –

<div role="main">
<img id="cycle-loader" src="img/ajax-loader.gif" style="display: none;">
<div id="maximage" class="mc-cycle" style="width: 1282px; height: 294px; overflow: hidden; display: block;">
   <div class="mc-image " data-href="" style="background-image: url("img/showcase/1-redmire.jpg"); position: absolute; top: 0px; left: 0px; display: block; z-index: 8; opacity: 1; width: 1282px; height: 294px;" title="">
      <div class="slide-caption">
         <p>Bespoke house in Mercaston, Derbyshire. Image produced for client issue.</p>
      </div>
   </div>
</div>
</div>
<footer>
   <a id="arrow_left" href=""></a>
   <a id="arrow_right" href=""></a>
   <div id="controls"></div>
</footer>

And the CSS –

footer 
{ 
   bottom: 0px; 
   position: fixed; 
   width: 100%; 
   background: url(../img/bg-black.png) repeat; 
   color: #FFF; 
   height: 55px; 
   line-height: 55px; 
   border-bottom: 1px solid #333;  
}
.slide-caption 
{ 
   position: fixed; 
   z-index: 998; 
   bottom: 20px; 
   left: 20px; 
   color: #ffffff; 
   background: #000000; 
   padding: 5px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your problem seems to be one with general HTML style limitations. A general rule when working with z-indexes is to z-index elements that are on the same level in the document tree: so in your example, it would be z-indexing div[role="main"] and z-indexing <footer>. With some modern browsers this can be accomplished with block level elements, but it is inconsistent if you are trying to accurately fallback to older browsers or are positioning elements absolutely (this is why Henrik was unable to replicate your issue). I do not know of a way to slide a foreign element in between an absolutely positioned parent and a child element… if someone does, please let me know.

    The easiest solution that I can see would be to pull your caption out and write it dynamically to the footer with jQuery. This can be done easily with Cycle’s before() and after() animation callbacks (http://jquery.malsup.com/cycle/options.html).

    I have dummied up an example for you in a jsfiddle:
    http://jsfiddle.net/eDR4v/1/

    Hopefully this helps.

    • 0