nextapps-de/spotlight

Web's most easy to integrate lightbox gallery library. Super-lightweight, outstanding performance, no dependencies.

spotlight's Issues

Uncaught TypeError: Cannot read property 'title' of undefined

Hi, I am getting this error with the API version of using the library:

Uncaught TypeError: Cannot read property 'title' of undefined

I am using the code from the example:

Spotlight.show([{ title: "Image 1", description: "This is a description.", src: "gallery/london-1758181.jpg" },{ title: "Image 2", description: "This is a description.", src: "gallery/sea-1975403.jpg" },{ title: "Image 3", description: "This is a description.", src: "gallery/newport-beach-2089906.jpg" }]);

• the image path doesn't matter for now.

Everything works when I use the attributes, but I need to set it up with JS.
If I console.log the Object, I see its properties:

autofit: ƒ bb(a) close: ƒ eb(a) fullscreen: ƒ Za(a) goto: ƒ Z(a) init: ƒ Qa() menu: ƒ kb(a) next: ƒ W() play: ƒ ab(a) prev: ƒ $a() show: ƒ (a,b) theme: ƒ Na(a) zoom: ƒ nb(a)

Is it possible to use srcset for responsive images ?

Hi,

I've tried a lot of gallery/slider libraries and Spotlight could be the best I've found.

But I'm missing the capability to use srcset for the linked images.

Right now, we have to choose a unique size, which is not good with the multiple screen sizes out there.

Is there a way to use srcset or do you plan to add it ?

Thanks in advance.

Custom options do not work

First of all thank you very much for this great lightbox!

Unfortunately my custom options are ignored.
I think I made a fundamental mistake or forgot something fundamental, but I don't know what.
Can someone please help me?
I am using this code:

`
window.showGallery = function(index){
Spotlight.show(gallery, {
animation: "flip",
theme: "white",
autohide: false,
control: ["autofit", "zoom", "player", "page"]
});
};

`

Here is my example:
http://nirvana.bplaced.net/spotlight/

Thanks in advance

A query with setting HTML in the description field

Hi,

I'm using the following chunk of code

      onchange: function (index, options) {
        // Decode HTML entities in title and description
        const titleElement = document.querySelector('#spotlight .spl-title');
        const descriptionElement = document.querySelector('#spotlight .spl-description');
        titleElement.innerHTML = decodeURIComponent(titleElement.innerText);

        // both lines needed - can't figure out why
        descriptionElement.innerHTML = decodeURIComponent(descriptionElement.innerText);
        descriptionElement.innerHTML = decodeURIComponent(descriptionElement.innerText);
      },

The title line works fine but I can't figure out why I need to repeat the line for the description (by doing so it works).
I've tried setting the line in a setTimeout loop but unless I use a delay of something like 3 seconds it still doesn't work.

Any suggestions?

Using video sources with the api

Using the option src-{format} generates an error

{
   src-mp4: mymovie.mp4,
  poster: ...
  etc.
} 

generates a console error

Cannot play media. No decoders for requested formats: video/-mp4

ie it looks like the hyphen between src and mp4 is not being removed

Dynamically add images to gallery

Subsequent to Dynamic load of prev/next images #14 that has been closed. My image repository has thousands of images so it’s impractical to specify them all on load, so they need to be loaded dynamically using AJAX or similar. To do this API methods add, append, remove etc could be called on change to eg add an image to current+1 when triggered by the onchange event.

Two options with the same name

Theme

1. Boolean - Show/hide theme button
2. String - The classname of your custom theme

NOTE: I can get around it by creating a theme with the following setting

#spotlight.my-theme .spl-theme {
    display: none;
}

Thumnails

Hi Ts-Thomas,

Thank you created this package, I like it. I did not find this thumbnails feature, can you update more, please!!!

Add a download option / button for the currently displayed image

Is it possible to download the picture that is displayed, or at least get its url with right click + copy image address ?

Are you planning to add close the image via swipe down?

