Chrome Versión 54.0.2840.98 on OSX Yosemite 10.10.05.
Christian, I really appreciate your time and your answers. I think i explained myself wrong. Anyway, i made the plugin work together with flexslider as you told me, setting the width and height (100vh, 100vw) to the flexslider and the image container. If the animation property of Flexslider is setted to “fade” works perfect and the setTimeOut function is not necessary. When i set it to “slide” the plugin needs the call wrapping in the setTimeOut function with at least 100 ms. Know it seams to work very well.

Thanks again Christian!

When you say the code is miscalculating the width, are you talking about on your website, or the Codepen I provided? The Codepen works for me on Chrome 54.0.2840.98. If the Codepen doesn’t work for you, please let me know your browser and version, and also your operating system and version. If the Codepen works, then there’s a problem with your code. Delete all CSS that targets the slider, use my Codepen as an example, and start adding your CSS back in until it breaks. Then you’ll figure out what’s going on.

I added a 100ms timeout because the Flex Slider takes some time to initialise (I’m not going to investigate why). It has nothing to do with the loading time or size of the image. My plugin runs when the image has loaded by binding to the `load` event. So the size of the image or time taken to download has no effect on the operation of the plugin.

When you say “In case of loading new big images wont be reliable solution”, is that what you’ve actually experienced, or are you just making an assuming it won’t work? Because, again, my Codepen demonstrates that it does work, with both small and large images.

Christian, Thanks for your quick reply!

Im using relative size for conteiner and slides (li) for full viewport withd and height. The timeout function works when the image was loaded before. In case of loading new big images wont be reliable solution 😔.

I see that the code is miscalculating the width of the image and the negative margin-left is not added. Is that because the css? Any ideas?

Thanks!!

Hi Juan,

I’ve created a little test with Flex Slider, and I made it work by explicitly setting a height and width on both the flex slider wrapper and the slides themselves, and by wrapping the .resizeToParent() call in a timeout. It works as intended – both portrait and landscape images resize correctly. If it doesn’t work for you, chances are you have some CSS interfering with the resizing. Please check the following demo, then check your codebase to figure out what you’ve done different.

https://codepen.io/levymetal/pen/WoKmpb

Please help me to find a solution!
thanks in advance!

This is the web im working on “slumber.juanmejia.info/”

Hi James, I haven’t built this into the plugin (interestingly enough no one has really asked for it!). However, you can apply a small tweak yourself which will achieve the result of ‘center bottom’. On line 52, simply change the -2 to -1, and the image will be positioned from the bottom. So line 52 would look like this:


var topOffset = (imageHeight - parentHeight) / -1;


Hope this helps

Thanks for this great plugin which has been perfect for my needs – and it’s working in responsive slideshows too which is brilliant.

I have a question – and I’m sorry if I’ve missed the answer somewhere else. Is it possible to position the images in their containing element as, for example, ‘bottom center’ rather than ‘center center’ – in the same way as background images can be positioned with CSS?

I mean misusing the library.

Hi Christian,

I got the problem fixed. It’s my fault in using the library,
Anyway Thanks you
Mr. non-magician 🙂