imgix/luminous

A simple, lightweight, no-dependencies JavaScript lightbox

This repository is no longer actively maintained.

See #626 for details.

---

Luminous is a simple, lightweight, no-dependencies JavaScript image lightbox.

---

• Installation
• Usage
  • LuminousGallery Usage
• Options / Defaults
  • LuminousGallery Options / Defaults
• Theming
• Browser Support
• Meta
• License

Installation

• NPM: npm install luminous-lightbox
• Bower: bower install luminous
• Manual: Download and use dist/Luminous.min.js or dist/Luminous.js

If you're using the pre-built version of Luminous, it will automatically make window.Luminous and window.LuminousGallery available for your use when included on your page.

If you prefer to use require statements and a build tool like Browserify, there are a couple other things to keep in mind. First, require('luminous-lightbox') gives you an object with Luminous and LuminousGallery keys. You can use it in the following ways:

var Luminous = require('luminous-lightbox').Luminous;

new Luminous(…);

If your project uses ES6, you can do the following instead:

import { Luminous } from 'luminous-lightbox';

new Luminous(…);

Usage

Once you've installed Luminous via one of the above methods, you're ready to get started. There are no dependencies, so you can just start making cool stuff. Check out the announcement blog post, or take a peek at our demo. Here's an example of a basic implementation:

<a href="https://assets.imgix.net/dog.png?w=1600">
  <img alt="A dog!" src="https://assets.imgix.net/dog.png?w=400">
</a>

new Luminous(document.querySelector("a"));

LuminousGallery Usage

Luminous supports gallery-style navigation using the LuminousGallery class. It works nearly the same as Luminous, but has a slightly different method of instantiation.

<ul>
  <li>
    <a class="gallery-demo" href="https://assets.imgix.net/unsplash/coyote.jpg?w=1600">
      <img src="https://assets.imgix.net/unsplash/coyote.jpg?w=100" alt="Coyote">
    </a>
  </li>
  <li>
    <a class="gallery-demo" href="https://assets.imgix.net/unsplash/motorbike.jpg?w=1600">
      <img src="https://assets.imgix.net/unsplash/motorbike.jpg?w=100" alt="Motorbike">
    </a>
  </li>
  <li>
    <a class="gallery-demo" href="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=1600">
      <img src="https://assets.imgix.net/unsplash/hotairballoon.jpg?w=100" alt="Hot air balloon">
    </a>
  </li>
</ul>

new LuminousGallery(document.querySelectorAll(".gallery-demo"));

Options / Defaults

Here's an example of using Luminous with a custom configuration. All of the listed options are displayed with their default value.

var options = {
  // Prefix for generated element class names (e.g. `my-ns` will
  // result in classes such as `my-ns-lightbox`. Default `lum-`
  // prefixed classes will always be added as well.
  namespace: null,
  // Which attribute to pull the lightbox image source from.
  sourceAttribute: "href",
  // Captions can be a literal string, or a function that receives the Luminous instance's trigger element as an argument and returns a string. Supports HTML, so use caution when dealing with user input.
  caption: null,
  // The event to listen to on the _trigger_ element: triggers opening.
  openTrigger: "click",
  // The event to listen to on the _lightbox_ element: triggers closing.
  closeTrigger: "click",
  // Allow closing by pressing escape.
  closeWithEscape: true,
  // Automatically close when the page is scrolled.
  closeOnScroll: false,
  // Disable close button
  showCloseButton: false,
  // A node to append the lightbox element to.
  appendToNode: document.body,
  // A selector defining what to append the lightbox element to.
  // This will take precedence over `appendToNode`.
  appendToSelector: null,
  // If present (and a function), this will be called
  // whenever the lightbox is opened.
  onOpen: null,
  // If present (and a function), this will be called
  // whenever the lightbox is closed.
  onClose: null,
  // When true, adds the `imgix-fluid` class to the `img`
  // inside the lightbox. See https://github.com/imgix/imgix.js
  // for more information.
  includeImgixJSClass: false,
  // Add base styles to the page. See the "Theming"
  // section of README.md for more information.
  injectBaseStyles: true
};