Hi! I really like spotlight, but lack the ability to close an open image via a swipe gesture (for example, swipe down, as in popular apps). Are you planning to add this in future releases?

Add support for video embeds

Would be great if you could load a video embed with this.

Hopefully Helpful for All...

In the current absence of @ts-thomas (his last commit was early December 2019), I wanted to post with my findings of this library - some issues for him to consider if/when he returns to this project and some discoveries that may help everyone else work around any issues they are experiencing.

First off, I want to add to the comments that I think @ts-thomas has done a great job with this library. Yes there are bugs, but this library does work as is and the end result looks very nice, in my opinion. I want to say thank you to @ts-thomas and I hope he (and all of you) are staying healthy in this crazy time in the world.

What Works

What seems to work perfectly fine is a predefined HTML gallery. If you can specify your complete gallery in HTML and use the data-* attributes to define the properties, most (if not all) things seem to work fine and as expected. So, do it like this if you can.

Where's The Bugs?

From what I have experienced so far is that all of the bugs occur when using the API. However, you CAN use the API. There seems to be some limitations though:

• The API doesn't seem to have the ability to generate custom elements. Everything is effectively an "Image".
• The API doesn't allow you to display ONLY the description tag.

Workarounds in Spotlight.show()

The Image Array (first parameter)
Each item in the array must define all three properties - src, title, and description. There doesn't seem to be a way around that for now.

The Configuration (second parameter)
It seems that show() does require the second parameter be set. While there are a lot of common and useful settings like index or infinite (both of which work fine for me), if you don't have or want to set anything, just give it an empty object, i.e. {}.

The Title/Description Footer
If you don't have a title and/or description, you still need to set them.

You cannot set them to null, false, or a null string.

You can set them to a single space. This will cause the footer to display, but with no content in it.

If you don't want it to display at all, that is possible. After looking through the source code, I tried (with success) passing the STRING of "false" as the title and that successfully hides the footer completely. If you set description to "false", it renders the text... so that doesn't work.

It does seem that if you want the footer to render at all (say you have a title OR a description, but not both), then both the title and description will have a tag rendered for them - though setting the one you need and the other to a single space doesn't look bad at all. You could even add some CSS to clean it up if you have consistent enough use case (like never using titles or something).

In Ending...

I found these issues were the most interesting to deal with and the bare minimum to get the API working for my needs. Without the workarounds and notes from above, you can expect to get a lot of odd JS errors in your console while working with the API. So, if that is happening to you, hopefully this helps.

Hopefully @ts-thomas is well and will be returning soon to release 0.7.0; but even until then, he's created a nice and useful library here. Hopefully this helps him moving forward and hopefully it helps others maybe having troubles now.

~ Cheers :)

HTML in data-description

Is there any way to use HTML tags in the data description?
I thought about an additional option like description-html -> true / false

Option «onhover»

Please support an option to make spotlight open the target image on mouse hover.

Lots of potential...

spotlight.bundle.js:9 Uncaught TypeError: Cannot read property 'length' of undefined
at l (spotlight.bundle.js:9)
at La (spotlight.bundle.js:16)
at spotlight.bundle.js:31

Using on SPA. Don't have the time to look into the whys at the moment. But all of my code looks fine and is working well, just seems that this lib is fragile. Shame really because the small code base makes it full of potential when compared to other lightboxes. Look forward to the update. D

Closing the fullscreen via "X" or Esc key doesn't toggle the full screen icon back

close_fullscreen.mp4

When the "X" (one icon to the right just next to it) or the Esc key is pressed, the full screen icon is not toggling its sprite correctly (it ends showing the exit full screen instead of enter full screen icon).

This is only a minor visual bug on the icon, the actual entering/exiting of the full screen is working correctly.

The third way I found to exit the full screen is by clicking the full screen icon while in full screen, this however toggles the icon back correctly and is working as intended.

I'm using FireFox 88.0 (64 bits).

I have an issue with iframe

