search

NUKnightLab / juxtapose

JuxtaposeJS is a JavaScript library for making before/after image sliders
http://juxtapose.knightlab.com/
Other
844 stars 133 forks source link

Figure out why example on juxtapose.knightlab.com doesn't resize on `window.onresize` #76

Open hbillings opened 9 years ago

hew commented 9 years ago

I have noticed this too. I found that if you remove the static width declaration and replace it with 100%, the slider will resize much more efficiently. The tradeoff with this method is that you have to pop the slider into some kind of grid/container, but that is pretty easy.

the picture

I'm going to hold off a pull request, as I'm guessing we'd want to find a bit more of an efficient way to implement — maybe some kind of option toggle?

jfromm commented 8 years ago

The slider itself is responsive now, but the height of the iframe is set to the height of the original image. On smaller displays this causes rather huge white space. How can I prevent this?

JoeGermuska commented 8 years ago

@jfromm if you are using iframes you can (and should) set the height of the iframe explicitly, using media queries if that's appropriate.

For a while we maximized the height of juxtapose images in the available space, but then we realized that this spoils any effort to have two images which closely overlap, such as satellite imagery or other carefully composed before-and-after photos.

jfromm commented 8 years ago

@JoeGermuska Thanks for your quick response. We're looking for a way in which our editors can use juxtapose slider in cms articles with as lowest possible technical skills. Often they do not even know the image dimensions. That's why setting the height of the iframe explicitly is not the best way. Do you have any idea how this could be solved?

JoeGermuska commented 8 years ago

@jfromm We have quite a challenge in finding the balance between ease of use and configurability, not to mention the lack of insight we have into the variety of environments where a Juxtapose slider might be installed.

Most of the solutions I've seen for embedding iframes and keeping them responsive, including a flexible height, are dependent on CSS rules which we can't put in the embed copy/paste. (see for example this).

We're interested in solutions for this, but haven't come up with one yet.