Streaming live at 10am (PST)

Lightbox or image zoom similar to Medium


#1

The image zoom on Medium is really slick. You click on a single image and it enlarges while everything behind it fades to white. Pretty standard. But the really nice part is that not only clicking anywhere but also scrolling zooms the image out and fades the page back in. It's super slick.

Does anyone think it's possible to recreate this effect in webflow using behaviors - especially the scroll?

Here's an example: https://medium.com/re-form/antler-farm-dbd3ba1ec3f2


#2

Hey @tubes, that looks beautiful! We'll add it to our list of features to consider for the future! smiley


#3

Medium is pretty rad in what they do. The guys and gals behind the design of Medium is Teehan-Lax and they rock too. Check out their case studies. Mind blown.


#4

Fluidbox was apparently built to mimic (& improve upon) the features of the Medium lightbox.

http://terrymun.github.io/Fluidbox/


#5

I looked at fluid box but it works differently. 1. It fades from the smaller image to the larger version as it zooms (which is great for file size but it's not as smooth) and 2. It doesn't zoom out when any scrolling is detected. Those are the two features that make Medium's solution unique.


#6

@callmevlad can it be done by adding a custom code?


#7

i like fluidbox. will see if I can incorporate that into webflow


#8

@Mogeek fluidbox is nice but it's not near the medium lightbox effect, the whole idea of the ixd achieved by medium is that the image returns nicely to it's place upon scrolling, in fluidbox it's not achivable.


#9

The proper way to do it is to use this:
http://constructs.stampede-design.com/2015/05/create-image-zooming-effect-using-zoom-js/
Now the real question is if it can be reproduced inside webflow..what do you think?


#10

I'll play around with it. See what can be done.


#11

Thanks @Revolution , that will be great!


#12

Bump :sweat_smile:

I would love to have the same effect.
Has anyone achieved this in the meantime?


#13

It´s fairly simple to achieve this type of zoom effect in Webflow using zoom.js
I made a quick test here: http://playground-pk.webflow.io/fatzoom-js

1 Get the files here:https://github.com/fat/zoom.js

2 Add these references before tags in custom code
<link href="css/zoom.css" rel="stylesheet">
<script src="js/zoom.js"></script>
<script src="js/transition.js"></script>

3 Add data-action="zoom" to the custom attribute of the image

_Actually i found out that you can add the data-action to a higher level element such as rich text block and then all the images you add inside will zoom. Useful if you have a collection and don´t have the possibility to add a data-action directly to the element in Webflow.

https://github.com/fat/zoom.js


#14

Wonderful! Thanks a lot, will try this out!

Only a little tiny thing is missing in your test, the mouse should change to a zoom-icon :wink: But that is easily done in webflow ofc. Thanks for sharing!


#15

A pleasure. Sharing is caring. :smile: :beers:


#16

Thanks for sharing !


#17

thanks for the share @perkristian ! would you be able to share your read-only link?


#18

Shure thing @jcoger
Here you go:
https://preview.webflow.com/preview/playground-pk?preview=7d82fa608787287f13d4d0223314192c


#19

Thanks for sharing this!


#20