Lity - Carousel

[SebastienCruz]

Hi Everybody,

Not really an issue here, I modified a little but the code to have the possibility of using Lity as a carousel Lightbox. I put here the modifications I've done to do it.

It's very simple modifications : in lity.js : l.40 : we add two buttons in the template, preview arrow and next arrow template: '<div class="lity" role="dialog" aria-label="Dialog Window (Press escape to close)" tabindex="-1"><div class="lity-wrap" data-lity-close role="document"><div class="lity-loader" aria-hidden="true">Loading...</div><div class="lity-container"><div class="lity-content"></div><button class="lity-close" type="button" aria-label="Close (Press escape to close)" data-lity-close>&times;</button><button class="lity-prev" type="button" aria-label="Previous" data-lity-previous><</button><button class="lity-next" type="button" aria-label="Next" data-lity-next>></button></div></div></div>' l.552 to l.618 : In Initialization, we add the carousel fonctionnality :

// Adaptation Lity Carousel
        var iscarousel = false;
        // two classes to know if the arrows are enabled or not ( prev arrow on first slide and next arrow on last slide are disabled)
        var disable_prevbtn_class='';
        var disable_nextbtn_class='';
        // the previous and next openers for the current slide
        var prevopener=false;
        var nextopener=false;
        var wrap=opener.parent();

        if(opener.is('[data-lity-carousel]') || wrap.is('[data-lity-carousel]') ){
            prevopener=opener.prev();
            nextopener=opener.next();
            if(prevopener.length===0) //if there is no slide before the current one
            {
                disable_prevbtn_class=' disable_prevbtn ';
                prevopener=false;
            }

            if(nextopener.next().length===0){//if there is no slide after the current one
                disable_nextbtn_class=' disable_nextbtn ';
                nextopener=false;
            }

            iscarousel =true;
        }

        // we add disable classes, '' is added if it's not required
        element
            .attr(_attrAriaHidden, 'false')
            .addClass(disable_prevbtn_class + disable_nextbtn_class+' lity-loading lity-opened lity-' + result.handler)
            .appendTo('body')
            .focus()
            .on('click', '[data-lity-close]', function(e) {
                if ($(e.target).is('[data-lity-close]')) {
                    self.close();
                }
                else if ($(e.target).is('[data-lity-previous]') ) {// test if the button clicked was previous arrow

                    if(iscarousel)//if it's a carousel
                    {
                        if(prevopener)//we check if a slide is available before and display it
                        {
                            self.close();
                            lity(prevopener.data("lity-target"),lity.options,prevopener);
                        }
                        else{return}
                    }    
                    else{return}//else, we do nothing - button is not active
                }
                else if ($(e.target).is('[data-lity-next]') ) {// test if the button clicked was next arrow

                    if(iscarousel)//if it's a carousel
                    {
                        if(nextopener)//we check if a slide is available after and display it
                        {
                            self.close();
                            lity(nextopener.data("lity-target"),lity.options,nextopener);
                        }
                        else{return}
                    }    
                    else{return} //else, we do nothing - button is not active   
                }
            })
            .trigger('lity:open', [self])
        ;

        // End of modifications for Lity Carousel

in lity.css : from l.112 : we style prev and next button as close button, and positions all the buttons, and style disable states

/*Here we adapt lity-prev and lity-next as the close button*/
.lity-close, .lity-prev, .lity-next {
  z-index: 9994;
  width: 35px;
  height: 35px;
  position: fixed;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  padding: 0;
  color: #fff;
  font-style: normal;
  font-size: 35px;
  font-family: Arial, Baskerville, monospace;
  line-height: 35px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  border: 0;
  background: none;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.lity-close{
  right: 0;
  top: 0;
}
/*And we place them and adapt the disable state*/
.lity-prev{
  right: 55%;
  top: 0;
}
.lity-next{
  right: 45%;
  top: 0;
}
.lity.disable_prevbtn .lity-prev,.lity.disable_nextbtn .lity-next{
  opacity:.35;
  cursor:Default;
}

After that modifications, all you have to do is to wrap all your <a data-lity ...> in a <div data-lity-carousel>. If you don't want to wrap it, you can also add data-lity-carousel to all the<a data-lity...>

Here's an example on my website, coupled with Swiper to have a carousel of thumbnails. ( this page is still in construction today the 5 octobre 2018 )

Hope you'll find this useful,

Regards,

Sebastien

[TheSpookyCat]

Wouldn't this be better off as a PR?

[SebastienCruz]

Probably, to be honest, it was my first intervention on GitHub ever, and I don't know well all the details... I will try to do so but it seemed quite complicated to me...

EDIT : Actually, after looking into the PRs, I saw that a similar request was not wanted by the creator. I think it's just a simple hack for those who want to do it, without having to go with another Lightbox.

[TheSpookyCat]

Turns out, after thinking I would never need a lity carousel, I do! Thanks, for this. Appreciate it :)

[Sibbo100]

Hi Sebastien,

I'm trying to get the carousel function to work on a site I'm currently building locally, but I keep getting an error in my console and the next/previous buttons just close the popup.

Error: lity.js:674 Uncaught TypeError: Cannot read property 'preventDefault' of undefined

This error appears on line 610 after I've added the Carousel code.

Any ideas?

Thank yuo Sibbo100

[SebastienCruz]

Hi, The problem comes from the function lity(). The target seems to be undefined. There are two calls to it : l597 and l610, depending on the button you click ( prev or next ). Are you sur your data-lity-target is well defined ? Can we have some code ( Just HTML if you didn't change anything to the code I shared.)