Page 1 of 1

Zoom an image/iframe up down (scale transition)

Posted: Sat Jun 09, 2018 11:52 am
by markpalmos
Hello guys,
I got the attached project from Martin as I have been having difficulty understanding how to scale an image or iframe up and down to make it appear and disappear with a mouse click.

In the zip file
(648.57 KiB) Downloaded 24 times
there is the project I have modded, a second image and an iframe element. The images work as intended, but the iframe does not respond to scaling if I apply a similar action to it, so I added an X which I cant get to appear in the right place/time using a logic block. There is also a folder containing Martin's original project and skin.

What I am doing wrong here. The browser also sometimes freezes and gives me the error "localhost is not responding due to a long-running script." Perhaps the mouse roll over in the iframe.

Input appreciated!

Re: Zoom an image/iframe up down (scale transition)

Posted: Mon Jun 11, 2018 8:18 am
by Tony
Hi Mark,

I've created a sample project based on the contents of the zip file. You can view it at: ... index.html

Part 1

Here is the workflow:

1. removed all variables

2. created a new variable vis_iframe_popup | true/false | false

2. added a mouse click to hide the tt_ht_node for all hotspots - this hides the mouse over that looks messy if the popup opens over the hotspot)

3. deleted the ht_node_image graphic as we are using the ht_info_image graphic

4. changed the name of info_text_body to iframe_popup_body (housekeeping)

5. changed the name of info_popup_close to iframe_popup_close (housekeeping)

Part 2

That's all just cleaning things up. To get the iFrame to scale I've done the following;

1. moved the ht_info hotspot out of the iframe_site folder as it's really independent to the content in that folder

2. changed it's actions to set variable of vis_iframe_popup to true

3. set the container iframe_site default scale to 0,0 and add a scaling logic block that sets the scale value to 1,1 when the variable vis_iframe_popup is true and does it over 1 second.

4. moved the iframe_popup_close button into the iframe_site container, checked visibilty on and removed the logic block. Added an action Mouse Click | Set Variable Value | Set(=)/false | vis_iframe_popup

5. deleted the action Mouse Click in iframe_popup_body

6. positioned the iframe_popup_close button and iframe_popup_body text element and created a container around them and named it iframe_popup. The container uses all default settings.

So now we have a container (iframe_site) with an intial scale of 0,0. In it is a child container (iframe_popup) with an initial scale of 1,1 and two elements, a button and a textbox both with default settings.

When the user clicks on ht_info the vis_iframe_popup is set to true, this activates the iframe_site logic block and scales the container to 1,1 and we see the website in the textbox and the close button above it.

When the user clicks on the close button the vis_iframe_popup is set to false in turn this activates the iframe_site logic block and scales the container to 0,0 and we no longer see the website in the textbox and the close button above it.

I've attached a zip with the updated files



Re: Zoom an image/iframe up down (scale transition)

Posted: Wed Jun 13, 2018 2:08 pm
by markpalmos
Sheesh Tony, you're unreal. Thanks mate.
I will do that right now. For some reason I did not get a notification about your response via email though the "Notify me when a reply is posted" is checked.
Speak soon, tx again.

Re: Zoom an image/iframe up down (scale transition)

Posted: Thu Jun 14, 2018 1:38 pm
by markpalmos
Hi Tony,
Thanks for that. I am slooowly coming to grips with the paradigm of Variables as "links" - ie to link a Source to a Trigger in a particular way. A kind of middle-man, it seems.

Probably unable to do that all by myself, as there is a lot I don't fully understand, and there are so many aspects and gotcha's here that are very poorly/not dealt with in the manual. It's great to have your input!


adding a second iFrame into skin

Posted: Thu Jun 14, 2018 2:34 pm
by markpalmos
I think I have managed to fudge a working project/skin (attached) which allows for a second iframe popup.

I did this by duplicating ht_info and the iframe_site folder, then renaming each element adding a 2 at the end of the name.
I also found I had to add a second vis_iframe_popup so that could be linked to the second hotspot ht_info2..
I then went through the logic blocks, actions and hotspot on the actual pano to make sure they all referenced node2 popup2 ht_info2 etc...

There's probably a way to not duplicate everything but this works without having to 100% really know what you're doing.