Question

It is very hard to summarize in the title what the question is exactly
so more info here…

I have an image-gallery consisting of a list element with images (and a span to display a text label).
The HTML layout looks like this:

            <div class="caracteristics_list gallery">

                <ul class="thumb">
                    <li><a href="#"><span class="video">Play</span><img src="images/gallery1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery1.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery2.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery2.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery2.jpg" alt="" /></a></li>
                    <li><a href="#"><span class="tagline">Lorem ipsum</span><img src="images/gallery3.jpg" alt="" /></a></li>
                    <li><a href="#"><span class="tagline">Lorem ipsum</span><img src="images/gallery3.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery3.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery3.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery4.jpg" alt="" /></a></li>
                    <li><a href="#"><img src="images/gallery4.jpg" alt="" /></a></li>
                </ul>                    
            </div>

This gallery has a zoom effect (taken from this guide (demo))

The catch here is that the gallery has a fixed width, and height
and an overflow: scroll (it does not grow, it is contained within the bounds of that gallery div).

That means, the zoom effect is cut of by the overflow css settings.

An example of what I have now (with broken images though) can be seen on jsfiddle here.

I fear the overflow constraint will make this method impossible, unless i take the element out of the gallery div, and position it exactly at the same spot, absolute or relative.

But first I want to make sure that is the only way to go.
Do you have any ideas?

Answer 1

Don’t take out the image, make a copy of it and show out of the div. Destroy the object when it needs to be closed