new Luminous(document.querySelector("a"), options);

LuminousGallery Options / Defaults

LuminousGallery supports two sets of options arguments. The first set is specific to the gallery itself, and the second specifies the options that get passed to its child Luminous instances.

var galleryOpts = {
  // Whether pressing the arrow keys should move to the next/previous slide.
  arrowNavigation: true,
  // A callback triggered when the image changes that is passed the image HTML element
  onChange: ({ imgEl }) => { … },
};

var luminousOpts = {
  // These options have the same defaults and potential values as the Luminous class.
};

new LuminousGallery(document.querySelectorAll("a"), galleryOpts, luminousOpts);

Theming

By default, Luminous injects an extremely basic set of styles into the page via the injectBaseStyles option. You will almost certainly want to extend these basic styles for a prettier, more usable experience that matches your site. If you need to do something very out of the ordinary, or just prefer to include the default styles in CSS yourself, you can pass injectBaseStyles: false when instantiating a new instance of Luminous. Please note that if you disable the included base styles, you will still need to provide an animation for .lum-lightbox.lum-opening and .lum-lightbox.lum-closing (this can be a "noop" style animation, as seen in the base styles source).

There is also an included basic theme (luminous-basic.css) that may meet your needs, or at least give a good example of how to build out your own custom styles. This can either be included in your site's CSS via @import "node_modules/luminous-lightbox/dist/luminous-basic.css"; or as a linked stylesheet in your HTML.

Additionally, the namespace option can be used as a way to easily apply different themes to specific instances of Luminous.

Browser Support

We support the latest version of Google Chrome (which automatically updates whenever it detects that a new version of the browser is available). We also support the current and previous major releases of desktop Firefox, Internet Explorer, and Safari on a rolling basis. Mobile support is tested on the most recent minor version of the current and previous major release for the default browser on iOS and Android (e.g., iOS 9.2 and 8.4). Each time a new version is released, we begin supporting that version and stop supporting the third most recent version.

Meta

Luminous was made by imgix. It's licensed under the BSD 2-Clause license (see the license file for more info). Any contribution is absolutely welcome, but please review the contribution guidelines before getting started.

License

luminous's Issues

I want to give a class name to the enlarged image.

Is it possible to give a specific class name to a specific enlarged image?

Fix `HAS_ANIMATION` when loaded before `document.body` is available

onOpen and onClose fires on init

Hi there, we are Imgix customers and are grateful for this lib since we don't use jQuery. We are trying to set it up and are running into an issue. We want to extend Luminous to be a full gallery by using the onOpen and onClose event calls to modify the lightbox. But the events fire when the Luminous is created not when it opens or closes. Here is a demo: http://codepen.io/killion/pen/pyPymJ

Thanks!

Images smaller than lightbox container aren't centered.

Just a little tiny fix needed. PR incoming.

Use namespaced animation names to avoid clobbering other animations

Currently we use fade and fadeZoom, which have a non-zero chance of conflicting with something else on the page. We should prefix those with luminous.

TypeScript typings file

Before you submit:

• Please search through the existing issues (both open AND closed) to see if your feature has already been discussed. Github issue search can be used for this: https://github.com/imgix/luminous/issues?utf8=%E2%9C%93&q=is%3Aissue
• Please take a moment to find out whether your idea fits with the scope and aims of the project

Is your feature request related to a problem? Please describe.
TypeScript is a language by Microsoft that has strict type checking which transpiles to JS. Currently using LuminousGallery with it requires to use the any type, which defeats type checking.

Describe the solution you'd like
LuminousGallery on npm should ship with a .d.ts file (declared in the package.json as the types field) which will allow TypeScript to provide type checking even for native JS modules.

querySelectorAll not working

Hi, just wanna say great plugin!

But what is the deal with having multiple elements, like a gallery, which all have to use Luminous. Then you'd have to create a loop for getting all elements with the same class, like this:

