Resize images in hype

1

Hello i was wondering if it was possible in Hype to set a repeatable action that would resize images when you click on them.
For example there would be a thumbnail which would be enlarged once clicked upon and reduced when clicked on a second time.
Now i know you can do this inside timelines but that would be very time consuming for each image.
Isn’t there a way to automate the process and apply it to each image?

I hope you can help me

2

Hi darkcrocodile!

Here’s one way to do what You are requesting… attached is “ShowHide_Image.hype.zip”

The solution as written in the Hype file, and also shown below, depends on You naming your thumbnails with a 3 character prefix. In this case I used “tn_”. So, if we have a full-sized image named “Rect” the thumbnail version would be “tn_Rect”. The slice() method is positional-based, the actual character values do not matter. You can change the 3 prefix characters to what ever You want (e.g. “xyz”). Also, if You wish to change the position of the characters You are slicing from the ID name You will need to adjust the slice() method in the function accordingly - just be consistent with your ID naming schema for your images. For more info about the slice() method please click here.

Additionally, this script assumes the full size image has been hidden using the “Display” setting (the “Visible”~“Hidden” radio-style buttons) in the “Element” panel as part of the initial scene set-up.

I have elected to have the full hide~show functionality in one script. You could choose to split it into two separate functions for the showing & hiding routine. This separate functions approach will result in slightly simpler coding because we would not need the conditional checking to see if the clicked object is a thumbnail or not.

    function showHideImage (hypeDocument, element, event) {
        	var imageHolder = element.id; // the image that's clicked on
        	imageSlice = imageHolder.slice(0,3);  // extract the first 3 letters (prefix) of the ID name

        	if (imageSlice == "tn_") {
        	imageHolder = imageHolder.slice(3); // select characters after the prefix
        	hypeDocument.getElementById(imageHolder).style.display='block';
        	}
        	else {
        	hypeDocument.getElementById(imageHolder).style.display='none';
        	}

ShowHide_Image.hype.zip (14.1 KB)

2 Likes
3

Thank you very much for your answer. It works very well.
I have another question.
How could I in addition to this add a function for the user to be able to move to the next large image
I basically want to make a slideshow function
There is a thumbnail, you click on it and then the image enlarges then you can click on the image to move to the next slide.
Is that possible.

s

4

You picked the wrong person to pull this bait and switch routine. You initially asked a simple image swap question - period. Now, just one question later, we are designing the vague outlines of a slide show. Some one else will have to help You - but do yourself & them a favor - be forthcoming about your objectives and provide design & interface specs that show You have put some thought into your project.