Simple Uikit Lightbox

by Kevin Pliester

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-beta.42/js/uikit-icons.min.js"></script>
<div class="uk-container uk-container-small">

  <div class="uk-card uk-card-default uk-card-body">


    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Dictum at tempor commodo ullamcorper. Quis eleifend quam adipiscing vitae. Bibendum enim facilisis gravida neque. Vivamus arcu
      felis bibendum ut tristique et. Consequat mauris nunc congue nisi vitae suscipit tellus. Placerat duis ultricies lacus sed turpis tincidunt. Vel turpis nunc eget lorem dolor sed viverra ipsum. Aliquet nec ullamcorper sit amet risus. Risus feugiat
      in ante metus dictum.<a href="https://pixelbuben.de/wp-content/uploads/2018/05/austin-neill-160129-unsplash.jpg"><img class="alignleft wp-image-1523 size-medium" src="https://pixelbuben.de/wp-content/uploads/2018/05/austin-neill-160129-unsplash-300x200.jpg" alt="Austin Neill Conviction Unsplash 1" width="300" height="200"></a></p>
    <p>Vulputate odio ut enim blandit volutpat. Aliquam eleifend mi in nulla posuere sollicitudin aliquam ultrices. At augue eget arcu dictum varius duis. Aliquam purus sit amet luctus venenatis lectus magna fringilla urna. Nam libero justo laoreet sit amet
      cursus. Sit amet facilisis magna etiam tempor. Sit amet cursus sit amet dictum sit. Tristique magna sit amet purus gravida. Amet facilisis magna etiam tempor orci eu. Aliquet nec ullamcorper sit amet. Gravida neque convallis a cras semper auctor
      neque vitae. A arcu cursus vitae congue mauris rhoncus aenean vel. Ornare quam viverra orci sagittis. Felis bibendum ut tristique et egestas. Neque viverra justo nec ultrices dui sapien eget.</p>
    <p>Magnis dis...

CSS

.alignright {
  float: right;
  margin: 1em -5em 1em 1em;
}

/* window < mobile */

@media all and (max-width: 678px) {
  .alignright {
    float: none;
    display: block;
    width: 100%;
    margin: 1em auto;
  }
}

/* window < desktop */

@media all and (max-width: 1020px) {
  .alignright {
    margin-right: 0em;
  }
}

.alignleft {
  float: left;
  margin: 1em 1em 1em -5em;
}

/* window < mobile */

@media all and (max-width: 678px) {
  .alignleft {
    float: none;
    display: block;
    width: 100%;
    margin: 1em auto;
  }
}

/* window < desktop */

@media all and (max-width: 1020px) {
  .alignleft {
    margin-left: 0em;
  }
}

.aligncenter {
  float: none;
  display: block;
  margin: 1em auto;
}

JavaScript

(function($) {

  // add lightbox wrapper to linked images
  $('a').find('img').each(function() {

    // options
    var showCaption = true
    var animation = 'animation: fade'
    var scrollspyNormal = 'cls:uk-animation-scale-up'
    var scrollspyRight = 'cls:uk-animation-slide-right'
    var scrollspyLeft = 'cls:uk-animation-slide-left'

    // vars
    var currentImage = $(this)
    var parentLink = $(this).parent('a')
    var currentAlt = $(this).attr('alt')
    var lightboxWrapper = parentLink.wrap('<div data-uk-lightbox>')

    // set animation
    if (animation.length) {
      lightboxWrapper.attr('data-uk-lightbox', animation)
    }

    // set caption
    if (showCaption === true) {
      parentLink.attr('data-caption', currentAlt)
    }

    // set scrollspy on image
    // alignleft
    if ($(currentImage).hasClass('alignleft')) {
      $(currentImage).attr(
        'data-uk-scrollspy',
        scrollspyLeft
      )
    }
    // alignright
    else if ($(currentImage).hasClass('alignright')) {
      $(currentImage).attr(
        'data-uk-scrollspy',
        scrollspyRight
      )
    }
    // normal
    else {
      $(currentImage).attr(
        'data-uk-scrollspy',
        scrollspyNormal
      )
    }
  })

})(jQuery)