``` javascript`
var triggers = document.querySelectorAll('.product-zoom');
[].forEach.call(triggers, function(trigger) {
new Luminous(trigger);
});

This just seems like a lot of instances, wouldn't it be better to support the NodeList, returned by  document.querySelectorAll out of the box?

Or am I missing something?

onClose() firing when calling onOpen()

It seems like onClose is firing onOpen() for me. Here's what I'm using

      var lightboxOptions = {
         onOpen: test(),
         onClose: close()
      };
     new LuminousGallery(document.querySelectorAll('.text-block__image__link'), lightboxOptions);

    function test() {
        console.log('yezzzz');
        $('html').css('overflow','hidden');

    }

    function close() {
      console.log('closed');
        $('html').css('overflow','auto');

    }

Remove Arrows if there is only one image

Is there anyway to prevent < > Arrows to appears if there is only one image?

Improve LuminousGallery UX

The navigation buttons are a bit overlarge right now.

Please publish 2.0 to NPM

Uncaught TypeError: Luminous is not a constructor

I got drift to work after following @paulstraw's temp fix for Browserify. But with luminous I haven't been as successful. I get Uncaught TypeError: Luminous is not a constructor when running the "browserified" version of the following code in the browser.

var Luminous = require('luminous-lightbox/dist/Luminous.min.js');
new Luminous(document.querySelector('#myimg'));

Where Luminous is an empty Object {}.

Using Browserify @ 13.1.1.

is it possible to use luminous in vue.js?

I am trying to create photo website with vue.js and Laravel, and use luminous to magnify the photo when it is clicked.
My photos are stored in AWS S3 bucket.

My vue.js structure is like below.

1.PhotoComponent.vue

• this component is literally rendering each photo.

<template>
    <div class="photo">
        <a class="luminous" :href="item.url">
            <img class="photo_image" :src="item.url" :alt="`photo taken by ~~`">
        </a>
    </div>
</template>

<script>
export default {
    name: "PhotoComponent.vue",
    props: {
        item: { // this item has photo info(like url)
            type: Object, 
            required: true
        }
    },
}
</script>

<style scoped>
 
</style>

2.PhotoListComponent.vue

• this component is making a list of PhotoComponent.vue.

<template>
    <div class="photo-list">
        <div class="grid">
            <PhotoComponent
                class="grid_item"
                v-for="photo in photos"
                :key="photo.id"
                :item="photo"
            ></PhotoComponent>
        </div>
        <PaginateComponent :current-page="currentPage" :last-page="lastPage"></PaginateComponent>
    </div>
</template>

<script>
import {OK} from '../util';
import PhotoComponent from "./PhotoComponent";
import PaginateComponent from "./PaginateComponent";

export default {
    name: "PhotoListComponent.vue",
    components: {
        PhotoComponent,
        PaginateComponent
    },
    props: {
        page: {
            type: Number,
            required: false,
            default: 1,
        }
    },
    data() {
        return {
            photos: [],
            currentPage: 0,
            lastPage: 0
        }
    },
    methods: {
        async fetchPhotos() { // I get each photo information through this method.
            const response = await axios.get(`/api/photos/?page=${this.page}`);

            if (response.status !== OK) {
                this.$store.commit('error/setCode', response.status);
                return false;
            }
            this.photos = response.data.data;
            this.currentPage = response.data.current_page;
            this.lastPage = response.data.last_page;
        },
    },
    watch: {
        $route: {
            async handler() {
                await this.fetchPhotos();
            },
            immediate: true,
        }
    },
}
</script>

<style scoped>

</style>

There are three things that I have tried so far.

1. put new Luminous() in PhotoComponent, and put the function in mounted section.

<template>
    <div class="photo">
        <a class="luminous" :href="item.url">
            <img class="photo_image" :src="item.url" :alt="`photo taken by ~~`">
        </a>
    </div>
</template>

