Overlay/Popup with just an image and

1

I have typed some keywords in the forum but the raised topics seems to not address my question.

When I click on an item, I would like to

  • display an overlay or a popup but not a windowed-popup from the browser but within the main window.
  • to choose the width and height of the overlay (a rectangle in the middle of the window)
  • to add a close button on this overlay
  • it contains an image that is hosted online
  • the only possible action from the user is to close the overlay and it is then not possible to do something else in the scene
  • when the user clicks on the close button, the overlay disappears and we see again the main scene

How can we do that?
How can we specify a link for the image that is relative and not absolute from the server? (…\ ?)

Thank you

2

I'll try to reply in the most Hype-specific ways. Do note that there might be libraries that could be integrated faster/easier (for example, tumult.com uses fancybox), but often staying within the Hype-realm can give better design flexibility.

In general you would create a group of elements or symbol that represents your popup. This would then have its own timeline animations that would be triggered to show with an animation of the Display property in the Element Inspector going from Hidden to Visible. Using Display will make it not receive clicks/mouse actions while hidden. You can optionally add an opacity animation if you want a smooth fade in.

The width/height you probably want is what you would define in the editor. If you need the site or the overlay to be resized, you can use the Flexible Layout system. Alternatively if you're looking for programmatic control there is the Hype setElementProperty() API that can adjust width / height (or scaleX and scaleY), but this probably isn't what you want.

Similarly to the first item, you would add an On Mouse Click action to a close button element in your overlay group/symbol that would run a timeline that animates the group from Visible to Hidden to close.

You can add a Rectangle element, and then choose Edit > Edit Element's Inner HTML. This will let you add an <img> HTML tag with an externally referenced image.

You could simply make a rectangle element that covers the entire scene as part of your group. This would capture clicks so anything underneath won't respond.

2 Likes
3

Ka-whunga! Great response.

4

Wonderful. I started alone by doing half of these steps. Thank you.
I will keep you updated.

5

You may also want to stop the window/document scrolling.

I have used this in the past.

It gets called for example when the overlay is shown (via timeline keyframe action) and when the close overlay button is clicked. ( same timeline in reverse )

Using will stop the document scrolling behind the overlay.

if (! window.scrollable){ window.scrollable = false}
	
	
	if (!window.scrollable){
	document.body.style.overflow= 'hidden';
	window.scrollable = true;
	} else {
	document.body.style.overflow= 'scroll';
	window.scrollable = false;
	}

Also consider that when on the normal scene you may scroll down or up. Then show the overlay/image.

You most likely will need to use a method to place the overlay/image more or less in the right place.

var gallery = hypeDocument.getElementById('gallery'); 
 
	
	$(document).ready(function(){

  window.addEventListener("scroll", function() {
    
  hypeDocument.setElementProperty(gallery, 'top', $(window).scrollTop() +150)
    
    
});

})

Here is a stripped down version of something I wrote a while back. It is only an example and will not be perfect for your needs but shows you what I am explaining.

flotingGal.hypetemplate.zip (1.2 MB)

3 Likes