Before / After Slider


(Andrew Eio) #1

image-comparison-slider.zip (513.1 KB)
Hi All,

I am a designer, not a programmer, therefore this request for some guidance from all the more experienced hype programmers.

I have found a javascript “before/after” slider in html5 that uses javascript to allow the user to scrub left and right to reveal between the two images, which is available here.

https://codyhouse.co/gem/css-jquery-image-comparison-slider/.

I am trying to get this working within a Hype environment.

I have tried two routes, the first was to try and rebuild in hype by adding the assets (css/js) into the resources folder then building with the src="${resourcesFolderName}/ links for the header links. Then inserted a HTML Widget and added the body html again with the src="${resourcesFolderName}/imagename.png but this failed to work.

I then thought of using an HTML Widget with an iframe which links to the external url and this works fine, but I need for this to work locally offline. So I tried to link to the html within the resources file but breaks the file, and looking at the browser debug all the linked files (css/js) seem to be broken.

I have attached a file to help explain what I am trying to achieve, and link to the working slider (by iframe)

Can anyone offer some ideas on how to make this work.

Thanks in advance,

Andrew


#2

Maybe this thread will help you?: Responsive reveal of a picture


(Andrew Eio) #3

Olav

Many thanks for your prompt reply and link to exactly what I am looking for

Cheers

Andrew