<script>
import { Luminous } from 'luminous-lightbox';
export default {
    name: "PhotoComponent.vue",
    props: {
        item: { // this item has photo info(like url)
            type: Object, 
            required: true
        }
    },
   methods: {
       luminous() {
           new Luminous(document.querySelector(".luminous"));
       }
   },
  mounted: {
    this.luminous();
  }
}
</script>

In this case, first picture works, but "

" opens as many as PhotoComponent.vue.
For example, if I make a list of 9 pictures in PhotoListComponent and click the first photo, "

" opens 9 times.
However, other pictures won't work at all, but the new tab opens.

2. put new LuminousGallery() in PhotoListComponent, and put the function in mounted section.

<template>
    <div class="photo-list">
        <div class="grid">
            <PhotoComponent
                class="grid_item"
                v-for="photo in photos"
                :key="photo.id"
                :item="photo"
            ></PhotoComponent>
        </div>
        <PaginateComponent :current-page="currentPage" :last-page="lastPage"></PaginateComponent>
    </div>
</template>

<script>
import {OK} from '../util';
import PhotoComponent from "./PhotoComponent";
import PaginateComponent from "./PaginateComponent";
import {LuminousGallery} from 'luminous-lightbox';

export default {
    name: "PhotoListComponent.vue",
    components: {
        PhotoComponent,
        PaginateComponent
    },
    props: {
        page: {
            type: Number,
            required: false,
            default: 1,
        }
    },
    data() {
        return {
            photos: [],
            currentPage: 0,
            lastPage: 0
        }
    },
    methods: {
        async fetchPhotos() { // I get each photo information through this method.
            const response = await axios.get(`/api/photos/?page=${this.page}`);

            if (response.status !== OK) {
                this.$store.commit('error/setCode', response.status);
                return false;
            }
            this.photos = response.data.data;
            this.currentPage = response.data.current_page;
            this.lastPage = response.data.last_page;
        },
        luminous() {
            new LuminousGallery(document.querySelectorAll('.luminous'));
        },
    },
    watch: {
        $route: {
            async handler() {
                await this.fetchPhotos();
            },
            immediate: true,
        }
    },
  mounted: {
    this.luminous();
  }.
}
</script>

In this case, a new tab opens whenever the photo is clicked, which means that luminous does not work.

3. not mounted, but add click event in those component.

For example...

<template>
    <div class="photo">
        <a class="luminous" :href="item.url" @click.prevent="luminous">
            <img class="photo_image" :src="item.url" :alt="`photo taken by ~~`">
        </a>
    </div>
</template>

<script>
import { Luminous } from 'luminous-lightbox';
export default {
    name: "PhotoComponent.vue",
    props: {
        item: { // this item has photo info(like url)
            type: Object, 
            required: true
        }
    },
   methods: {
       luminous() {
           new Luminous(document.querySelector(".luminous"));
       }
   },
}
</script>

In this case, the result is almost the same as pattern 1, but the first picture works perfectly as I expected. However, the other picutures won't open anything even a new tab.

Sorry for ranting.
I am stuck with this problem for a week. I really need someone's help.
Thank you for your cooperation.

Readme: License link 404's

In the README.md the Current license links to:

https://github.com/imgix/luminous/blob/master/license.md

The issue here is that I'm guessing Github links are case sensitive so this URL will work:

https://github.com/imgix/luminous/blob/master/LICENSE.md

Support for ix-src and sizes attributes on <img>

I use both imgix.js and Luminous, they work great. It would be even more awesome if Luminous/LuminousGallery could make use of ix-src / srcset and sizes attributes so the full images displayed in lightbox could be loaded in size proper for a given device. Right now I'm requesting 1920x1080 version but this makes little sense when lightbox is opened on a mobile phone.

Is this something you planned? Or maybe there's a way to achieve that today?

CSS problem in ASP.NET Web application & Angular

Please Add to the usage instructions that users must include this in the styles.css file :

@import "~luminous-lightbox/dist/luminous-basic.css";

Lightbox image not centred in mobile safari

ES6 Modules not compiled before distribution

I'm getting the following error while trying to use luminous with webpack.

