Animate an image to centre of the screen and 90% of the screen width

Animation
5

Hi Steve @classic12

The elements for images in Hype are not in the form of <img> they are just divs that have a background image set as the corresponding image in your resources folder. So, in order to set the image you can use:

var box = hypeDocument.getElementById('lightbox');
// this is the container for your zoomed image

box.style.backgroudImage = "url(PATH_TO_IMAGE_IN_RESOURCE_FOLDER)"; // ${resourcesFolderName}/my_pic.jpg for example

You can then check to see which pic was clicked and load the picture that corresponds to that element id:

var id = element.id;

if (id == "pic1") {
    image.style.backgroundImage = "url(${resourcesFolderName}/shopfront9.jpg)";
} else if (id == "pic2") {
    image.style.background = "url(${resourcesFolderName}/bifold2.jpg)";
} else if (id == "pic3") {
    image.style.background = "url(${resourcesFolderName}/bifold3.png)";
}

Here I have used your document and just adapted it to show you how to populate the main image in your timeline “fadeImage” (one of many ways to do it) just so you have an idea.

It consists of a small function that depending on the element id that is clicked will show the corresponding image. Note I have turned off “automatically optimize when exporting” so that the image is shown at full res.

testGallery-vDBear.zip (825.5 KB)

1 Like
Optimize Image - checklist