Gallery lightbox

Steak House, food and drink theme, is now available on support forum.
GK User
Tue Dec 09, 2014 9:58 am
Hey There,

How do you get images to open in a lightbox ?

Thnx :)
User avatar
Fresh Boarder

GK User
Tue Dec 09, 2014 3:27 pm
Hi,

It's a custom script, created especially for the Steakhouse theme.
User avatar
Moderator

GK User
Tue Dec 09, 2014 4:10 pm
okok so how do I make sure the correct photo opens when the photo is clicked? Do i have to do something with the classname? All my photos are clickable, but they all open the first image of the page.
User avatar
Fresh Boarder

GK User
Wed Dec 10, 2014 12:07 am
Could you please provide me with a URL to your website with your photos, either here or via PM (click the “Private Message” text underneath my avatar) so that I may analyze it? It is a lot easier for us to diagnose issues when we have a live site to examine.
User avatar
Moderator

GK User
Thu Dec 11, 2014 12:44 am
Each image should be placed inside the div containter wiht "gk-photo" class. Please check the original gallery page syntax.
User avatar
Moderator

GK User
Tue Jan 20, 2015 11:31 am
I've got a problem: In the text next to the images, I want to make a link to another website using <a href="" target="_blank">Text here</a>. However, because the text is in the figcaption class, which is located inside the gk-photo class, the link does not open, but it shows the images in the gallery.

Do you have any suggestions?
User avatar
Fresh Boarder

GK User
Tue Jan 20, 2015 3:04 pm
Hi coenboot,
Could you please provide the URL to your gallery? (here or via PM).
User avatar
Moderator

GK User
Wed Jan 21, 2015 10:34 am
In this case, please use in the frist image and paragraph class i.e. "gk-photo2" instead of "gk-photo" and please add the following css code into Steakhouse/css/override.css file, or use i.e. this plugin:
https://www.gavick.com/blog/adding-cust ... ress-theme
Code: Select all
.gk-photo2 {
  clear: both;
  padding: 35px 0;
}

.gk-photo2:after {
  clear: both;
  content: "";
  display: table;
}

.gk-photo2 > a,
.gk-photo2 > div {
  display: block;
  float: left;
  max-width: 45%;
}

.gk-photo2 img {
  float: left;
  max-width: 100%;
}

.gk-photo2 .figcaption {
  float: right;
  width: 48%;
}

.gk-photo2 h3 {
  font-size: 24px;
  padding: 30px 0;
  text-align: left;
}

.gk-photo2 p {
  font-size: 16px;
  margin: 0;
  text-align: left;
}
User avatar
Moderator


cron