ERROR in ./~/luminous-lightbox/src/js/Luminous.js
Module parse failed: /home/user/project/node_modules/luminous-lightbox/src/js/Luminous.js Unexpected token (6:10)
You may need an appropriate loader to handle this file type.
|
| module.exports = class Luminous {
|   VERSION = '1.0.1'
|
|   constructor(trigger, options = {}) {
 @ ./~/luminous-lightbox/src/js/lum-require.js 1:0-34
 @ multi (webpack)-dev-server/client?http://localhost:8080 luminous-lightbox

ERROR in ./~/luminous-lightbox/src/js/LuminousGallery.js
Module parse failed: /home/user/project/node_modules/luminous-lightbox/src/js/LuminousGallery.js Unexpected token (46:14)
You may need an appropriate loader to handle this file type.
|   }
|
|   boundMethod = () => {
|
|   };
 @ ./~/luminous-lightbox/src/js/lum-require.js 2:0-48
 @ multi (webpack)-dev-server/client?http://localhost:8080 luminous-lightbox

Using either const Luminous = require('luminous-lightbox').Luminous; or import { Luminous } from 'luminous-lightbox'; gives the same error. I've also tried many different babel plugins, including babel-preset-latest and babel-preset-stage-0 with no luck.

Webpack config:

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack');
const path = require('path');

module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    main: [
      './main.js',
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  resolve: {
    modules: ['node_modules'],
    extensions: ['.js'],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      inject: true,
      template: 'index.html',
    }),
  ],
  devServer: {
    contentBase: path.resolve(__dirname, 'src'),
    stats: {
      assets: false,
      modules: false,
    },
  },
};

.babelrc settings:

{
  "presets": ["latest", "stage-0"]
}

Using the following:

"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-latest": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"html-webpack-plugin": "^2.28.0",
"luminous-lightbox": "^1.0.1",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"

I'm not an expert with webpack so I may be doing something wrong or missing a configuration option. Any help would be appreciated.

Thanks!

Add "onChange" parameter for LuminousGallery

Hello,

First of all, thank you for this great library.

As the title says, I do feel like there is one feature missing for the LuminousGallery, which is an "onChange" callback parameter when we navigate to the previous or next Luminous instance.

It would probably be nice if the direction was passed as a parameter to the callback as well.

Thank you very much.

Add full (correct) testsuite, including dist files

We need a full testsuite. Currently what we have in test is not sufficient and does not use the files from dist.

Let me know how we can help here.

Separate basic theme and "fullscreen"-esque mode

Would be great if they were separate files so that you can include the basic theme without the fullscreen feature for low res.

.lum-lightbox multiple .lum-open

When using "new LuminousGallery" if I click to open and close the ligthbox via the triggering links many times, the lum-open is assigned to many lum-lightbox (not to only one).

Cheers, Bye

How to open lightbox programmatically

As the title says for example I have

new LuminousGallery(
            document.querySelectorAll(".jsProjectLightbox"),
            {
              arrowNavigation: true,
            }
          );

and I cannot find in documentation what is method to open it manually

Null displayed on Firefox if no caption defined

Hi!
On Firefox, if no caption is defined for an image, then the word null is displayed at the bottom of the image. Not happening on Chrome.

Thanks.

Luminous not opening on second click

I have an intermittent issue when previewing images. The lightbox appears on first click but on second and subsequent clicks I just see the loading animation.

The affected lightbox DOM element is in the body, at the bottom, as expected and it contains the loaded image. The issue seems to be that the lm-loading class gets stuck and isn't removed when the image is previewed.

I made a quick vide to demonstrate the issue: https://www.dropbox.com/s/g0gp147qa1uinn8/LM-Luminous-SecondTriggerIssue.mp4?dl=0

A bunch of other lightboxes on the same page work fine then intermittently one will get stuck. It loads the image on first click then gets stuck and won't preview on subsequent clicks.

If I manually remove the lm-loading class the lightbox works as expected.

