strawdynamics / luminous Goto Github PK

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;

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.

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.

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.

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

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.

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.

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!

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.

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

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

if set to false, it always true

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.

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.

$ 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'
};

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 "

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.

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

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

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.

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.

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

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

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

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.

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:

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?

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.

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.

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?

The navigation buttons are a bit overlarge right now.

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

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.

Requested by @seanwash

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

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'))

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');

    }

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

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!

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.

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?

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

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

Just a little tiny fix needed. PR incoming.

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

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

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

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!

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

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