X3Photo Gallery Forums

JMM · 25 Jun 2023, 03:59

Hello, Karl,

I have a gallery that I'm working on HERE, in which I am hoping that I can change the wording of the 2 sides for the 6 comparison-sliders that I have in that gallery.

By default, X3 names the sides as Before and After. In this gallery, I would to change the wording, from Before and After to:

Comparison-slider #1: 1941 and 2021, instead of Before and After
Comparison-slider #2: 1962 and 2021, instead of Before and After
Comparison-slider #3: 1973 and 2021, instead of Before and After
Comparison-slider #4: 1981 and 2021, instead of Before and After
Comparison-slider #5: 2003 and 2021, instead of Before and After
Comparison-slider #6: 2012 and 2021, instead of Before and After

My code that I am using for each of my sliders is (only 2 shown below, but I have 6 of them in this gallery):

<div class="comparison-slider-wrapper">
   <div class="comparison-slider" data-orientation="horizontal" data-offset="0.5" data-hover="true">
      <img src="{{path}}filename01.jpg">
      <img src="{{path}}filename02.jpg">
   </div>
</div>
<br>
<div class="comparison-slider-wrapper">
   <div class="comparison-slider" data-orientation="horizontal" data-offset="0.5" data-hover="true">
      <img src="{{path}}filename03.jpg">
      <img src="{{path}}filename04.jpg">
   </div>
</div>

I do NOT wish to change the wording for my entire X3 site, nor do I wish to change the wording for that gallery. Instead, I am hoping that I can somehow add some code to each of the above samples, so that the respective comparison-sliders show their Before and After replacement text.

I would be very happy if the above is possible, but I have another question relating to the replacement text: is it posible for the replacement text to:

span 3 lines; and
be displayed in a different colour other than white (yellow, for example)?

If need be, possibly I can use my special "mybreak" CSS that you gave me last year, and that has been working fantastic the few places I'm using it on my X3 sites:

.mybreak {
  display: block;
}

The background gradient is fine.

Thank you in advance, and have yourself a splendid day.

Regards,
John

25 Jun 2023, 04:27

Just use data-before and data-after in the comparison slider container. The text is defined on a per instance basis.

<div class="comparison-slider" data-before="alt text" data-after="alt text" ...

JMM wrote:span 3 lines

Formatting isn't generally possible with CSS pseudo "content". There is some possible fix here:
https://www.digitalocean.com/community/ ... t-property

JMM wrote:be displayed in a different colour other than white (yellow, for example)?

You can modify the CSS style for the :before and :after elements.

.comparison-slider .twentytwenty-before-label:before, .comparison-slider .twentytwenty-after-label:before {
  /* your styles here */
}

The above styles woulld apply globally. It gets more complicated if you want to style on a per-instance basis, as then you would need to assign a specific class.

.myslider .comparison-slider .twentytwenty-before-label:before, .myslider .comparison-slider .twentytwenty-after-label:before {
  /* your styles here */
}

<div class="comparison-slider myslider" ...

JMM · 27 Jun 2023, 04:09

Thanks, Karl,

I am using your code:

<div class="comparison-slider" data-before="alt text" data-after="alt text" ...

to label the left & right sides, and that works great. Thank you, sir.

The other changes (spanning more than 1 line & changing the color) is much too involved for me, so I will leave those as-is.

Thanks for answering the 1st part for me.

Regards,
John

X3Photo Gallery Forums

Is it possible to change the wording "Before" and "After" for comparison-sliders?3 posts

Is it possible to change the wording "Before" and "After" for comparison-sliders?

Re: Is it possible to change the wording "Before" and "After" for comparison-sliders?

Re: Is it possible to change the wording "Before" and "After" for comparison-sliders?