Issue adding a click event to a draggable image gallery, jQuery, Greensock

See more:

jQuery

image

animation

, +

I’m stuck at the 1 yard line with this draggable gallery. I created a unique hover effect that creates an illusion of depth (thumbnail image pulls back at same rate as frame grows) and am premiering it in this draggable gallery that a staff member at Greensock created and helped me adapt.

http://codepen.io/code-a-la-mode/pen/BNeNGq

This Is the click event at line 185 of my pen:
* The “tiles” are absolute and the element variable is the main div for the tile.

// Image click event added
element.on("click", function() {
zoomIn2();
});
function zoomIn2(time) {
if (tile.isDragging) return;
time = time || zoomTime2;
TweenLite.to(element, time, { scale: tileScale2, zIndex: "+=10000"});
TweenLite.to(image, time, { scale: ratio});
}

My last hurdle is getting the newly added click event that further scales up the image to co-operate on top of the already active hover state. What I have now is this: hover scale-up > click > (hover begins to scale-down image as if on mouseLeave, but then the onclick scale-up kicks in a creates a cool bounce effect.) > scale-up (intended 80% viewport) - Stuck Here - you can’t click the image closed but need to mouseLeave for the image to scale back down. When the image is big, a new user won’t know to roll curser away…

Solving this, I’m sure is super basic, however, two other things need to be controlled with solution.

Prevent Overflow:
The second scale up animation needs to either move to center (uniform option)/ or to be pushed back toward center with a boundary at viewport edge that pushes the animated image away from overflowing (about 40% of just the outer rows). For some reason I couldn’t get the image tiles (absolute) to respond to any parent container in order to do any centering, thus officially make this project above my level of ability.

Abnormal Blur:
The second issue is an unnatural blur that happens after the image stops growing. I tried this with my own 1K pixel images (sharp at fullscreen) and it did the same thing as with the existing LoremPixl. The blur looks more like video on pause than a pixelated image so it may be in a pause state - something to look at with Dev Tools.

I’m ager to see some of your solutions, so please feel free to give it a go...