You can integrate a 3party slider, I did it before and works pretty well.
Flickr as a embedded slider for free.
@atani: You can do it by putting two slides side by side (horizontally) and making the image in the first slider go first before the image of the second slide sequentially.
Alex Park
1 Like
Not sure, but may be this (github) source could be helpful
1 Like
BTW - i found another site with the following article about “Before & After Sliders” Jscripts:
(may there is something useful in here)
You can download a ready-made widget for this feature from HERE. I created this widget in tumult hype and it’s very easy to customise and embed into your project. Just change the images and upload the whole thing to your server before embedding into your sparkle page. Written instructions can be downloaded from HERE. You can see it in action HERE.
ENJOY.
5 Likes
I just tested the Paul-Browne script and it works (at least for) and it’s so easy
to implement:
- create an “Embedded Content” box
(Add - Special Element, see documentation about “Advanced Editing” here
- just copy paste the code on the page in the “Special Element Box”
- copy the followin files to their respective folders
image-comparison-slider.css → css
image-comparison-slider.js → js
image-comparison-slider.min.js → js - Copy the before and after images to a folder you want
That’s it
If you need an example (sparkle file + publishing folder/files) please let me know
i am more than happy to one provide one for you!
1 Like
@atani (or anyone that’s interested)
Here’s a downloadble file (beforeafter.zip):
It contains a ready to folder that can be uploaded to your host but can also be installed locally it also contain the sparkle project file (Example-BeforeAfter.sparkle)
Have fun with it!
@francbrowne: just dowloaded your examples, adapted the code and put the stuff in the root where you said it should be, and it all works like a charm. So thank you very, very much!
It got me wondering though, is there a way to put multiple of these before/after sliders on the same page? And if the answer is yes, could you give me pointer how to do this?
Thank you, thank you, thank you sooooooooooooo… much for all your answers.
I tried out, to get a picture with before|after-slider, but I don’t get it. Maybe I am to tiered for today, Or my code-, english comprehension are to small. I don’t know. I will give it a second try tomorrow… 
Thx a lot and a nice evening to all, Atani 
@wolfferine: thanks for the prompt answer and the supplied files.
Do you know how to do this with the suggestion of @francbrowne?
Or do you think you could change your slider to the same look as his?
(so with the arrows, because I like the look better and think that it’s a clearer interface).
@REBB . The easiest way to place multiple sliders on a page is to upload multiple copies of the compare folder giving each one a unique name to identify the slider. E.G. compare1, compare2. compare3 etc. Your iframes would then point to the relevant folder to display the correct slider.
@francbrowne and @REBB
just as i reminder and to be sure - my suggested solution is NOT based on an iframe.
fyi - i try to avoid iframe solutions as much as possible, cause it has a negative impact
on SEO ranking
@wolfferine Just to be clear, it’s a common myth that iframes have a negative impact on SEO. Search engines view iframes as external links which simply means that the content being displayed in an iframe will not be indexed as content belonging to your website. The general rule is if the content to be displayed is important to your website’s SEO ranking (i.e. it contains a lot of keywords or keyword phrases) then you shouldn’t place it in an iframe.
In this case, we’re using the iframe to display a widget that provides a before and after image comparison. This is no different to using an iframe to display a youtube or vimeo video. Certainly, embedding video content through an iframe is not going to have any negative consequences when it comes to SEO. The bottom line is that iframe content will not enhance your SEO, but neither will you be penalised by search engines.
Of course, the widget I provided does allow for direct embedding into your web page without an iframe. There are two clearly marked pieces of code within the provided HTML file. One is for pasting to the head section of the page, the other is for pasting into the body section. This works well in most cases, but can cause conflicts with other javascript elements within the page. This is why I recommend the iframe route - it eliminates the potential of conflicts.
3 Likes
Frank, I enjoy your solution, thank you very much.
Would it be possible to use png images?
@zbr The widget was made with tumult hype and was originally created with JPG’s. However, it could have been created with any image type including PNG’s. If you have tumult hype, I can provide you with the hype file so that you can edit it with image formats of your choice. But the widget as provided can only be changed by exchanging images with the same name and extension. That said, If you are into code editing, you could open the compare_hype_generated_script.js file and search and replace the jpg extension with png. This will then allow you to use background.png and foreground.png as your image file names.
Thank you for the reply.
I replaced jpg extensions with png in two files where I located fore/background images: compare_hype…js and C22C3B-restorable.plist but png file lost transparency.
I will gladly accept your offer to provide me with the hype file.
Thanks a lot for your help.
ZbR
@francbrowne: I use Hype4. Would be great, if you could provide the hype file.
Thanks in advance
Rgds Thomas