Question

I have a div (with class triggers) with the images and that div is in a div with id container. the positioning for the container div is set to relative which causes the overlay to appear in the bottom right corner and when the image is larger it will go outside the screen.

how can I fix this?

I read this one but that would not be a good solution for me, I can’t move it outside the main div and I can’t remove the relative positioning for the container div -> Jquery tools Overlay CSS Conflict, Image positioned under the overlay

I posted in the forum but no help was given yet -> http://flowplayer.org/tools/forum/40/32440

Answer 1

This can be fixed by moving the overlay element outside of the relatively positioned div.

You can do this easily with jquery just before you apply the overlay method, e.g.

<div style="position: relative; top: -5px;">
    <a href="#" class="overlayTrigger" rel="myOverlay">My overlay trigger</a>
    <div id="myOverlay"> Testing 123 </div>
</div>

<script>
jQuery(function($) {
    $("a[rel].overlayTrigger").each(function() {
        var el = $(this);
        var target = el.attr('rel');
        $(target).appendTo('body');
        el.overlay({
            target: target,
            top: "center",
            expose: { 
                color: '#333',
                loadSpeed: 200,
                opacity: 0.9
            }
        });
    });
});
</script>