Slimmage with slideshows

[mwentz]

I am trying to use Slimmage and SlimResponse (with ImageResizer) with jquery Cycle2. Slimming is happening after Cycle2 is being initialized which is causing various issues. Depending on how I set up the slideshow and css, I am getting either no slideshow or the images after the first one are 160px.

I have the same issue with the Bootstrap Carousel, all the images after the first one are 160px. I'm guessing this is happening because the of the display:none on all but the first image.

[lilith]

In theory, Slimmage should be able to handle the image even if it (or a parent) has display:none set.

However, if the CSS that sets the max-width for each image isn't applied from the beginning (such as relying on a css class that is added by javascript later), then Slimmage might miss out on a CSS update.

Try calling this method after the slideshow cycles each time, it may help.

window.slimmage.checkResponsiveImages();

It's better, however, if you can make sure all the images are present in the DOM at startup and have the max-width setting already applied.

If this doesn't help, consider setting up a minimal example with just Slimmage + Cycle2 and sharing it here so we can perform debugging.

[mwentz]

I made three fiddles with various levels of success:

First the slidshow does not work. I think the issue is that cycle is seeing the noscript so it doesn't find any slides.
http://jsfiddle.net/ultimateawesome/DktBE/
(This isn't a big problem to me, the workaround is to put the image inside a container)

Second, I put the images inside a div so that the slideshow begins. The images are 160px. If I resize the window, the current image gets slightly larger.
http://jsfiddle.net/ultimateawesome/TrC9a/

Third, I tried the call you suggested (hopefully I implemented it correctly). The images seem to get one size bigger each time they cycle until they finally get to full size.
http://jsfiddle.net/ultimateawesome/2eC4H/

[lilith]

Slimmage needs to run prior to Cycle2, as Cycle2 clones DOM nodes, employes absolute positioning, and generally makes max-width evalualtion impossible.
jQuery plugins will typically always run before Slimmage. (Slimmage has to wait until CSS downloads). This is a good thing if that plugin is correcting layout (like a responsive shim). If it's mangling it, it's a bad thing.

Essentially, for any library that

• affects the container element of an image such that percentage values are wrong (dropping images into a sizeless absolute-positioned div is common)
• clones DOM notes and uses them later

That library needs to wait until after slimmage.js runs.

A method for Cycle2 is to disable auto-intialization, and run Slimmage during the bootstrap stage before Cycle can mess things up.

$( '.slides' ).on('cycle-bootstrap', function( event, opts ) {
window.slimmage.checkResponsiveImages();
}).cycle();

http://jsfiddle.net/2eC4H/3/

[mwentz]

That works, thanks! As a note, at first I was getting errors when I implemented that method because I was using slimmage.min.js. I switched to slimmage.js and it worked.

Amazing work on this. Thanks!

[cmachanic]

Hello!

I'm dusting this thread off...

I'm facing a very similar issue as mwentz did, and I've been following the thread to solve it.

We're using ImageResizer along with Slimmage, and serving the images in a Cycle 2 slideshow. I know the images are being rendered, but they're not showing up for me.

I just want to confirm whether or not your fiddle is still valid. I took a look at it, and the results are empty—which is what I'm getting too. ;)

Thanks in advance.

[lilith]

The approach is still valid, but ensure you use the latest version of slimmage.

On Apr 9, 2015, at 10:40 PM, 36lpi notifications@github.com wrote:

Hello!

I'm dusting this thread off...

I'm facing a very similar issue as mwentz did, and I've been following the thread to solve it.

We're using ImageResizer along with Slimmage, and serving the images in a Cycle 2 slideshow. I know the images are being rendered, but they're not showing up for me.

I just want to confirm whether or not your fiddle is still valid. I took a look at it, and the results are empty—which is what I'm getting too. ;)

Thanks in advance.

—
Reply to this email directly or view it on GitHub.