I implement iframe instead of frameset.
main.html is the main html of spotlight.
Then I found a problem while clicking an image, the [X] button will be outside the screen. I can not click it to close image.
May you fix this?
(For now, I just modify "width: 100%;" to "width: 90%" to avoid the error , but iframe will have one extra scrollbar .)

    <style type="text/css">        
	#frameTop
    {
        position: absolute;
        top: 0;
        left: 0;
        height: 100px;
        width: 100%;
        overflow: hidden;
        vertical-align: middle;
    }

    #frameContentLeft
    {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: auto;
        overflow: hidden;
        vertical-align: top;
        background-color: #777;
    }

    #frameContentRight
    {
        position: absolute;
        left: 120px;
        top: 0;
        height: 100%;
        width: 100%;
        right: 0;
        bottom: 0;
        overflow: hidden;
        background: #fff;
		
    }


    </style>

</head>
<body>    

<div>
    <iframe id="frameContentLeft" src="menu.html"></iframe>
    <iframe id="frameContentRight" src="main.html"></iframe>
</div>

Firefox scrollbar bugs

I ran across scrollbar bugs on Firefox. I see them on Firefox 88.0 (64-bit on Arch Linux). Here are the steps to reproduce the bugs:

1. Navigate to the demo
2. Click one of the images in the top row
   • The spotlight UI is shown in the whole document area.
   • BUG: The browser shows a scrollbar. Expected behavior: there should be no scrollbar (confirmed in Google Chrome).
3. Click the full screen icon at the top right (second icon from the right)
   • The spotlight UI is displayed full screen.
   • The scrollbar is no longer displayed.
4. Press escape to exit full screen.
   • The spotlight UI is shown in the whole document area.
   • The scrollbar is still not displayed.
5. Click the close icon at the top right (right-most icon)
   • The spotlight UI is closed, returning to the demo page.
   • BUG: The demo page no longer has a scrollbar and cannot be scrolled. The page needs to be reloaded to bring the scrollbar back. Expected behavior: there should be a scrollbar and the page should be scrollable.

It seems losing cookie/session while viewing an image under iOS safari.

It seems losing cookie/session while viewing an image under iOS safari.
(It works fine under windows and android. )

I just got a Mac 10.14 to test.
when I use iOS safari 13, it hang up while viewing an image, the loading loop will never end.
It seems cookie/session is missing therefore the loading is corruptted, BUT I click "download", the image will be downloaded successfully with successful authentication.

Maybe the viewing entity and download entity are different ?

please advice.

Dynamic load of prev/next images

Hi,
another question. I'd like to open just one image, but have arrow buttons (left/right) triggering loading another image with JS function (e.g. with AJAX). So, at the moment of showing spotlight I know only one image, but when clicking right arrow, another image should be loaded. Is it possible with the bundle version or I should modify original code?

Closing the gallery with swipe gesture or vertical scroll event

Hey!

You've done a great job building this package!

One feature that I would love to have is the ability to close the gallery/lightbox with swipe up/down gesture (You may be familiar with this feature from Facebook - mobile) or vertical scroll with the mouse (You may be familiar with this feature from Medium).

Example

Do you think you can add this feature to this package?

Suggestion：Please don't use location.hash so the library can be compatible with angular HashLocationStrategy.

Suggestion：Please don't use location.hash so the library can be compatible with angular HashLocationStrategy.

New button / function

Hi,
great library! Very useful and very well-looking.

My question is if there is a possibility to add own buttons in an easy way - for instance to manipulate the image (change colors) or download the file?
It would be great if I can define just an image for new function and implement this functionality as JS function.
Maciej

AMP Support

I'm using AMP for my website. Is there any way Spotlight can work with the amp-img and amp-carousel components? Since at the moment Spotlight requires wrapping each image in an anchor element, but amp-carousel does not behave properly with anchor elements wrapped around each image (amp-img).

Perhaps a way of doing this by adding the class to the image itself rather than to a wrapped anchor element?

