开发者

Help me create an iPad photos-like gallery with JavaScript

开发者 https://www.devze.com 2023-03-16 05:26 出处:网络
I\'ve been playing around with a gallery similar to that of the iPad\'s photos app, where you have thumbnails neatly stacked and upon clicking(touching) they fly out in a grid layout. If one gallery

Help me create an iPad photos-like gallery with JavaScript

I've been playing around with a gallery similar to that of the iPad's photos app, where you have thumbnails neatly stacked and upon clicking(touching) they fly out in a grid layout. If one gallery/stack is already open when you click another stack, the photos should pile up at their original position before the next set 开发者_如何学Canimates out.

I though something like Isotope would be helpful here, but I'm having a real hard time making it stop overwriting itself. Also, I can't quite figure out how to make it seem as if the thumbnails fly out from the "cover image".

I put a simplified version of what I've got so far on JSFiddle.

Any help is greatly appreciated. I feel like I'm in a little over my head here :)

My question is: how do i make it seem as if the thumbnails fly out from the "cover image"?


You could have an absolutely positioned DIV with a full-size image inside.

Initially, position the div and scale the image such that it perfectly overlaps with the thumbnail.

Then, animate the location and size of both to bring them to the center of the screen at the size you want.

0

精彩评论

暂无评论...
验证码 换一张
取 消