Javascript Image Zoom Timeout


#1

First, let me say that hands down this is one of the best forums I have ever been a part of.
So thank you to everyone who has contributed your knowledge and expertise!

Ok, I’ve gotten this far. What I can’t seem to do is have the image zoom function timeout after five seconds and return to it normal size.

I’ve attached the example.

Image Zoom_example.zip (449.1 KB)


(Mark Hunte) #2

Keeping the code close to what you have I moved the un zoom, rest click to new functions ( inside zoom2())

This enables you to call them from you if else condition code in zoom2()
And add a new 5 second timer

I also added another function that get the last called monies time line .i.e 5,10, 15 and runs the in reveres.

Each of you monies hype functions also have a new line
window.time_Line = event.timelineName
Which that last function uses.

This is all a quick edit to give you an idea

Image Zoom_example_mhv1.hype.zip (450.0 KB)


#3

Just an FYI for other people to jump in it would be best to link to any other posts on the forum regarding the same project. So we know what’s been done and can follow the example better. I appreciate Mark has prob done some work on this already (perhaps) but if someone wanted to help further or even if Mark was unavailable then we can jump in. :wink:


#4

Yes, I see the error in my ways!. Excuse me while I re-enroll into a Javascript 101 class.


(Mark Hunte) #5

Thanks ,

I was not aware nor remember of other any other threads with this same project so @DBear’s advice is very good advice.
It would have been good to know or be reminded. Also future note: You can use those same threads to keep things together if your new question is related and not too far off topic…


#6

I will summarize my original issue along with your replies into the previous thread and clean up this mess I’ve made. Sorry guys.


#7

I’m just assuming that this is/was the case and wasn’t sure whether you’d done anything previously on the same project. It looked like it was something that was on going but I wasn’t sure and thought I would just chime in :slight_smile: all in all though the outcome is still the same … :slight_smile: well done sir :slight_smile:


#8

No worries @lucid. just a polite note going forward. No mess … everything is a learning curve.


#9

OK. So there seems to be a Z-index issue wth the “zoom out” timeout.
If you click on the icon before it times out automatically, the z- index works fine. It stays above all the other elements until it’s back to it’s thumbnail size. The time out drops it below the elements. I thought it would be a simple case of just adding the settlement z index property again it the Zoomback function. Not the case.
We couldn’t see this from my original example so I added some color to make it easier to see.

Image Zoom_example_mhv1.hype.zip (450.0 KB)


#10

I noticed that for the “click to close the image” - there is a timeout (1000) for “resetClick()” (reset z-index)…

else if (setZindex == 999){ //reset clicked image to original size (thumbnail) & position
	zoomBack()

   setTimeout(function(){ // wait 1 second (i.e. 1000 milliseconds) before setting clicked image's z-index back to "0"
		resetClick()
		}, 1000);	
	}	


but for the “timeout to close the image” there is not a timeout for the “resetClick” function.

setTimeout(function(){ 
		  zoomBack()
		  resetMonies()
		 resetClick()
		}, 5000);

Maybe this instead?
setTimeout(function(){ 
		  zoomBack()
		  resetMonies()
		  setTimeout(function(){ // wait 1 second (i.e. 1000 milliseconds) before setting clicked image's z-index back to "0"
		        resetClick()
		   }, 1000);
		}, 5000);

I gave this a quick go and appears to work - but the adjacent thumbnails appear to move slightly when the chosen image is clicked and then again when it recedes into position.

I do not have enough time right now to run through things any further.