Request: additional autohide on title

Hi,
in advance - sorry for abusing the issue-tracker for a feature request.

An additional autohide for the footer/title would be really great.
Sometime there are elements in the picture which are been covered of the footer-bar/title.

Thx :)
Regards.

Calling Spotlight.show() with option {theme: "white"} toggles between dark and white themes

The issue can be tested on the demo page by changing the line:

spotlight/demo/index.html

Line 82 in 40c8e47

theme: "dark",

to

theme: "white"

When using the SHOW buttons (opening and closing the gallery several times), the theme will toggle between white and dark.

Currently, the white theme can be set only by using the following trick:

theme: document.getElementById("spotlight").classList.contains("white") ? "dark" : "white"

Show one image only, when clicked opens multiple images gallery

Is it possible to have just one image shown, then when clicked it opens gallery with multiple images inside?

I see that it can be done with JS, but images will be added through CMS and I would leave that as a last resort.

Using play with the api

Firstly , I've just discovered Spotlight - congratulations it's a nice small project, however I've hit a problem I can't solve. Here's the relevant bit of my code

  /**
   *
   * @param {HTMLElement} current
   *
   * @return {void}
   */
  const openLightbox = (current) => {
    Spotlight.show(collection, {
      index: collection.findIndex((el) => el.id === current.dataset.id) + 1,
      autohide: false,
      autoplay: false,
      play: true,
      download: canDownload,
      onchange: function (index, options) {
        // Support HTML in description
        if (options.description !== '') {
          const description = document.querySelector('#spotlight .spl-description');
          description.innerHTML = decodeURIComponent(options.description);
        }
      }
    });
  };

With play & autoplay set as above, when clicking on the play control, the slide change only runs once. Stopping play and restarting it again only runs for one slide change. If Autoplay is set to true then the slideshow runs properly.

In addition to the above, setting play to a number (any number) doesn't seem to have any effect.

Theme switching

When the default theme is set to "White" (by data-theme="white" on container). if I close spotlight window and enter window again, then theme switching from "White" to "Dark". Next time theme switching from "Dark" to "White"...

Are PDF image and Tiff image not view?

Feature suggestion

Add translatable aria-labels to the controls

Close gallery on click

Hi!,

First of all, thanks for developing this amazing package.

I have not found an option to enable closing on mouse click. Does it exist the feature?

Thanks very much!

Disable zoomIn/zoomOut on scroll

I've disabled the zoomIn and zoomOut buttons via the API, but there seems to be no way of disabling zooming on scroll as some default js kicks in. Any way to work around this? I'm trying to add a overflow-y: scroll with cover class to enable scrolling of long images.

Could we have a download feature when I show a image?

Could we have a download feature when showing an image?
If I put thumbnail in the img src, I don't wanna download thumbnail. But I could not download when I click and show an image (save as will save to a html .

iOS safari seems not able to view picture with v0.7. Please help to confirm the issue.

I just tested 0.7. It is great in windows and android.
but iOS9 Safari seems had problem to view picture.

I also tested the https://nextapps-de.github.io/spotlight/ with iOS9, There are only first row images ("Anchors & Images") able to be opened, the rest images just don't open.

ps: I don't have latest iOS device right now, maybe someone could tested and report?

Custom options do not work

Hello,
first of all thank you for this great gallery.
I want to use the white theme, but the custom options do not work.

Here is my example:
http://nirvana.bplaced.net/spotlight/

What can I do to fix the problem?

The full screen icon is sometimes missing in demo

It disappears and/or re-appears randomly and sometimes it's missing from start, examples:

• If I enter to 2/3 the icon is missing and going to 3/3 and then back to 2/3 makes it appear again.
• If I click on the 3/3 image on demo, and navigate to 2/3 it reappears, but then in 1/3 it goes missing again.

Is the demo like this for all of you or I'm having some cache issues?

i have a problem with spotlight-group class

