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


(Steve Warby) #1

I have a row of images and the on click event of each image moves the image up and scales it.

This is done through the timeline.

This works fine on full screen but on different screen sizes the animation is offset.

Is there a javascript tutorial on image animation & getting screen sizes etc.

Cheers

Steve Warby


#2

If you can share what you have we can work from there.

The best way to do this really depends what device sizes you want to support, the resolution of your images, and whether you are taking the extra effort to build additional responsive layouts for the wide variety of device sizes out there.


(Steve Warby) #3

Please find attached test project.

This will work for a fixed number of images (okay for this project).

What I also need is the following:

On click on any of the images get the url of the image and replace the main image with this.

How do I do this in javascript. Is there an equivalent of ‘this’ ie click on an element and get its properties.
In the javascript there is a parameter ‘element’ on the click event I can do console.log(element) and I get:

class=“HYPE_element” id=“hype-obj-N98VZ3V5S0ANHF9FJT26” role=“button” aria-flowto=“hype-obj-CIQYZ0YS8M7AF4S9V7HV” style=“pointer-events: auto; position: absolute; background-size: 100%; -webkit-background-size: 100%; display: inline; -webkit-box-reflect: below 5px -webkit-gradient(linear, 0% 0%, 0% 100%, from(transparent), color-stop(0.1, transparent), to(rgba(255, 255, 255, 0.498039))); cursor: pointer; background-image: url(http://127.0.0.1:51172/preview/075446A9-33E7-46A1-B814-CCAA65AF5EC3-1018-0000089F2F0E5F17/index.hyperesources/bifold2.jpg); transform-origin: 50% 50%; transform: translateX(474px) translateY(16px) rotateY(0deg); border-bottom-left-radius: 8px; overflow: visible; border-bottom-right-radius: 8px; z-index: 12; border-top-left-radius: 8px; border-top-right-radius: 8px; -webkit-box-shadow: rgb(0, 0, 0) 2px 2px 3px; box-shadow: rgb(0, 0, 0) 2px 2px 3px; width: 83px; height: 56px; background-repeat: no-repeat no-repeat;”

So how do I access the image properties. I tried .src etc but couldn’t get the image value.

So I need to do an new function replaceImage and pass the image to be replaced.

testGallery.zip (904.7 KB)

Cheers
Steve Warby


(Steve Warby) #4

Hi Guys,

any ideas on this I am confused and can’t find anything in the docs.

Ive tried various guesses etc

var test = hypeDocument.getSymbolInstanceById(element);


var id = element.id;
var all = document.getElementById(id);
alert (all.innerHTML);
//var src = document.getElementById(id).getElementsByTagName('img')[0].src;
var top = 	hypeDocument.getElementProperty(element, 'top');
var src = element.getElementsByClassName("src")[0].innerHTML;

console.log(element.id + ' top = ' + top + ' element = '  + element + ' src ' + src);

Cheers

Steve Warby


#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)


Optimize Image - checklist
(Mark Hunte) #6

You can also use background-image

Which you can then control size and position. This helps with the constraints of the images.

We know the calling element will be one of the thumbs so we simply get it’s background image attribute and use that in the large display.

var thisImage = element.style.backgroundImage
	
 
	
var imageGal = hypeDocument.getElementById('pic1-duplicate');
	  
	
	imageGal.style.backgroundImage = thisImage;
	imageGal.style.backgroundRepeat="no-repeat";
	imageGal.style.backgroundSize=   "contain"; 
	imageGal.style.backgroundPosition = "center";

testGallery-vMH.zip (2.4 MB)


(Steve Warby) #7

Cheers Guys,

I have managed this so far:

var selectedID = element.id;
var imageSrc = hypeDocument.getElementById(selectedID).style.backgroundImage;
var mainImage = hypeDocument.getElementById('mainPic');
mainImage.style.backgroundImage = imageSrc;
hypeDocument.startTimelineNamed('fadeImage', hypeDocument.kDirectionForward);

http://www.toolfolks.com/hype/testGallery.html

The animation is as follows:

I have a grey box covering the whole of the main text area & an image in the center. Both set to invisible & opacity 0%.
On animation I set visible true & grey box opacity to 20% ( fades out the background) and the image to 100% capacity.

If the click the main image or the grey box it reverses the animation (ie hides the main image and the grey box).

One thing is not right though.

The last image on the right is good quality (1.7 meg) but shows pixelated where the third image shows okay.

Cheers

Steve Warby


(Mark Hunte) #8

Select the image in the resources and uncheck optimise.


#9

Maybe I didn’t make my note above big enough :wink:


(Steve Warby) #10

I got that thanks.

I think that should be a global thing or at least be able to control click and select all or some.


Optimize Image - checklist