Gallery with images only

GK User
Tue Dec 06, 2016 1:57 pm
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?
User avatar
Fresh Boarder

teitbite
Sun Dec 11, 2016 2:21 pm
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;
}
User avatar
Moderator

GK User
Wed Dec 14, 2016 11:42 am
Great - it works perfectly.
Thanks again!
User avatar
Fresh Boarder

teitbite
Sat Dec 17, 2016 3:45 pm
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
User avatar
Moderator

GK User
Fri Mar 17, 2017 11:21 am
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!
User avatar
Fresh Boarder

teitbite
Mon Mar 20, 2017 3:52 pm
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.
User avatar
Moderator

GK User
Mon Mar 27, 2017 3:07 pm
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
User avatar
Fresh Boarder

teitbite
Fri Mar 31, 2017 1:07 pm
Hi

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


cron
Remember me
Register New Account
If you are old Gavick user, click HERE for steps to retrieve your account.