LexyBox

<!-- CSS -->
<link rel="stylesheet" href="lexybox/css/lexybox.min.css">

<!-- JS -->
<script src="lexybox/js/lexybox.min.js"></script>

<!-- Initialization -->
<script>

  // Set options
  var options = {

    // Options
    effect: 'horizontal', // ['horizontal', 'vertical', 'fade']
    theme: 'dark', // ['dark', 'light', 'classic']
    swipe: 100 // Threshold of swipe gestures on mobile devices
    loop: false, // Rewind lightbox on edges
    single: false, // Forces single mode
    pager: true, // Enables pagination
    preload: false, // Load all media at once
    autoplay: 5000, // Autoplay feature in miliseconds

    // Self-explanatory
    label_close: 'Close',
    label_prev: 'Previous',
    label_next: 'Next',
    label_pager: 'Pagination',

    // Callbacks
    before_open: function(media, active_index) {},
    after_open: function(media, active_index, html) {}
    before_move: function(direction, media, active_index, html) {},
    after_move: function(direction, media, active_index, html) {}
    before_close: function(media, html) {},
    after_close: function() {},

  }

  // Init new LexyBox
  var lexybox = new LexyBox('.lightbox', options);

  // Selector for every situation
  // a[href$="jpg"], a[href$="jpeg"], a[href$="png"], a[href$="webp"], a[href$="svg"], a[href$="gif"], a[href$="mp4"], a[href$="ogg"], a[href$="webm"], a[href*="youtube.com"], a[href*="youtu.be"], a[href*="vimeo.com"]

</script>

Full HTML markup

Let's see what the HTML markup looks like to open Lexybox correctly.

<a href="{IMAGE_OR_VIDEO_URL}" class="lightbox" title="{TITLE}" rel="{GROUP_OF_IMAGES_OR_VIDEOS, not necessary}" data-lexybox-poster="{POSTER_URL for local videos}" data-lexybox-thumbnail="{THUMBNAIL_URL for pagination}">
  Open me up and don't fight me
</a>

jpg jpeg png gif webp svg

You may be wondering how thumbnails are created in pagination. In the case of images and youtube it is simple. Thumbnails are created automatically depending on the service.
If you need a separate thumbnail (in the case of vimeo or local video, it's even a necessity), you can use the data-lexybox-thumbnail="{URL}" attribute with a link
to the appropriate thumbnail.

Of course, you can create groups using the rel="{SOMETHING}" attribute as you see here.

We already know how thumbnails are created in pagination. But what about posters in local videos? It's as simple as a thumbnail.
Use the data-lexybox-poster="{URL}" attribute with a link to the thumbnail image.

• Add a unique rel="{SOMETHING}" attribute to the link.
• Have only one valid link per page. :)
• Force single mode via options.

Playground: Large gallery

Dark theme: Image 01, Image 02

Light theme: Image 01, Image 02

Classic theme: Image 01, Image 02

But don't limit yourself to the built-in themes. If you specify NULL instead of the theme name in the settings, only the styles necessary for the operation of LexyBox will be applied.
If you specify a new theme name, for example theme: 'custom', LexyBox will get the .lexybox--theme-custom class and likewise disable all styles to make it easier to style.

Horizontal slide: Image 01, Image 02

Vertical slide: Image 01, Image 02

Fade: Image 01, Image 02

It also adds the .lexybox-item--active class to the active slide, .lexybox-item--prev to the previous and .lexybox-item--next to the next slide
so you can change or adjust the effects as you see fit. It just takes a little knowledge of CSS.

As with themes, you can completely discard effects by assigning a NULL value to the effect key in the settings or create a new class with a different effect name.
In this case, only the active classes will be applied. Note that the media will not be switched. You must then write the transition effects yourself.
LexyBox will generate following class: .lexybox-effect--{NAME} for your needs.

Playground: Cinema effect

// Open lexybox
lexybox.open((array) media); // Applicable for dynamic galleries

// Close lexybox
lexybox.close(); // No mystery, just the closing of the LexyBox

// Add service to LexyBox
lexybox.add_service((string) service, (object) params); // This method takes care of a lot of fun

It's a lot of room for magic, but if you miss anything, feel free to drop me a line.

// Add new service
lexybox.add_service('pornhub', {

  // HTML template
  html: '<iframe src="https://www.pornhub.com/embed/%code"></iframe>',

  // A function that finds and validates a URL link on a page
  finder: function(url, link_html) {
    return true;
  },

  // A function that returns an object to replace placeholder tags in HTML template
  parser: function(url, link_html) {
    return {code: 'something'};
  },

  // Function that returns URL of the thumbnail for the pagination
  thumb: function(url, link_html, params_from_parser) {
    return url;
  }

});

Jokes aside, if you really need to add a Pornhub service you need to ask some good or pervy soul on stackoverflow or
write the relevant regular expressions yourself.

Playground: Local content, Confirm dialog

From GLOBAL variable

Of course, the method above allows you to add a service to a specific LexyBox instance. This is usable in some cases,
but mostly you'll want all instances to control the service. You can add a service or services to all of them at once.
Just make sure you add the services before each initialization of the LexyBox that is to control the service(s).

// Define variable in window object
window.lexybox_services = {};

// Add new service
window.lexybox_services['service_name'] = {/* the same object as in the add service method */};

LexyBox has four basic services: image, video, youtube and vimeo. You can override them, but why...

lexybox.open([
  {
    html: '<img src="images/jpeg.jpeg" class="lexybox-image">', // Or .lexybox-iframe, .lexybox-video.
    title: 'Fusce urna erat eleifend volutpat',
    thumb: 'images/jpeg-thumb.jpeg',
  },
  {
    html: '<img src="images/webp.webp" class="lexybox-image">',
    title: 'Ut luctus purus sit amet ultrices'
    thumb: 'images/webp-thumb.webp',
  },
  {
    html: '<img src="images/gif.gif" class="lexybox-image">',
    title: 'Donec rhoncus ut lacus ac tempor'
    thumb: 'images/gif-thumb.gif',
  }
]);

What about licensing? MIT License all the way...

• 1.1.8 - 27.02.2024
  • Minor bugfixes and optimizations
• 1.1.7 - 28.09.2023
  • Minor bugfixes and optimizations
• 1.1.6 - 24.11.2022
  • Autoplay feature added
  • Minor optimizations
  • Smaller UI
• 1.1.5 - 02.11.2022
  • LexyBox now does not affect the font of embedded content
  • Serif font replaced by a sans-serif font
• 1.1.4 - 29.10.2022
  • Gradual loading function added
• 1.1.3 - 29.10.2022
  • Added the ability to add services from a global variable
  • Added the ability to write custom effects
• 1.1.2 - 28.10.2022
  • Adding active classes for previous and next slide
  • Fixed bug with wrongly keyed labels
• 1.1.1 - 27.10.2022
  • Added support for local videos
• 1.1.0 - 22.10.2022
  • Added pagination function
  • Added classic theme
• 1.0.0 - 16.10.2022
  • First relase

There is always something to do, and no software is flawless.