Figure Gallery

Hi,

Is it possible to have the <figure class="gk-photo gk-photo-left"></figure> and <figure class="gk-photo gk-photo-right"></figure> be shown next to each other? Now the one will be shown below the other. I would like to have only the images next to each other, but still use the 'link' function. Hope you know what I mean.

Thanks in advance.

Hi

I'm afraid I do not understand. Can You please tell me the url where I'll be able to see it ?

Hi,

Sorry for my late reaction. The url is: http://www.ahmeijer.nl/cms/index.php/we ... #CV-Ketels. If you scroll down on this page, you will see two images above from each other instead of next to each other. Hope this helps .

Hi

I think problem is with html structure. You have:

Code: Select all

<figure class="gk-photo gk-photo-left">
    <a href="/cms/images/ahmeijer/werkzaamheden/tegelwerk5.jpg">
        <img alt="Tegelwerk" src="/cms/images/ahmeijer/werkzaamheden/tegelwerk_thumb5.jpg">
    </a>
</figure>
<figure class="gk-photo gk-photo-left">
    <a href="/cms/images/ahmeijer/werkzaamheden/tegelwerk4.jpg">
        <img alt="Tegelwerk" src="/cms/images/ahmeijer/werkzaamheden/tegelwerk_thumb4.jpg">
    </a>
</figure>


while I think it should be:

Code: Select all

<figure class="gk-photo gk-photo-left">
    <a href="/cms/images/ahmeijer/werkzaamheden/tegelwerk5.jpg">
        <img alt="Tegelwerk" src="/cms/images/ahmeijer/werkzaamheden/tegelwerk_thumb5.jpg">
    </a>
    <a href="/cms/images/ahmeijer/werkzaamheden/tegelwerk4.jpg">
        <img alt="Tegelwerk" src="/cms/images/ahmeijer/werkzaamheden/tegelwerk_thumb4.jpg">
    </a>
</figure>


Hi,

I've already tried this and it works in some sort of way. But now when I click on the image only the first image of this code will be displayed in the pop-up, and the second image will not be displayed.

Hi

I can see You've sorted it out by adding a description for images. If You want me to try again please put it back as it was with:

Code: Select all

<figure class="gk-photo gk-photo-left">
    <a href="/cms/images/ahmeijer/werkzaamheden/tegelwerk5.jpg">
        <img alt="Tegelwerk" src="/cms/images/ahmeijer/werkzaamheden/tegelwerk_thumb5.jpg">
    </a>
</figure>
<figure class="gk-photo gk-photo-left">
    <a href="/cms/images/ahmeijer/werkzaamheden/tegelwerk4.jpg">
        <img alt="Tegelwerk" src="/cms/images/ahmeijer/werkzaamheden/tegelwerk_thumb4.jpg">
    </a>
</figure>


so I'll overwrite the css to force it show side by side.

Thanks. I've put it back as it was.

In the meantime I will add some extra images underneath.

Hi

Please add another selector "gk-photo-50" to this class just not to break rest of the styling. Than copy this to override.css

Code: Select all

.gk-photo-50 {
    clear: none;
    width: 50%;
    float: left;
}

.gk-photo-50 > a {
    float: none;
    max-width: 100%;
}


Hi,

I've tried both codes below and added the css code to override.css in the template. With both no result.
Perhaps other options?

Code: Select all

<figure class="gk-photo gk-photo-left gk-photo-50">
    <a href="/cms/images/ahmeijer/werkzaamheden/tegelwerk5.jpg">
        <img alt="Tegelwerk" src="/cms/images/ahmeijer/werkzaamheden/tegelwerk_thumb5.jpg">
    </a>
</figure>
<figure class="gk-photo gk-photo-left gk-photo-50">
    <a href="/cms/images/ahmeijer/werkzaamheden/tegelwerk4.jpg">
        <img alt="Tegelwerk" src="/cms/images/ahmeijer/werkzaamheden/tegelwerk_thumb4.jpg">
    </a>
</figure>

Code: Select all

<figure class="gk-photo gk-photo-50">
    <a href="/cms/images/ahmeijer/werkzaamheden/tegelwerk5.jpg">
        <img alt="Tegelwerk" src="/cms/images/ahmeijer/werkzaamheden/tegelwerk_thumb5.jpg">
    </a>
</figure>
<figure class="gk-photo gk-photo-50">
    <a href="/cms/images/ahmeijer/werkzaamheden/tegelwerk4.jpg">
        <img alt="Tegelwerk" src="/cms/images/ahmeijer/werkzaamheden/tegelwerk_thumb4.jpg">
    </a>
</figure>

Hi,

Oops. Stupid me! I've should have enabled the overide.css in the template as well. Thanks!

Hi

So I assume it works now Glad I could help.