Is it possible to change the wording "Before" and "After" for comparison-sliders?
Posted: 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:
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:
The background gradient is fine.
Thank you in advance, and have yourself a splendid day.
Regards,
John
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
Code
<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)?
Code
.mybreak {
display: block;
}
Thank you in advance, and have yourself a splendid day.
Regards,
John