If you feel this isn't a Luminous issue maybe you have some idea where I could start to look for the culprit? I haven't dug deeply into how Luminous interacts with the DOM.

Lightbox isn't working in IE9 *FIX*

IE leaves you alone with the following message:

TypeError: Die Eigenschaft "add" eines undefinierten oder Nullverweises kann nicht abgerufen werden.
   {
      [functions]: ,
      description: "Die Eigenschaft "add" eines undefinierten oder Nullverweises kann nicht abgerufen werden.",
      message: "Die Eigenschaft "add" eines undefinierten oder Nullverweises kann nicht abgerufen werden.",
      name: "TypeError",
      number: -2146823281
   }

no line numbers, no filename, just nothing.

after a bit of exploring the Lightbox object i found usages of classList.
So, You need to include a classList Polyfill and the Lightbox will work too in IE >= 9

-i knew that support is only for the last 2 versions of every Browser, but i think it will stop some Developers to use this Lightbox, if they notice that IE9 isn't supported, so here is a fix for them c:

injectBaseStyles cannot be false

It's impossible to disable base style injection because any falsey value will always result in true.

const injectBaseStyles = options["injectBaseStyles"] || true;

src/js/Luminous.js#70

I'd do a one line fix but I think the entire options object block should be refactored to something more modern-like.

E.g.

// ES2015 Object.assign
this.settings = Object.assign({}, defaults, options)

// OR object spread
this.settings = { ...defaults, ...options }

// Or some day in the far future
const injectBaseStyles = options["injectBaseStyles"] ?? true;

Cannot open luminous twice on mobile (iOS 10)

Opening a lightbox and then closing and opening it again makes the image(s) not load the second time. Only works again after reloading the page.

Tested on iOs10 + Chrome in mobile view

`new Luminous` requires a DOM element as its first argument.

Hello!

I'm trying to make Lightbox working but I get the quoted error.

This is my code:

index.js

`import { Luminous } from 'luminous-lightbox';

console.log(document.querySelectorAll('.gallery'));
new Luminous(document.querySelectorAll('.gallery'));`

immobile-show.ejs;
<% if(immobile.immagini) { if(immobile.immagini.length > 0) { %><% immobile.immagini.forEach(function(immagine, i) { %> <% if (i < 1) { return } %> <% console.log(immagine) %> <a class="gallery" href="<%= immagine %>" data-lightbox="immagini"> <img class="immobile-show__riga--img" src="<%= immagine %>" class="immagine-secondaria-show"> </a> <% })}}; %>

Any suggestion?

Problem with destroy

I create few Luminous object dynamically and then trying to destroy them in the react application on componentWillUnmount.

It seems like destroy will throw an error if Lightbox was never activated:

value: function _unbindEvents() {
      this.trigger.removeEventListener(this.settings.openTrigger, this.open, false);
      this.lightbox.el.removeEventListener(this.settings.closeTrigger, this.close, false);

      if (this.settings.closeWithEscape) {
        window.removeEventListener('keyup', this._handleKeyup, false);
      }

in the code above this.lightbox.el can be undefined when this.lighbox.elementBuilt is false

requiring ./util/

For some reason, it seems to require ./util, and if it doesn't, it throws an error

      throw er; // Unhandled 'error' event
      ^
Error: module "./util/dom" not found from "/node_modules/luminous-lightbox/dist/Luminous.js"

This is returned when I try to do

var Luminous = require('luminous-lightbox');

or

require('luminous-lightbox');

I'm making use of Browserify

How to inject captions when using LuminousGallery class

Question
I have the following set up to inject captions into the lightbox . I can add a caption for a sindle image but I cant figure out how to add captions for multiple images.

HTML

<figure class="..." ...>
	<a class="lightbox-link" href="uploads/img/small/img5449.jpg" tabindex="0">
		<img class="..." src="uploads/img/small/img5449.jpg" alt="Watch" data-caption="Nunc et dui nec ex egestas aliquet sagittis ut nisl.&nbsp;">
		<figcaption class="caption">
			<p>Sed pellentesque aliquam enim, <strong>dapibus convallis</strong> odio vestibulum eu. Nunc et dui nec ex egestas aliquet sagittis ut nisl.&nbsp;</p>
		</figcaption>
	</a>
</figure>

JAVASCRIPT

function initLuminous(options) {

    let config = options || {};
    let lightboxLinks = document.querySelectorAll(".lightbox-link");

    if(lightboxLinks.length == 1){

        if(config.caption){
            config.caption = lightboxLinks[0].dataset.caption;
        }

        new Luminous(lightboxLinks[0], config);
    }

    if(lightboxLinks.length > 1){
       // TODO: ADD CAPTIONS FOR MULIPLE IMAGES??

        new LuminousGallery(lightboxLinks, config);

    }

}

let options = {
   caption: true
}

initLuminous(options);

Any help would be welcome.

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Can't get prev/next arrows to work

I wanted to see with the arrow navigation looked like in Luminous, so I download a zip of the repo real quick, edited the index.html file and changed the js to the following:

document.querySelectorAll('.gallery-demo'), 
{
  arrowNavigation: true
}, 
{
  caption: function (trigger) {
    return trigger.querySelector('img').getAttribute('alt');
  }
});

