Hide and show images (or other) by javascript

Hi.
I need to reveal some bigger images (or group elements) on click on thumbnails.
I’ve tried to create some functions wit get ElementbyID but… it do not works.
Are there some example to have a look?
Thanks a lot
Maurizio

Have you not tried using the timeline, so on the click, it animates, or fades, the images in ?

Thanks MrAddy,
I have to manage 30 and more images and more that 20 scenes, i think that
using javascript, the application will be lighter.
Maurizio

Il domenica 19 aprile 2015, Andrew support+forums@tumult.com ha scritto:

Hi, I’ve solved! I do not set the ID name in the Identity panel!
Thanks to all
Maurizio

1 Like

Hey Maurizio.
Interested in your method. Would you make the .hype doc available ?
Thanks

Of course kerguelen
Please note that “big” img layer is hidden.
Clicking on the small pic you’ll reveal the big one and clicking on the big one it hide itself.
Maurizio
show-hide.zip (31.0 KB)

Very nice ! Thank you !
Do you think it could be possible to make a generic show/hide routine ?
I mean, the same 2 javascript that could be used for any image.
It may work like this :

  1. image is clicked
  2. Show/Hide script is called
  3. image ID is used in the generic Show/Hide scripts instead of the “big” ID of your exemple

That would help to have only one Show/Hide script instead of one pair of scripts for each and every image

You only need one function to show and hide.

name your thumbnail images for example:

thumb_PIC1
thumb_PIC2

and you large images

large_PIC1
large_PIC2

Then assign this Javascript to all thumb and large images.

	 var str = element.id;
	 
	 
    var res = str.split("_")[1];
     
	 var theElement = hypeDocument.getElementById("large_" + res);
	 
	
	 
	 //-- if large image is clicked let just hide it.
	 if (theElement.id === element.id ) {
	 theElement.style.display = "none";
	 
	 return
	 }

  
  //-- Thumbnail is clicked, so wee need to hide all showing Large images.
  var largElements = document.querySelectorAll('*[id^="large_"]')
 
 for (i = 0; i < largElements.length; i++) {
  
 
    largElements[i].style.display = "none";
  
}
 
  
	
	//-- now search and display the correspndent large image
	
	var elementDisplay  = theElement.style.display;
	
	
	if  (elementDisplay === "block") {
	
	theElement.style.display = "none";
	
	} else {
	
	theElement.style.display = "block";
 
	} 

The important part here is we use a delimiter to split the image elements names so we can get the last part.

The element we do this with is the one that was clicked on. ( var str = element.id:wink:

We then combine the word “large_” with the result and search for that ID i.e large_PIC2, check the resulting elements style.display and change it accordingly.

3 Likes

Hi kerguelen,
I’m sure that it is possible but… unfortunately I’m not a js developer :wink:

Maurizio

I update the code above. I forgot to put something in that would hide any already showing large images. That should be fixed now.

See my answer above. It demonstrates a show/hide single javascript

Another alternative would be to toggle the hide/show function by clicking on the thumbnail…

var bigHide = hypeDocument.getElementById("big")

if (bigHide.style.display == "none") {

hypeDocument.getElementById("big").style.display = "block";
}

else if (bigHide.style.display == "block") {

hypeDocument.getElementById("big").style.display = "none";
}

show-hide1.hype.zip (29.6 KB)

2 Likes

Great Mark!
I’m going to try it asap.
thanks
Maurizio

Thanks Greg,
I have to try it. Does it works applyed to many elememts too?

Maurizio

It only work on one set of pictures (thumbnail & Big) Someone with more javascript experience may be able suggest something better.

Thanks Mark !
How would you mix your solution with Gasspence Show-hide1.hype doc ?
Would you post a hype document to show how to integrate it ?

Here are two more versions.

The first. uses the images loaded in the hype resources.
And uses the ${resourcesFolderName} variable along with the id name to find the corresponding jpg file.
Rather than put the image element for the large image on the page, it uses a hidden Rectangle as an image viewer and changes the image viewer’s background image.

When you click the image viewer it will blank the image and hide itself using the style.display none

The second. does the same as the first but uses a folder held on the same domain as the hype page.
The folder holds the large images that correspond tothe thumbnails you add to the page. Again using ID and file name.

For the second version I have included the image folder with the images in the zip and you should place it with the exported html.

Both versions are using buttons with thumbnail images but you can use what you want as long as the IDs are correct.
Both also hide the image and the viewer if the same thumbnail is clicked.

show-hide From_ResouceFolder_1.zip (615.7 KB)

show-hide From_Site_Folder_2.zip (614.8 KB)

2 Likes

Excellent job Mark…

Lovely ! Thanks so much !
How can we also change the thumbnail image at the same time to show this specific button has been pressed ? For the cas of thumbnail and big image are two different images.

This is rudimentary but works and give you an idea, But hopefully someone can show us how to do it in pure Hype…

Add this code after the var str = element.id; line

var className = element.className;
  
  var allImageButtons  = document.getElementsByClassName('imageButton')
for (i = 0; i < allImageButtons.length; i++) {
  
 
    allImageButtons[i].style.opacity = "1";
  
}
if (className === 'HYPE_element imageButton'){

element.style.opacity = "0.5";

}

And then make sure each button Class Name is set to imageButton in the identity inspector

You may prefer the Selected button to be the one that is fully opaque. So you can reveres the values in the code and set the buttons to start of as 50% opacity using the Element Inspector.

2 Likes