Digital Workshop

Welcome to the Digital Workshop Message Boards
It is currently September 21st, 2018, 6:34 am

All times are UTC [ DST ]




Post new topic Reply to topic  [ 5 posts ] 
Author Message
 Post subject: Before After image slider
PostPosted: June 24th, 2018, 11:01 am 
Offline

Joined: December 1st, 2016, 5:33 pm
Posts: 3
Wanting to create a 'before-after' image slider. Like on this web site https://juxtapose.knightlab.com/ Any assistance very much appreciated. I presume this would have to be done with javascript?

Kind Regards
Stuart


Top
 Profile  
 
 Post subject: Re: Before After image slider
PostPosted: June 24th, 2018, 8:08 pm 
Offline
Godlike
Godlike
User avatar

Joined: March 21st, 2007, 10:44 am
Posts: 3088
Location: UK
Opus: Evolution
It's actually a simple trick. The image that slides in and out of appearance is a child of another container. The width of the parent container is then altered to hide / show more / less of the child image. The effect is then finished by placing the second image behind the container frame.

In Opus, you place one frame (call it A) inside of another (call it B). Set the image source for the child frame (A). Then create another frame (call it C) and set the source image. Place frame C behind frame A/B. Now if you adjust the width of the parent frame (B), you'll hide / show more / less of the image in the child frame (A) and this will result in more / less of the frame at the back (C) being hidden / shown.

Once, you understand that, you simply need a method of adjusting the width based on the mouse position (there's an Opus command for this) and then setting frame B's width using this information. I don't think there is an Opus command in HTML5 for that, but the frame is just a DIV which means document.getElementById(frameA).style.width = will work directly from OpusScript.

</mack>

_________________
When you have explored all avenues of possibilities, what ever remains, how ever improbable, must be the answer.

Interactive Solutions for Business & Education
Learn Anywhere. Learn Anytime.

www.interaktiv.co.uk
+44 (0) 1395 548057


Top
 Profile Visit website  
 
 Post subject: Re: Before After image slider
PostPosted: June 25th, 2018, 2:15 am 
Offline

Joined: December 1st, 2016, 5:33 pm
Posts: 3
Thanks Mack, much appreciated. I thought there may have been some other way and I tried numerous things but with no success. I will give this clever trick a go. I think this could be a nice little utility.

Kind regards
Stuart


Top
 Profile  
 
 Post subject: Re: Before After image slider
PostPosted: June 27th, 2018, 9:45 am 
Offline
Godlike
Godlike
User avatar

Joined: March 21st, 2007, 10:44 am
Posts: 3088
Location: UK
Opus: Evolution
Here's an example - http://sandbox.interaktiv.co.uk/opus/then-and-now/

The Opus source can be downloaded from: http://www.live.interaktiv.co.uk/?section=files

using the code: then-and-now@digitalgrapevine.info

</mack>

_________________
When you have explored all avenues of possibilities, what ever remains, how ever improbable, must be the answer.

Interactive Solutions for Business & Education
Learn Anywhere. Learn Anytime.

www.interaktiv.co.uk
+44 (0) 1395 548057


Top
 Profile Visit website  
 
 Post subject: Re: Before After image slider
PostPosted: June 27th, 2018, 12:14 pm 
Offline

Joined: December 1st, 2016, 5:33 pm
Posts: 3
Mack thanks very much, truly made my day. Got very quickly to the first part but have struggled trying to get a way to control the width of the frame as the mouse moved. I would not have got to this, so thanks again.


Top
 Profile  
 
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC [ DST ]


Who is online

Users browsing this forum: No registered users and 4 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group