Pictures with before|after-slider

@francbrowne: I use Hype4. Would be great, if you could provide the hype file.
Thanks in advance
Rgds Thomas

This is the Link to the hype file. Just unzip and you’re good to go.

Great - thank you very much!

Hi all,

Some of us mentioned Hype4 (which was used to create an image compare widget, see this post :link:)

For anyone who wonders what this “Tumult Hype” is, than visit the site mentioned below, to learm more about it:

To be honest, i sincerely hope that, some day, the Sparkle team will add this option to the application :pray: :smile:

Frank, unfortunately there is a problem with your hype file. After opening it with the current Hype version (4.1) the program informs that “compare” was created by an earlier Hype version and has to be upgraded. After choosing OK for upgrading it seems to be fine until I try to replace image in which case the computer crashes.

I am sorry to give you a headache but it would be so useful to have your compare widget in the toolbox.

ZbR

There shouldn’t be an issue with Hype4. I’ve just uploaded the Hype4Pro version of the same file, so give that a go and see what happens.

Tried the same - also with Hype 4 (current version) - and had no issues?! Strange :man_shrugging:

1 Like

Hello francbrowne
Hope you can help me out. I downloaded the widget and opened it directly using the “compare.html” to open. Works great, looks fantastic. However if I change the images (even after renaming them exactly as in your example and using the same aspect ratio and resolution) a page is opened the slider is shown, but no pictures.
What am I missing ?
Thanks Ben

The only thing I can think of is that the images you’ve used may be of a different type than the JPG’s included in the download. For example, using a PNG image and just renaming it as a JPG would cause an issue. If you would like to send me your images I’ll try and create a custom widget for you.

Hello francbrowne, thanks for your swift response !
Well the original images where RAW and imported in Apple Photo’s. For this purpose I exported them as jpg. When, in first instance, it didn’t’ t work I resized them to the exact pixel dimensions en resolution and renamed them the same way as your original example, but also that didn’t . So the pictures where not renamed to .jpg but exported as such.

Update:
Ha, solved !. preparing the mail I took another close look (thanks to your answer) and the pictures involved were exported as .jpeg and not .jpg ! So I changed it to .jpg and now it works great .

Thank you so much

Happy you got it sorted. Nice to hear from you.

Hello again Francbrowne,
Back again with a question, which has to do with using iFrame and your widget.
I noticed in the code instruction you provided with the widget the line “allow fullscreen”; I would love to get that working with an iFrame, but the iFrame in Sparkle is always restricted to the dimensions of the page-width (as fares I can figure that out). So how can I achieve (with am extra line of code , button or setting) that an iFrame can really use the full screen of a device, “overriding” the page-dimensions ?
As you may understand I am a real web-design novice, that’s why I use Sparkle :grinning:) but really would love to get this kind of function working.
Thanks for any suggestion
Ben

The way sparkle works requires that the embedded iframe be set up for each device separately. In truly responsive websites, the iframe could resize itself based on screen size, but with adaptive sites, this doesn’t work. The best option is to create an iframe for each breakpoint and then hide it from the other breakpoints. Repeat this for each breakpoint and all should work well.

Thanks francbrowne,
I will give that a try.
I discovered that adaptive scaling with iFrame does work by just adding the following code for dimensions ("width=“100%” height=“100%”>) and ("frame border=“0”). without the brackets of course. But the iFrame is limited to the width of the page, so nu fullscreen.
And, as said before, I really love the widget. Great design and works perfectly !
Thanks again
Ben