CODEWITHSUNDEEP
javascriptjquerycssjquery-cyclejquery-cycle2
deshg
deshg

Reputation: 1253

How to prevent overlapping slides and ensure dynamic container resizing in jquery cycle2 nested slideshows?

I am using cycle2 (http://jquery.malsup.com/cycle2/) to produce a main slideshow containing a number of other slideshows (which contain images and text of variable heights). I want the height of the parent and current slideshow (and container) to resize to the current slide height. This nearly works but I am having a few problems that I can't for the life of me see why and would be massively grateful if someone could point me in the right direction.

You can see a live fiddle at http://jsfiddle.net/deshg/x8xaxx39/

My questions are:

1) Why on first load does it show the 2nd nested slideshow through the first one (when i click on the main pager it fixes it)?

2) Why on first load does cycle-slideshow height not match the current slide height as i'm using the wait command to wait for the images to load and have auto-height set to container (when i click on the main pager it fixes this as well)?

3) Is it a bug that when you manually drag to resize the viewport width sometimes the cycle-slideshow height value is not updated which means the parent height doesn't update or is there a way to solve this?

4) When you click to view gallery 2 and then click back to view gallery 1 the gallery 1 pager (the thumbnails at the bottom) don't work as gallery 2 has a higher z-index despite not being part of the active slide? How do I ensure the active slide has the highest z-index?

Thanks so much for any advice you can give, it doesn't seem to be playing nice for me!

Dave

FYI the related code is:

<div class="module">
    <div class="inner">
        <h2>GALLERIES</h2>
        <!-- empty element for pager links -->
        <div id="custom-pager-galleries" class="custom-pager"></div>
        <p>Ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
        <div class="cycle-slideshow gallery"
            data-cycle-fx="fade"
            data-cycle-timeout=0
            data-cycle-slides="> div"
            data-cycle-pager="#custom-pager-galleries"
            data-cycle-pager-template="<a href=#> {{name}} </a>"
            data-cycle-loader="wait"
            data-cycle-auto-height="container"
            data-cycle-hide-non-active="true"
            >
            <div data-name="Gallery 1">
                <div class="cycle-slideshow"
                    data-cycle-fx="fade"
                    data-cycle-timeout=0
                    data-cycle-slides="> div"
                    data-cycle-pager="#custom-pager-gallery"
                    data-cycle-pager-template="<a href='#'><img src='{{imgsrc}}' class='gallerythumbnail gt{{index}}'></a>"
                    data-cycle-loader="wait"
                    data-cycle-auto-height="container"
                    >
                    <div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
                        <img src="http://malsup.github.io/images/beach2.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 1</strong></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
                        <img src="http://malsup.github.io/images/beach3.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 2</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach1.jpg">
                        <img src="http://malsup.github.io/images/beach1.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 3</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
                        <img src="http://malsup.github.io/images/beach2.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 4</strong></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
                        <img src="http://malsup.github.io/images/beach3.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 5</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                </div>
                <div class="pager">
                    <div id="custom-pager-gallery" class="custom-pager gallerythumbnails"></div>
                </div>
            </div>
            <div data-name="Gallery 2">
                <div class="cycle-slideshow"
                    data-cycle-fx="fade"
                    data-cycle-timeout=0
                    data-cycle-slides="> div"
                    data-cycle-pager="#custom-pager-gallery2"
                    data-cycle-pager-template="<a href='#'><img src='{{imgsrc}}' class='gallerythumbnail gt{{index}}'></a>"
                    data-cycle-loader="wait"
                    data-cycle-auto-height="container"
                    >
                    <div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
                        <img src="http://malsup.github.io/images/beach2.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 2</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach1.jpg">
                        <img src="http://malsup.github.io/images/beach1.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 1</strong></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
                        <img src="http://malsup.github.io/images/beach2.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 3</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach3.jpg">
                        <img src="http://malsup.github.io/images/beach3.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 4</strong></p>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                    <div data-imgsrc="http://malsup.github.io/images/beach2.jpg">
                        <img src="http://malsup.github.io/images/beach2.jpg" alt="">
                        <p class="green"><strong>IMAGE TITLE 5</strong></p>
                        <p>xfsdaLorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sagittis laoreet nunc, at malesuada ipsum eleifend non. Donec mattis, neque at venenatis tincidunt, risus velit.</p>
                    </div>
                </div>
                <div  class="pager">
                    <div id="custom-pager-gallery2" class="custom-pager gallerythumbnails"></div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 269

Answers (1)

Ben
Ben

Reputation: 11502

What you're trying to do is not easy, or provided for "out of the box".

First,

data-cycle-auto-height="container"

is not an allowed option. Check the API. It needs to be an integer, a ratio, or the string "calc".

Second, autoheight can be tricky. You're on the right track with using the wait option on the loader. The problem is that the parent slideshow will still initialize before the children slideshows initialize, simply because it occurs earlier in markup. What you probably want to do is initialize the child slideshows, then initialize the parent slideshow as a callback once both of the child slideshows are fully loaded. Only then will they have layout height that the parent slideshow can use for autoheight calculations. You will need to move off of the declarative syntax, and instead to call cycle slideshow imperatively. I would suggest using jQ deferred objects, and when() syntax to simplify the callback structure.

In semi-pseudo-code:

var childSs1 = new $.Deferred();
var childSs2 = new $.Deferred();

$('.child-slideshow1).on("cycle-post-initialize", function() {
    childSs1.resolve();
});

$('.child-slideshow2).on("cycle-post-initialize", function() {
    childSs2.resolve();
});

// The following will be called asynchronously
$.when( childSs1, childSs2 ).done(function () {
    $(.parent-slideshow).cycle({options});
});

Third, you are most likely running into issues with event bubbling. If an event fires on a child slideshow, that synthetic event will bubble to all parent elements in the DOM, including your parent slideshow(s). That is going to confuse the heck out of the parent slideshow, because it's going to interpret those events as applying to it. Cycle2 wasn't really written with this use case in mind. That isn't to say it can't be done. But you probably will need to do lock down bubbling on all cycle events with something drastic like:

$( ".all-slideshows" ).on("cycle-after cycle-before cycle-bootstrap
cycle-destroyed cycle-finished cycle-initialized cycle-next
cycle-pager-activated cycle-paused cycle-post-initialize
cycle-pre-initialize cycle-prev cycle-resumed
cycle-slide-added cycle-slide-removed cycle-stopped
cycle-transition-stopped cycle-update-view", function( event ) {
  event.stopPropagation();
});

Also, it would make it easier for people to help out if you reduced your fiddle as much as possible. Hope this helps.

Upvotes: 1

Related Questions