Hide and show images (or other) by javascript

It works perfectly !!!
Many thanks !

and the same only for PDF files?

This is hiding and showing an element if you PDF is contained as an element within Hype then yes.

I have to show the large picture and also the file name of the picture when the thumbnail is pressed, what has to be added to the Javascript so I can display also the filename of the picture? maybe in another display box called textViewer.
Thanks in advance to all the forum.

Hi @laggarto ,

Without seeing your set up I can only offer a suggestion.

Don’t add any changes to which ever Javascript is showing the image.


Put the image and caption elements in a Group.

Give the Group the id or class name you use in the Javascript.

Doing this, the Javascript should then act on the Group.

Remember to remove the id from the image or change it to a unique one other than what is now being used on the Group.

Hi Mark,
thanks for your reply.
I’m using the same last file on this thread, that you uploaded.
show-hide From_ResourceFolder_1

Ah, I see

Ok all we have to do is similar to the image view.

We add a rect and hide it. This will be the caption box.

Then in the JS I have added an Array (like object) i.e key valued pairs {Name : value}

The names will be the id of the thumbnails and the values will be the captions.

We then just show and hide the caption box when needed and change it’s innerHTML also when needed.

We change the innerHTML by getting the matching thumbnail name in the array which will return the value caption

show-hide From_ResouceFolder_WithCaption.hypetemplate.zip (616.7 KB)

Thanks a lot Mark.
I’m going to check and adjust.
Gotta learn Javascript in order to master Hype.
Thanks again

Hi Mark, I’ve been following this thread hoping to learn from it( which I am, slowly). I’m learning Javascsript at the minute, so I don’t have a full grasp of what everything means. Can the string for ‘.jpg’ be substituted? I’d like to pop up a symbol that can be hovered over for an animation after each thumbnail is clicked. If you have time the will to help, I have a file I could upload. Many thanks, Dan

I can have a look,

Please post you Project.

Thank you Mark, for responding.

I’ve been using your own file here as inspiration (show-hide From_ResouceFolder_WithCaption.hypetemplate.zip). Ideally, something like you’ve created would be best. The grasping of classes/arrays is beyond me at this stage.
If there was a much easier way like a gotoInTimeline where I could specify each point I’d want, that would also be appreciated. I would rather learn or be instructed than just someone do it for me.
Thank you very much for your help Mark
GalleryTest.zip (813.1 KB)

Would this be considered The Poor Man’s Version, in which you simply use the URL link?

That would definitely work – it would load the image in a new window :slight_smile:
But keep in mind that the ‘back’ button would not work in that new window. The user would need to close the tab/window to get back to the page they were on.

Hi Greg, I'm new to Hype and Javascript but I'm hoping the answer to this is simple. I can definitely make this javascript work if the object starts out hidden but if the object starts as visible, it doesn't seem to work. I need to make my objects start out showing on the screen, and hide them as necessary. Is there a way I can set this up on scene load or in some other way, maybe assign them a default display style of "block". Sorry for my lack of awareness of this.

Thanks, muzz

Hi Muzz, you can use Hype’s new ‘getter - setter’ function to do this. Here’s a sample script…

var x = hypeDocument.getElementProperty(element, 'opacity')

if (x == 1) {

hypeDocument.setElementProperty(element, 'opacity', 0, 3.0, 'easeinout')}

else if (x == 0) {

hypeDocument.setElementProperty(element, 'opacity', 1, 3.0, 'easeinout')}

toggle-fader.hype.zip (11.7 KB)

Note: I used the same script on both elements

Thanks for this Greg, much appreciated.
I will have a go at making it work on an element other than the one being clicked. I’m hoping it is achieved by setting a variable

hypeDocument.getElementById

and using this instead of

element.

Cheers, muzz

UPDATE: managed to do it! - my first foray into trying to work out Javascript. Thanks again.

2 Likes

You could replace the word 'element' with the ID of the item you want to affect, for instance if I set the "Unique Element ID" to 'square2', the script would look like this...

var x = hypeDocument.getElementProperty(square2, 'opacity')

if (x == 1) {

hypeDocument.setElementProperty(square2, 'opacity', 0, 3.0, 'easeinout')}

else if (x == 0) {

hypeDocument.setElementProperty(square2, 'opacity', 1, 3.0, 'easeinout')}

toggle-fader2.hype.zip (11.8 KB)
Note: I took the script off of the second element

1 Like

Thanks Greg, I got it working. Just one point - the object that has it’s opacity reduced is still able to be clicked on and manipulated. I’m wondering if there is a way to make it hidden and revealed in such a way as to be “inaccessible” when hidden.

Cheers, Murray

Hi Muzz!

Here is one way to do it using the "style visibility property".

Hype Project Demo: toggle-fader2_JHSv1.hype.zip (14.7 KB)

Building on @gasspence 's Demo:

var sq2 = hypeDocument.getElementById('square2');
var x = hypeDocument.getElementProperty(sq2, 'opacity');

if (x == 1) {
	hypeDocument.setElementProperty(sq2, 'opacity', 0, 3.0, 'easeinout');
	setTimeout(function(){ sq2.style.visibility = "hidden"; }, 3000);
}
else if (x == 0) {
	hypeDocument.setElementProperty(sq2, 'opacity', 1, 3.0, 'easeinout')
	sq2.style.visibility = "visible";
}	

Note: In addition to using _"sq2.style.visiblity"_ we need to set a timer on implementing the initial hiding of "square2" because it will disappear instantly instead of with a fade out (going the other way - showing "square2" again - is not an issue). We want the "visibility = hidden" to occur _after_ the opacity fade out has occurred.

Our timer in the code is accomplished appropriately enough with the "setTimeout" function.

setTimeout(function(){ sq2.style.visibility = "hidden"; }, 3000);

The "3000" is 3000 milliseconds = 3 seconds > which matches the 3 seconds in the "setElementProperty".

1 Like

Using 'opacity' the element is still there, just not visible and therefore somewhat accessible.
I don't think you will be able to make it visible again if you use the 'display' property...

var bigHide = hypeDocument.getElementById("big")

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

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