Page 1 of 1

Creating a then/now image slider in an image hotspot

Posted: Wed Mar 27, 2024 6:47 pm
by On This Spot
Hello, I'm making a virtual tour where I want to incorporate either a then/now image slider or fader within an image hotspot.

The tour I want to put them in is here: https://onthisspot.ca/virtual/provost

We have a historic walking tour here where you can see the then/now capability I have in mind: https://onthisspot.ca/cities/provost/provost

A slider might be a big ask but I was thinking there could be a fade from one to the other toggle as a stop-gap solution. I'm not super capable with editing the skins so any precise guidance would be appreciated.

Re: Creating a then/now image slider in an image hotspot

Posted: Fri Mar 29, 2024 7:32 am
by Tony
The easiest way is to use one of the many free or paid JavaScript sliders you can find on Google. Once you've built in, then add an iFrame that loads the component. Here's a sample of a slider over a panorama. https://tonyredhead.s3.ap-southeast-2.a ... /index.html

preview.jpg
preview.jpg (354.64 KiB) Viewed 2110 times

The sample was created based on code from using code created by Chris Pennington https://codepen.io/Coding-in-Public