Links not working in slideshow

Exhibeo
1

I’ve added links to the title and description on the images in a “Slide” theme in Exhibio 2. When published, the links work on a desktop but not on phone or tablet (iOS).

Any ides what I might be doing wrong and how to fix this?

Thanks!

2

Hi Jensenm,

I don’t think you’re doing anything wrong. I can reproduce the problem here: links work in Mac browsers, but they don’t work on an iPhone or iPad.

I’ll log an issue about this, but I think the problem may be that there’s some kind of interaction between Slide’s JavaScript code for allowing users to swipe between slides, and the browser’s detection of link clicks/presses. Links in this theme have been problematic in the past: they didn’t work at all in earlier versions of Exhibeo (before 2.0.8).

I don’t have any problems following Thumblie links on my iPhone.

3

Thanks for your answer. That’s a shame. I hope a fix can be found.

On a differnet note, I also experience that the title and description text in “Slide” doesn’t scale when you reduce the screen size. So on a phone screen I end up with a tiny image and massive text that won’t fit in the screen. Any suggestions on this?

4

You can override the font size.

If you look at the CSS file that this gallery outputs, you will see that there is a section at the bottom which is labelled “User editable styles”. This is what I see, for a test document output by Xway:

#gallery .xb-slide-figcaption h1
,#gallery figcaption h1 {
	font-family: Helvetica,"Helvetica Neue",Arial,"Nimbus Sans L",FreeSans,sans-serif;
	font-size: 34px;
	color: #fcfcfe;
	text-shadow: 1px 1px 1px #333; /* User editable */
}

#gallery .xb-slide-figcaption p
,#gallery figcaption p {
	font-family: "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",FreeSans,sans-serif;
	font-size: 20px;
	color: #f3efef;
	text-shadow: 1px 1px 1px #333; /* User editable */
	font-weight: bold; /* User editable */
}

You can change that using Xway’s CSS Markup.

  1. Copy the first style and edit it so you’re left with just the font size:
#gallery .xb-slide-figcaption h1, #gallery figcaption h1
{
   font-size: 34px;
}
  1. Replace the font size value with a different value, add !important after it, and paste it into the CSS Markup section of the Page Inspector (for the page that contains the gallery):
#gallery .xb-slide-figcaption h1, #gallery figcaption h1
{
   font-size: 72px !important;
}
  1. Preview in a browser to see if this made a difference. The title font should be twice as large: not what you want, but this is just a test. Adding !important is necessary because Exhibeo adds the CSS file via JavaScript instead of outputting it in the head section. This means it gets added after Xway’s output. We plan to change this in a future version of Exhibeo.
  2. Change the font size to a different value. You could use media queries, or container queries, but here’s a simple way to make the font size relative to the size of the screen (or more accurately: viewport):
#gallery .xb-slide-figcaption h1 ,#gallery figcaption h1
{
   font-size: 2vw !important;
}

2vw means “2% of the viewport width” (see Measurements section in the Xway User Guide). Experiment with different values. You can also use floating point numbers, such as 2.4vw.

Note that #gallery is an ID selector which corresponds to the ID you assign in Xway (I used “gallery”).

  1. Use the same method to change the font size for descriptions. E.g. paste something like the following after the first CSS markup:
#gallery .xb-slide-figcaption p, #gallery figcaption p
{
	font-size: 1.2vw !important;
}
5

Thanks Jeremy.

I tried to add the different style changes you mentioned in your points 2, 4 and 5 to the CSS Markup section of the Page Inspector for the relevant page. I tried them one at the time. Unfortunately none made a difference when I saved and previewed in browser :frowning:

6

I should add that I do have a second Exhibeo 2 Slider (with testimonials) on the same page. Not sure if this might make a difference?

7

Ok, scrap my last comment. I removed the second slider and tried again and it still doesn’t work.

8

Did you change #gallery to use the ID you’ve set in Xway?

You can see it working from my test document here. (Only the first couple of images have titles and descriptions.)

Share a test URL if you get stuck.

9

No, I didn’t. What’s this ID and where do I find this ID? I couldn’t figure out how to get the “CSS file the gallery outputs” so I just copied exactly what you wrote thinking that would be it. Obviously not!

10

If you add a component or other box to Xway, you should see that there is a Name/ID field in the Box section of the Box Inspector. This identifies the box. Unless you match this with what is added in the CSS Markup section, it’s not going to work. The simplest thing to do would be to name it “gallery” in Xway.

You can see the CSS file that Exhibeo outputs (and Xway modifies slightly) by exporting your site (File/Export Site), choosing Show Export Folder from the File menu, and then looking in the css folder. It will probably be called exibid_slide-styles.css.

11

Since you mentioned having two galleries on your page earlier, that would also require duplicating the selector in order to apply to both of them.

For example if your two components have gallery1 and gallery2 in the name field, you can adapt the code above as follows: (be careful with commas and that the pairs of names match)

#gallery1 .xb-slide-figcaption h1, #gallery1 figcaption h1,
#gallery2 .xb-slide-figcaption h1, #gallery2 figcaption h1
{
   font-size: 2vw !important;
}

#gallery1 .xb-slide-figcaption p, #gallery1 figcaption p,
#gallery2 .xb-slide-figcaption p, #gallery2 figcaption p
{
	font-size: 1.2vw !important;
}
12

Ah, that ID. Ok, that was simple. Now it works!

I named them ‘gallery’ and ‘testaments’ so no issues there.

Thank you both!

1 Like