Centre Image In Browser

(Karl) #1

New Fantasy Site 3.zip (617.9 KB)
Please see attached file.

I click on an image (the small office image in the supplied file) and it opens the same image in a larger view. This larger image is off the page and drops into place when called upon.

Is there a way to make this larger image centred in the browser once called upon so that it stays centred as I scroll down the page? There is only one image to click on in the supplied file but the real page has is a gallery of three images across and eight vertical and I need the larger versions of these images to always centre no matter where I’m scrolled on the page.

I also use Quick n Easy Web Builder and that uses Fancy Box for galleries and that does what I describe above.



To get an image to be centered horizontally and vertically, your scene would need to be structured differently. Check out this document:

image-centered.hype.zip (512.9 KB)

In this document, I have a group set to scale, with ‘shrink to fit’ and ‘zoom contents’ on the group. The scene is set to scale by 100% in both dimensions. This sets up the relationship between the size of the image and the size of the scene.

For your document, you may want to instead use something like Fancy Box or something like http://noelboss.github.io/featherlight/ to accomplish this.


As Daniel’s suggestion states … “your scene would have to be structured differently” but what if there was a way that didn’t have to involve setting your document to be responsive! Wouldn’t that be good! :smiley: :smiley:

Well, there is BUT it involves using Hype functions to get it to work (and a little bit of basic Javascript).

What you need to do is create a function that runs on mouse click of the image that does the following:

var popup = hypeDocument.getElementById('popup'); // you element that houses the larger image
popup.height = hypeDocument.getElementProperty(popup, 'height'); // same element's height

// timeline to run when image is clicked. Here I have a timeline that moves the "popup" into place 
hypeDocument.startTimelineNamed('popup', hypeDocument.kDirectionForward)

// The following code sets the popup to always be in the center of the browser window (height wise)
hypeDocument.setElementProperty(popup, 'top', document.scrollingElement.scrollTop + ((window.innerHeight / 2) - (popup.height / 2)))

// this code gets the background image of the clicked element so we can use the same reference for the popup bg element.
file = hypeDocument.getElementProperty(element, 'background-image');

// final piece is to set the bg element (a rect inside the popup group) to change it's background image to that of the "file" reference above
bg = hypeDocument.getElementById('bg');
bg.innerHTML = '<img src="' + file + '" width="100%" height="100%">';
// Hype's new setter for background-image could possibly be used here as well
// unfortunately there is a possible bug that needs to be addressed first

galleryPopup-v2.hype.zip (477.8 KB)

(Karl) #4

Hi Guys

Thanks for the replies, I’m going to work through those now.

One thing I should have mentioned was that each large image should be a gallery. So, in the case of the file attached to my previous post, once you click on the small image of the office and the larger image appears, that will then need to be clickable with left and right arrows to show a number of variations on the office (they’re CGI renders). Probably no more than 4 or 5 different office images displayed in the big image panel. And you can click the large image away at any point and return to the main checkerboard of images should you, for instance, only wish to view the first two in the gallery. Hope that makes sense.


Ok. Well, in my example you can just get rid of the code from “file” onwards and just have different timelines with different “galleries” in them that have arrows and movement, etc. Would probably be the easiest way.

The code I have written is for one popup but it shows the important part that you asked first and that’s to position the “popup” element in the middle of the screen.

(Karl) #6

Yeah, looking at your file now and it looks like it might be the way forward. Thanks so much for putting that together. I’ll put the site up when it’s done.


no worries. Another note, you could give each clickable image an ID that corresponds to the timeline name so you don’t have to write a lot of functions. Depending on what it is … it plays the corresponding timeline.

// ID is "timeline1" for example
// equivelent to hypeDocument.startTimelineNamed("timeline1");

(Karl) #8

By the way, your notes on your code are very helpful for a code-know-nothing like myself. Thank you for that.