Before and After splitscreen with draggable middle line

Hi,

here an idea how that could done:
- embed the second pano as <layer> with an iframe into the first, size it like the fullpage and make only the size of the layer visible
- create another layer that can be dragged and would resize that layer
- add js to sync the movement between both panos

I will try making such example when I find some time.

Best regards,
Klaus

It would be better if the line could be moved manually.

But example is ok. That is another that I've made a few years ago https://ai360.pl/projekty/sync3/

Mix of pre/post panos: https://www.ai360.pl/panoramy/949

Quote from milotimbol

Gotcha. Will try that. Thanks!

Were you able to get this to work?

Quote from klaus.krpano

Hi,

here an idea how that could done:
- embed the second pano as <layer> with an iframe into the first, size it like the fullpage and make only the size of the layer visible
- create another layer that can be dragged and would resize that layer
- add js to sync the movement between both panos

I will try making such example when I find some time.

Best regards,
Klaus

Hi Klaus,

I am having difficulty figuring out how to load a scene into an iframe based on your suggestion above. I have tried many things in the "onloaded" line, but can't quite figure it out. Can you help me figure out this first step, or point me to where I can read about how to do it properly?

(Note: the "We have updated our hosting" is our 404 landing page)
http://sbpanohost.com/Testing/SliderVersionA/index.html

<scene name="scene_AAAAA" title="AAAAA">
	
<image>
<cube url="panos/AAAAA.tiles/pano_%s.jpg" />
</image>


<layer name="iframe"
url="white.png"
align="center"
renderer="css3d"
onloaded="add_iframe(loadscene(scene_BBBBB, null, MERGE, BLEND(1));"
/>


</scene>


		
<scene name="scene_BBBBB" title="BBBBB">
		
<image>
<cube url="panos/BBBBB.tiles/pano_%s.jpg" />
</image>


</scene>

Update:
I figured out how to load a pano into an iFrame by loading a scene from a tour saved separately and not part of my base tour. I scaled it to 50% so I could better see what is going on.

I moved onto the next step of figuring out how to sync the two and now see that I am approaching this from the wrong direction. I need to load the two scenes into the base html file and use JS Sync there and not in the KRPano scenes.

What I don't know is how this will work into my full tour. I have 5 scenes, and on the third scene, I was planning to do a before/after split-screen.

Scene loaded into an iFrame within a scene:
http://steelblue.media.s3.us-west-1.amazonaws.com/Testing/Slider…ionB/index.html

<layer name="iframe2"
url="white.png"
align="center"
renderer="css3d"
onloaded="iframe_embed(iframe2, BBBBB, http://sbpanohost.com/Testing/Slider/BBBBB-Only/index.html );"
/>

I am slowly making some progress. The two panos are now synced; now I need to find a before/after slider that is easy to set up.

I have found a few that I like, but they are coded for static jpg's, which means I need to figure out how to adapt them to the DIV's that hold each XML file. That task is probably easy for some, but in case you haven't figured it out, I am not a coder, just a hack. ;)

Synced Panos:
https://steelblue.media/Testing/Slider…ionC/index.html

Quote from klaus.krpano

Hi,

here an idea how that could done:
- embed the second pano as <layer> with an iframe into the first, size it like the fullpage and make only the size of the layer visible
- create another layer that can be dragged and would resize that layer
- add js to sync the movement between both panos

Klaus,

Any thoughts you have would be helpful as I'm struggling to figure out how to make the slider work. Nearly all of them are designed to work with static images, so it is trial and error to try and get them to work with KRpano content.

Version H:
http://steelblue.media/Testing/Slider…ionH/index.html
I used "VanilaSlider" for this try. I started by getting the slider into my scene. The background panos are staying synced, and the foreground static images are working as a slider.

Version K:
http://steelblue.media/Testing/Slider…ionK/index.html
This version created two problems. When I moved my KRPano content into the slider DIV's I lost the ability to interact with the KRPano. I am assuming this is due to my double class call, but I am not sure.
Secondly, instead of revealing the second pano in the exact location, it scales/slides out.

Version K Derivative:
http://steelblue.media/Testing/Slider…t_B1/index.html
http://steelblue.media/Testing/Slider…t_B2/index.html
I did find one that is a CSS only solution that keeps the panos in sync, but it is less than ideal and has the same problem of scaling the pano instead of revealing it, so I don't think this is the right path.

Thanks,
Travis

I decided to take a step back and solve the two problems separately... First is trying to understand how DIVs work and why the pano is always recentering. And more importantly, can that be solved.

This DIV is resizable if you click and drag the lower right corner. The pano resizes/recenters as it would if it were loaded directly into the html code instead of inside a DIV.

Studies in DIVs version A:
http://steelblue.media/Testing/Slider…IV_A/index.html

https://steelblue.media/Testing/Slider…ionK/index.html

krpanoLeftDiv and krpanoRightDiv need fixed widths and you cant use width="900px" for a div, thats for images only.
not all solved with this, yet... but first replace width/height with stlye="width:900px;height:900px;"

Quote from indexofrefraction

https://steelblue.media/Testing/Slider…ionK/index.html

krpanoLeftDiv and krpanoRightDiv need fixed widths and you cant use width="900px" for a div, thats for images only.
not all solved with this, yet... but first replace width/height with stlye="width:900px;height:900px;"

Thank you!

I made that change and went on to test further, I think I can drop the size from that DIV container altogether as my frame size is controlled in the CSS. The setup I am using is based on this: https://codepen.io/nosurprisethere/pen/xrXjYV

I also dropped one of the class assignments for the "left" DIV and modified the right to have both class assignments for the same DIV. Doing this brought back the interactivity with the pano, so they now stay in sync.

The last problem is that the DIV is designed to scale instead of masking, causing my pan to resize when the slider is moved.

Latest Test:
https://steelblue.media/Testing/Slider…antA/index.html

<div class="wrapper">


	<div class="viewersDiv">
			<div id="krpanoLeftDiv" draggable="false"></div>
	</div>
	
	<div class="viewersDiv after">	
			<div id="krpanoRightDiv" draggable="true"></div>
	</div>
	
	<div class="scroller">
		<svg class="scroller__thumb" width="100" height="100" viewBox="0 0 100 100"><polygon points="0 50 37 68 37 32 0 50" style="fill:#fff"/><polygon points="100 50 64 32 64 68 100 50" style="fill:#fff"/></svg>
	</div>
	
</div>

I made some progress today. If I define the pano using a left-justified "area" with defined x/y, then the pano doesn't scale as the slider moves.

I am going to parse through some of the forum posts regarding resizing and pulling the browser data dynamically. I'll likely have some follow-up questions tomorrow.

Current Progress:
https://s3.us-west-1.amazonaws.com/steelblue.medi…fter/index.html

Quote from TSchmiesing

I made some progress today. If I define the pano using a left-justified "area" with defined x/y, then the pano doesn't scale as the slider moves.

I am going to parse through some of the forum posts regarding resizing and pulling the browser data dynamically. I'll likely have some follow-up questions tomorrow.

Current Progress:
https://s3.us-west-1.amazonaws.com/steelblue.medi…fter/index.html

Great example! Very nice work. Thanks for sharing it.

Rich

Hello everyone,

Could you assist me with resolving an issue related to screen splitting? I would greatly appreciate learning the correct method to achieve this.

Thank you for your assistance.

Hi,

There is a already great example ready to study.

krpano

Tuur

It did not work!
thank you for your attention.