Gallery with images only

Hi,
I need a gallery like the demo offers (https://demo.gavick.com/joomla25/steakh ... hp/gallery) but completely without caption text.
In other words: images floating left and right, meaning: images in two columns.
How could I realize that?

Hi

When You work with html use:

Code: Select all

<figure class="gk-photo">
<a href="/joomla25/steakhouse/images/demo/gallery1.jpg">
<a href="/joomla25/steakhouse/images/demo/gallery2.jpg">
</figure>


instead of of the presentation with caption:

Code: Select all

<figure class="gk-photo gk-photo-left">
<a href="/joomla25/steakhouse/images/demo/gallery1.jpg">
<figcaption>
<h3>Risus Ullamcorper Mollis</h3>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. </p>
</figcaption>
</figure>


than add this to override.css

Code: Select all

.gk-photo > a:nth-child(2) {
    float: right;
}


Great - it works perfectly.
Thanks again!

Hi
Glad I could help.
---
If You were satisfied with our support please let other users know on Twitter: http://twitter.com/gavickpro or Facebook: http://www.facebook.com/gavickpro

Hi there,

there is another issue with this constellation.

The second image in a row always points to the first one when trying to open the lightbox.

I guess there are some fixes needed in gk_steakhouse/js/gk.scripts.js but I can't do that by myself.

Could you help again?


Thx in advance!

Hi

I'm afraid to make it work like that script will need a complete recoding. I've just tried and honestly have no idea how to add that simply. It was not prepared to work like that. Let's make it differently than. Change the style from:

Code: Select all

<figure class="gk-photo">
<a href="/joomla25/steakhouse/images/demo/gallery1.jpg">
<a href="/joomla25/steakhouse/images/demo/gallery2.jpg">
</figure>


to

Code: Select all

<figure class="gk-photo">
<a href="/joomla25/steakhouse/images/demo/gallery1.jpg">
</figure>
<figure class="gk-photo">
<a href="/joomla25/steakhouse/images/demo/gallery2.jpg">
</figure>


and replace the css:

Code: Select all

.gk-photo > a:nth-child(2) {
    float: right;
}


with:

Code: Select all

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

.gk-photo:nth-child(2n+3) {
clear: both;
}


I will need to see how it looks like when You finish. I'm guessing what code to use at the moment, so it may not be all.

Hi,

thanks a lot - with a little change of your code it works for me.
I also added some rules for smaller screens to have images in just one column layout.

Thanks for your input!

Cheers,
Gerald

Hi

Ok. great to here that. Can You please share the final code so other users may benefit from it ?