I'd like to add a before/after image slider
How Do I?
Okay, first off, I’ve had EE for a long time (November 2002). Before it was EE. My current version is 2.11.9. Yeah, I know, I should have updated, but it’s working fine, so I really haven’t had any reason to upgrade. Especially since I get maybe ten hits a month that aren’t from me. (I’m not joking - it’s a vanity site).
Anyway, I’ve been playing with photo enhancing software and would really like to add a before/after image comparison slider. There are a couple of sites that do this online, but one of them only gives you 3 widgets. You can pay by the month or annually, but you still only get 3 widgets. And if you cancel the subscription, the widgets will no longer work.
So…I kinda think I’ll be using more than three of these sliders. There are plenty of websites that tell you how to do it with javascript, html and css and I am totally lost.
I did look to see if there were any third party options for EE that would do this, but I’m not finding any joy.
Is there anyone here who can help me? (Be gentle, I’ll be 71 next week and I’m doing my best to keep my brain active at this point.)
I did sign up for the basic plan (free) that gives me one widget. I did a test and I really would like to somehow incorporate this into my website.
My website (first post) is dear diary.
There are multiple sites with the instructions on the coding for this (ie: CodePen Home_Before/After Image Slider) but I don’t even know where to begin to add them to EE. I’m used to getting third party applications and installing those.
I’d sure appreciate any help anyone can give me. Thank you for taking the time to read this.
That’s fantastic that you’ve pursued this passion project and that you site is still going strong on EE after all these years! Keep on going and don’t give up, you’re doing great 😊
This type of functionality is purely front-end (html/css/javascript) so that’s why you aren’t seeing many ExpressionEngine add-ons that do this.
I looked around a little bit and I think one good option might be this jQuery plugin - https://www.jqueryscript.net/demo/before-after-image-viewer/
Basically you would need to download the beforeAfter.js file and put that in your site’s asset folder (wherever you serve other javascript and css from). And then put something like this in a template file
{script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"}{/script}
{script src="beforeafter.jquery-1.0.0.min.js"}{/script} <!-- path to your local copy of beforeAfter.js -->
{script}
$(function(){
$('.beforeAfter').beforeAfter();
});
{/script}
<div class="beforeAfter">
< img src="__PATH_TO_BEFORE_IMAGE__" >
< img src="__PATH_TO_AFTER_IMAGE__" >
</div>Edit: Sorry the script tags aren’t allowed in the post so I’ve rewritten them as {script} but you need to replace the { with < and } with >
I hope that helps!
Thanks! I can hardly wait to try it out!
I’ll let you know if it works, fingers crossed.
Okay, I’m back. Spent the last couple of weeks setting up security cameras to watch the wild critters. (It’s always something around here.)
I figured out how to do the coding so it works.
But now, how do I call it from another website/directory to go into the iFrame?
Where I’m testing (it’s a slow website now, not much there anymore, so I have plenty of room to play)
Link: slider test - second photo is mine.
I got the code from Link: orangeable, since there can be more than one instance on a page with his code. (I used his Github link.)
Thanks for any help and if this isn’t okay, then let me know. I’ll understand.
Yay! I got it to work!
Now, this should be an easy fix.
How do I center a media file? I’ve done it with little movies, but I can’t seem to center this thing.
I still have to play with the CSS settings, but I have the basics of the slider down. Take that! websites that want to charge an arm and a leg for this slider.
Working entry..Link: Slider test
I had been wanting to find this information for quite some time. I had been searching for it on Google for a total of six hours before I finally found it on your website. I find myself wondering what the Google strategy is that is preventing them from placing websites of this kind that are instructive at the very top of the list. On the whole, the most popular websites are stuffed with junk. poppy playtime