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.
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.
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.
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!
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.