Free Before and After Widget for your web site

This isn’t actually a custom Bric as such (although someone is welcome to create one), but it’s a sort of widget that you can add to a Blocs website through the Video Bric. It’s a fully responsive “before and after” image effect that can be customised just by adding your own images. You can check it out and download the widget from HERE. Although it’s been created in Temult Hype, you don’t need the application to customise it - just replace the two images files and add to your page.

One caveat - try and keep the image proportions as they are.

10 Likes

Thank you for sharing this! I can see this being very helpful for some people!

Thank you! It seems to work well … Fotografia

A nice implementation of the widget. It’s just a shame that we can’t insert it as an HTML snippet in Blocs.

By the way - did you notice the one-click option? Just single click the slider icon to see it working.

Yes. I also think it would be nice implementation for Blocs. Do we challenge the brics programmers?
I had not noticed what you discovered … strong

Hi @hendon52, I am really interested about the Before & After Widget but your link doesn’t seem to work anymore…?

Hi @chrishsl, Some of my websites are being migrated to new servers, so they may not have propagated yet. Suggest you try again later or maybe tomorrow.

It is working again, thank you @hendon52 !!!
One quick question, is there a way to adjust the position of the slider if I want to start from the middle for exemple?

The slider was made in Temult Hype so you would need that application and the original project file to make any changes to the slider position on startup. The reason it’s positioned off-centre is because the position changes as the slider enlarges or reduces in size. When it’s dead centre, it can move to the extreme right or left when viewed at different device widths. I guess with a little more work I could create it so it is always centred - maybe I’ll have a go and post back with a revised file.

ok, that make sense ! Anyway, thank you for the explanation and for sharing this widget @hendon52 !

Thanks for sharing! I do quite a bit of digital imaging, so it’ll be super helpful to show this done using this widget!

Discovered just now you actually made this using Tumult Hype. Very clever indeed. Been using Hype for many things over the years in different projects, such a great tool. Really love what you did there. Would you be ok with sharing the .hype file? Just wondering how you managed to do this. Just curious.

Attached is the Hype File. You will notice that this is largely driven by 4 javascript snippets. This is to make the slider automatically function when clicking on the arrows, rather than just dragging with a mouse. You could, of course, make a simpler version without the javascript. This would then simply be a draggable image container with content overflow set to hidden. Anyway, have a play and see how it works. You will find many of these javascript snippets on the Hype forums, so have a look around over there - it’s a great resource for hype users.

compare.hype.zip (1.3 MB)

Hey thanks! I’ll have a fiddle with it. Must admit my Hype skills might have gone a bit rusty and haven’t been in the forum panels there for a while. It is always nice to pick someone else’s brain for inspiration. Thank you!

Hi @hendon52, is there a way to set the exact size of the before/after widget, and not just 16:9 4:3 … ?

Very Cool! Thank you for bringing your work to our attention. Not to mention the zips. Awesome!

Because the widget is a combination of HTML/CSS and Javascript, it would, under normal circumstances, be embedded through the addition of HTML in the page and some extra head code. This means that it should act the same way as any other bric - essentially, it will take on the size of the column it sits in.

For some unknown reason, embedding the HTML code in blocs app doesn’t work. To overcome the problem, I recommend setting up the widget to display in a video bric, which is essentially a responsive iFrame. This allows the widget to display correctly. But, just like any other bric element, the video brick takes on the width of the column it sits in. So, if you want a smaller widget, adjust the underlying column width to the size you want. The only thing you have to consider is the aspect ratio. Just make sure that the images you use are the same aspect ratio as the ratio you set for the video bric.

Thank you @hendon52 for the explanation.My images don’t have the same aspect ratio unfortunately, I will have to crop them then