i have added spotlight-group class and after clinking a photo in my gallery it only show this photo in the lightbox. please help

zoom on mobile

can you make it zoomable with two fingers on mobile devices .

When version 0.7.0

Dear Thomas,
when can we expect v. 0.7.0? Do you have any time schedule for this next release?
Best regards,
Maciej

Weird behavior with data-theme="white"

I have added spotlight on my site here:

https://www.print-css.rocks/lesson/lesson-multi-columns

Clicking on an image sometimes results with a black, sometimes with a background although data-theme="white" is set for all image links.

Events / Hooks

Hey,

Are you planning to add events / hooks so for example we could run callback after slide has changed?

I'd like to integrate Spotlight with carousel but I can't see a way to synchronize carousel current element after interacting with lightbox. With like changed or updated event it would be easily done.

Erratic Zoom on macOS

Hi!

Looks really elegant, nicely done!

Just had in issue on macOS Mojave using Chrome v74. When I open one the galleries and happen to scroll horizontally using the Magic Mouse or the trackpad, the image would suddenly either
a) get extremely zoomed in until only a couple pixels are visible, or..
b) disappear from the viewport entirely

Seems like when zooming with scroll, the CSS transform would reach some extreme values like scale(2.22699e+12); so a limit should be set!

Only errors ...

Sorry, but your library is full of bugs ..... I see for the first time so many bugs in one library.

1. You CAN'T use Spotlight with only one param or you will get an error
2. You need always to use title for images array or you guess it ...
   client.js?ver=1577689873:117245 Uncaught TypeError: (t || document).getElementsByTagName is not a function
3. If you are using Spotlight .close(), then open the gallery and try to change the image, yes 👍
   client.js?ver=1577690024:117241 Uncaught TypeError: Cannot read property 'length' of null

These all are when I am using JS to set the gallery.

Can I link script in body section, instead in head?

HI friend!

The documentation says:

1. Just insert the script resource tag right after the documents head:

Can I link the script not in the head section, but before the closing body tag? What problems can there be?

Cannot use the package with Package Manager (NPM)

Hey.

It seems to be impossible to use the package with a package manager. When I install the package, I can't just import it and use it:

import Spotlight from 'spotlight.js'; // This gives an empty object {}

You seem to miss the main entry in your package.json file. Also, your module does not declare any export definition. The only way to use your package is to manually download it or via CDN. Is that intentional or is it something you can fix?

Thanks

Typings

Could you add type defintions when using it with TypeScript?

Loading the library after DOMContentLoaded event

Hey @ts-thomas.

There is an issue that when I attempt to load the library after the DOMContentLoaded event had already been fired, the gallery does not work.

My scenario is relatively simple. I don't want the user to download the library on the initial page rendering, thus I use dynamic import to download the library after the user can see some content (since the gallery is not the main feature of the page). By doing so, it seems like the library is not registering itself properly due to it expecting to respond to the DOMContentLoaded event.

The easiest fix I can think of is to export the logic of the DOMContentLoaded into a function which you also bind to the Spotlight object:

// Turn this:
addListener(document, "DOMContentLoaded", function() {...}, {once: true});

// To this:
function init() {
  // code...
}

addListener(document, "DOMContentLoaded", init, {once: true});

// ...

/* Export API */

window["Spotlight"] = {

    "init": init, // <-- The addition
    "theme": theme,
    "fullscreen": fullscreen,
    "autofit": autofit,
    "next": next,
    "prev": prev,
    "goto": goto,
    "close": close,
    "zoom": zoom,
    "menu": menu,
    "show": show,
    "play": play
};

Now in my script I could just call Spotlight.init().

What do you think?

Unable to preventDefault inside passive event listener invocation

I have the following error message when using Chrome browser
Unable to preventDefault inside passive event listener invocation

New button in toolbar

@ts-thomas Thanks for updates but i think that this request concern an easy way to add a new button in toolbar and not in footer.
Thanks

Originally posted by @adaniello in #13 (comment)