But the arrow navigation doesn't seem to work. No new icons appear and the arrow keys don't do anything. Am I missing something? Thank you for your help and great library.

Add option to set caption (suggestion)

It would be great if the gallery supported the caption option when zoomed in, for example from alt or title.

Image gallery

Hi Paul,

Thanks for a great library.

I was wondering if there are any guidelines or recommendations on how to display a set of images with some navigation. I know that many lightboxes often have some support for these use cases, I was wondering if there's some way of extending luminous to do that or if there are any future plans for that feature.

Only working on the first image

Downloaded the manual version of this and duplicated the demo link a number of times, but it only opens the first image in a lightbox, the rest only open as a default click to the image.

Add an option for HTML captions

Requested by @seanwash

Trigger close from within a caption?

Love the simplicity of Luminous. How might one set the closeTrigger option to fire off a click within the caption?

Use case: I have an image which is an excerpt of an infographic. I'd like the user to either click on the image or a link within the caption to go to another page with the full infographic. Thus, using "click" for closeTrigger won't work as clicking on the link would close the lightbox. Thus, I'd like to include a "close" link within the caption.

One possible feature idea is to add an option to include an "X" icon place upper-right to alternatively trigger a close.

Demo url on documentation leads to 404 error

The link to the demo within the Usage section leads to a 404 Error

.... take a peek at our demo. Here's an example of a basic implementation...

Updated your readme.md with the url you have on codepen: https://codepen.io/imgix/pen/wMgOEL and made a pull request

Missing class properties transform

$ webpack
Hash: 0caa8c00e7aac7fab017
Version: webpack 3.0.0
Time: 8410ms
      Asset    Size  Chunks             Chunk Names
main.min.js  111 kB       0  [emitted]  main
   [0] multi fetch-xhr ./assets/templates/main/js/src/main.js 40 bytes {0} [built]
   [2] ./assets/templates/main/js/src/main.js 3.31 kB {0} [built]
  [11] (webpack)/buildin/global.js 823 bytes {0} [built]
  [33] (webpack)/buildin/module.js 521 bytes {0} [built]
    + 29 hidden modules

