YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

UIkit 3 Beta 26 released

New lightbox component

Jul
20
UIkit 3 Beta 26 released

Today we are excited to announce the release of UIkit 3 Beta 26. This also marks the moment many of you have been waiting for: We are introducing the new Lightbox component! It includes various features to create visually more powerful galleries.

Lightbox

The new Lightbox component is a comprehensive feature to quickly create image and video galleries. Visitors can scroll through pictures using a touch and swipe navigation, while on non-touch devices they can apply regular mouse drag. Alternatively, the keyboard navigation can be used just as easily. Thanks to hardware accelerated CSS3 transitions, you can choose from three basic effects to create smooth animations when clicking through the Lightbox gallery: Slide, Fade and Scale.

When using devices with mobile data, smart preloading comes in handy as only 3 images are loaded at a time, reducing the data volume consumption to a minimum.

In addition to this, when transitioning from one image to the next, each click is automatically counted leading you to your desired image, no matter how fast you click. Animations even accelerate to keep up with your pace. Images and videos inside the Lightbox gallery are fully responsive, meaning that they are resized automatically to fit the viewport when being used on mobile devices.

Lightbox image gallery

Video support

Apart from images, it is also possible to include HTML5, YouTube or Vimeo videos in the lightbox. As you scroll through them, they are individually paused and continue to play where you left off. So, whenever you close the lightbox or switch to a different slide, the current video will pause and resume at the same spot as soon as it is reopened.

The new uk-video attribute from the Utility component achieves the same thing. The autoplay and automute options can be used to automatically start and mute background videos. This is useful in combination with the Cover component, but will also come to effect in the future slideshow.

These are the main innovations of this UIkit release. We are really happy with how the Lightbox component turned out. Feel free to leave your feedback in the comments section and let us know which new feature you are the most excited about.

By Sascha | | Posted in UIkit

Comments (17)

  • ryan.jones

    ryan.jones

    | Profile |
    Awesome! Thank You!!
  • migg

    migg

    | Profile |
    Very thoughtful, tedious and fine details there that make pretty darn impressive.

    Hope to see that kind of craftsmanship in new components!
  • akcreation

    akcreation

    | Profile |
    bravo guys - thanks for this much desired addition to uikit 3 :)
  • ali.magomadov

    ali.magomadov

    | Profile |
    bravo guys
  • bart.jan

    bart.jan

    | Profile |
    thank you! - can no do without "carying" widgetkit
  • carl.gerhard.wieners

    carl.gerhard.wieners

    | Profile |
    Slideshow next, please. :-)
  • jorgercosta

    jorgercosta

    | Profile |
    +1 for slideshow

    Also animations effects look the same on https://getuikit.com/docs/lightbox
  • triangle

    triangle

    | Profile |
    When will this be releases in Pro?
    • vladimir.eliseev

      vladimir.eliseev

      | Profile |
      upper line with close icon cover the image and for me don't needed at all. Could your remove it?
      • sven.grossenbacher

        sven.grossenbacher

        | Profile |
        add your own css

        .uk-lightbox-toolbar-icon {display:none;}
  • alberto.dessi

    alberto.dessi

    | Profile |
    So is it now implemented in the yootheme pro 1.8?
    • getyoowoo

      getyoowoo

      | Profile |
      No, not yet but I believe it will be included within the upcoming PRO v1.9 in a few days tops.

      Also... I believe the multi site / child theme thing will then be working...

      YOOWOO!

Leave a comment

Please login to leave a comment.