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.
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:
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);
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.
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.