ERROR in ./node_modules/luminous-lightbox/src/js/Luminous.js
Module build failed: SyntaxError: ***/node_modules/luminous-lightbox/src/js/Luminous.js: Missing class properties transform.

  4 |
  5 | module.exports = class Luminous {
> 6 |   VERSION = '1.0.1'
    |   ^
  7 |
  8 |   constructor(trigger, options = {}) {
  9 |     this.isOpen = false;

 @ ./node_modules/luminous-lightbox/src/js/lum-require.js 8:16-37
 @ ./assets/templates/main/js/src/main.js
 @ multi fetch-xhr ./assets/templates/main/js/src/main.js

ERROR in ./node_modules/luminous-lightbox/src/js/LuminousGallery.js
Module build failed: SyntaxError: ***/node_modules/luminous-lightbox/src/js/LuminousGallery.js: Missing class properties transform.

  44 |   }
  45 |
> 46 |   boundMethod = () => {
     |   ^
  47 |
  48 |   };
  49 |

 @ ./node_modules/luminous-lightbox/src/js/lum-require.js 12:23-51
 @ ./assets/templates/main/js/src/main.js
 @ multi fetch-xhr ./assets/templates/main/js/src/main.js

main.js

window.$ = window.jQuery = require('jquery-slim');
import { Luminous } from 'luminous-lightbox';
$(function() {
  //
});

webpack.config.js

var path = require('path');
var webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    entry: ['fetch-xhr', './assets/templates/main/js/src/main.js'],
    target: 'web',
    output: {
        path: path.resolve(__dirname, 'assets/templates/main/js'),
        filename: 'main.min.js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            loader: 'babel-loader',
            query: {
                presets: ['es2015']
            }
        }]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': '"production"'
        }),
        new UglifyJSPlugin(),
    ],
    stats: {
        colors: true
    },
    devtool: 'source-map'
};

Support a caption or arbitrary markup

Is there any way (or plans) to support adding a caption or or some markup to the lightbox declaratively? For example, if i wanted to add data-title="Pretty flowers" to my luminous element, I'd love to show that under the lightbox.

Close icon

It would be an enhancement to be able to add an extra close icon (for example in the right top corner) to the lightbox for UX purposes. There's always people who don't understand that they can click, esc or scroll to close the lightbox.

Perhaps you could add 'closeIcon' which can be an image or a piece of HTML and 'closeIconPosition' with values like 'right top' to the options object :)

Besides that it's still the best vanilla ES6 lightbox I came across so far!

Image doesn't resize properly in Firefox (45.0.2)

I noticed that images opened in Luminous don't resize properly in Firefox (45.0.2). This behavior is even noticeable on the Luminous demo page: http://imgix.github.io/luminous/

Simply open the image and play with the window size. Particularly resizing the width is troublesome for the demo image (because it's in landscape).

I've been looking around the element inspector what could fix this, and I think it can be fixed by simply setting a max-width and max-height on the .lum-lightbox-image-wrapper

The max-width and max-height should be the same as the width and height that are dynamically calculated for that same element.

If I'm not mistaken this could be set here: https://github.com/imgix/luminous/blob/master/src/js/Lightbox.js#L82-L86

This solves the issue in Firefox, and doesn't seem to create any side effects in Chrome. I haven't been able to test this in IE/Edge.

Close on scroll

Is there any way to support closing the lightbox on a scroll event in addition to the click event?

Won't work using ajax

I created simple gallery and used the plugin for the lightbox, I used ajax for the categories, but when the ajax loads the lightbox won't work anymore

caption not being updated when changing with prev/next

When you use a function for caption and use the luminous gallery prev/next arrows, it won't call the caption function to update. If you close the lightbox and open it does update.

Probably best shown with a gif:

https://codesandbox.io/embed/relaxed-mendel-j213i

Image doesn't display on re-open in Safari and is stuck on loading

Safari 10.0.3

To reproduce

• Visit https://imgix.github.io/luminous/ in safari
• Click on image, then close it
• Click on image again

Here's a gif of the behavior, as well as the devtools showing the image is still in the DOM: https://cl.ly/jGo8

injectBaseStyles not setting

var injectBaseStyles = options["injectBaseStyles"] || true; // Internal use only!

if set to false, it always true

"Refresh" Gallery, prevent multiple instances?

I've got an image gallery that a user can upload images to. When they upload a new image, I want to "refresh" the gallery so that it works and includes this new image. But this seems to result in multiple instances of the same gallery -- so that when I click an image, it often takes two or three clicks before it closes because the image has opened three times.

Is there a good way to "reload" the gallery?

new LuminousGallery(document.querySelectAll('.gallery-image'))