Disappearing Image Slider Content (8 posts)

  1. mklar
    Posted 3 years ago #

    I'm experiencing some strange behavior with Collapse-O-Matic when I put certain content inside a collapsed area. In this case, the content is a responsive image slider called ILC AllSlider. When the content is not inside of a collapsing area, it appears as expected.

    I suspect it's either a jQuery conflict or the image slider.

    You can see the behavior in action at the URLs below.
    u: test
    p: test

    Collapse-O-Matic used (thumbnails appear, but no image):

    Collapse-O-Matic not used (image slider appears normally):

    I appreciate any help you might be able to offer.


  2. Baden
    Plugin Author

    Posted 3 years ago #

    try giving the target a class of maptastic like so:

    [expand title="title" targclass="maptastic"]content with your slider[/expand]
  3. mklar
    Posted 3 years ago #

    Ahh, that's way better. The slides are now appearing, however, when the slides load, they no longer sense the size of their container, so the image is too large, it is not scaled to fit, and the excess is hidden.

    I could shrink the size of my images, but I like having images that show nicely on retina displays.

    Thanks for your help.

  4. mklar
    Posted 3 years ago #

    btw, if I allow the page to load, and then make the browser window small and then back to its original size, the slide images resize themselves to the expected size.

  5. Baden
    Plugin Author

    Posted 3 years ago #

    This is a tricky issue indeed. The problem is as follows:

    1. if you DO NOT use targclass="maptastic" then by the time your image slider is processed, the content area has a height of 0 (collapsed) and the responsive slider is not sure what to think about that. Thus creating your original issue.
    2. if you DO use targclass="maptastic", then instead of 'collapsing' your content area, it simply moves it waaaay off the screen. Now when the responsive slider is processed, it has all kinds of space, and longer senses the size of the container, so the images are too large.

    So where does that leave us? What we need to do, is wait until the slider has been inserted, figured out how much space it has to work with... resized everything and THEN collapse the container.

    We'll noodle on this a bit and see if there is not a way to tell collapse-o-matic to hold of on doing it's thing until all other plugins have done theirs. In the mean time can you check and see if this fancy slider of yours has a callback? In other words the ability to call a function after it does it's magic?

  6. mklar
    Posted 3 years ago #

    Thank you for the prompt and very clear response. It's greatly appreciated.

    I've written to the slider developer. He seems to be pretty responsive, so I will be sure to let you know if he has a callback function in his slider.

    Again, thanks for your attention to my issue!

  7. Baden
    Plugin Author

    Posted 3 years ago #

    It's the way we (try to) roll! We'll get back to you in the next days with the results of our noodleing.

  8. mjchamplin
    Posted 3 years ago #

    Hey there,

    I'm having essentially the same issue.

    I'm attempting to use a responsive jQuery slider inside a collapse-o-matic box. In responsive mode, the slider just didn't show up -- or rather the controls did but no images. I can hard-code in the size, but this kills the responsive-ness.

    I read this thread and it all makes sense.

    Was wondering if you'd come up with any ideas?

    Thanks! (love love love the plugin)

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Collapse-O-Matic
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic