andreknieriem/simplelightbox

Touch-friendly image lightbox for mobile and desktop

simplelightbox's Issues

Get images from array

Is it possible to load the images from an array?

I have a situation where I don't want all the images on the page, all I need is to click a link and open simplelightbox with the gallery.

Lightbox not working if the image URL have GET parameter

If the link URL contains GET parameters (e.g. ?param=foo), the lightbox doesn't work.

Example : http://codepen.io/yvalentin/pen/mVPBKg

Caption Flick onload

Hello,

The problem is when caption position is outside, there is a delay between img load an caption load so it's look like a little flicker. Is it possible to develop caption apparition, a simple fade in could be really nice.

Thanks a lot for you good work

Kind regard

Grouping Images

Hi Andre,

Love the plugin, but it require a grouping function to separate the images in same pages to have their own gallery.
Or is the function already there? Because I can't find any guide about it.

Scroll Function of Site

Bei geöffneter Lightbox, wäre es super wenn die Seite nicht auf und ab Scrollbar wäre mit dem Mausrad oder dem auf- und ab Pfeil der Tastatur.

Lightbox will not appear on firefox

Hello

My lightbox works perfectly fine on all browers beside firefox. Any ideas ?

Swipe top/bottom to close gallery

Hello!
Thank you for the great plugin! That's ideal for my needs.
Is it possible to make swipe top/bottom action to close gallery?

Cheers!

Spinner for multiple lightbox in a single page

Hi Andre, I'm following what you told me about multiple lightbox in #16
And I found out that the spinner (.sl-spinner) loading gif for image will not hide itself after closing the lightbox once it's been called out.

I also tested to have only 1 lightbox in the page and the spinner will hide after I close the lightbox.
This happens once the lightbox is more than 1 in a single page.

Could you please check?

Lightbox positioning problem!

Hi!

first of all good work with your simple lightbox, keep it up!

In my case I have a problem with it. The calculation for the .sl-image container (top value) doesn't work properly. In my case the top value is the height of the document, so the container with the image isn't visible!

Screen - 1: From my inspector
https://www.dropbox.com/s/qc1o0bxgaghbodj/Screenshot%202016-04-07%2007.34.28.png?dl=0

Screen - 2 : What the browser window looks like
https://www.dropbox.com/s/zruxy4ai3pzr0vp/Screenshot%202016-04-07%2007.35.42.png?dl=0

There are NO other CSS styles in the document. The HTML is really minimalistic -> https://www.dropbox.com/s/0ckrt7c3lupc7oe/Screenshot%202016-04-07%2007.38.42.png?dl=0

So have you an idea what this issue could cause?

Regards M.

Sliding glitch on Chrome

There's a peculiar error in sliding images in Chrome if on a page is visible any element with transform: translate3d(0, 0, 0);.

To replicate the error:

1. Visit http://andreknieriem.de/sl/demo/ on Chrome.
2. Using Developer Tools add transform: translate3d(0, 0, 0); to the paragraph below the gallery: https://db.tt/upBx4gd5
3. Open image 1 (https://db.tt/1kkH4YTV) in lightbox and switch to the next image. You'll see a glitch in the slide animation.

On your page, this happens with some images only, but in my case it's all the time - it's related to visibility of any element with transform: translate3d(0, 0, 0); (in Chrome only). If you scroll a page, so the element is not visible, all works fine. I guess it's a Chrome render engine issue, but maybe you can fix it somehow.

Counter display bad value when i use multiple simplelightbox instances

Hello,

First of all, thank you for your application that is really good.
But i have a little bug with the counter.
When i click on next and previous arrows (if i have multiple instances of simplelightbox on the same page), the counter display a bad value (1/10 instead of 6/10, for example).

File extension limitation

Your isValidLink function limits the types of images that can be used - so if someone wants to use a url that doesn't include a file extension (e.g. http://placehold.it/500x500), or one that doesn't have one of the allowed extensions, or if the url includes query parameters after the file extension, then the lightbox won't work.

It might be worth either: removing this and trusting in the developer integrating it that they'll use an image, or just adding a small note to the readme about this limitation.

einzelnes Bild: swipe / drag & opacity Effekt

Hallo Andre,

ich gucke mir gerade die simplelightbox an und habe zwei Fragen:

Edit...
Beide Fragen haben sich recht schnell geklärt.... Wer lesen kann.. :-)

Danke für das Plugin!

LG
Oliver

Nav button bug with loop false

If you have 2 images and set loop to false the next/prev buttons do not act like they should.

Btw, pinch/zoom capabilities on touch devices would be nice addition because lightboxes on especially smartphones aren't that useful when you can't zoom in to see details.

Thanks for sharing!

endless loading

Thanks for your application. But has a little problem. If an image doesn't exist, a load working endless and I have no method how to close viewer until to full refresh a page

Alignment of Navigation / Close Buttons

The alignment of the navigation and close buttons could be optimized using font-family and line-height. They could also be a bit bigger for optimal touch support.

Let me know if I should submit a pull request.

next image not loading when alertError: false

not sure if this is intended behaviour or not - but when you hide the errorAlert (with options errorAlert:false) the next image is not loaded when switching from last to first image (or vice versa). To me, it looks like loadimage() should be executed even if options.alertError is false.

see Line 191 to 199

if(options.alertError){ alert(options.alertErrorMessage); if(dir == 1 || dir == -1){ loadImage(dir); } else { loadImage(1); } return; }

Prev / Next buttons appear even if there just one image

If I put the lightbox on a single link, the prev / next buttons are showing.

Example : http://codepen.io/yvalentin/pen/LGNzmB

Disable "Right Mouse Klick"

Wäre super, wenn die einstellbar wäre. Um den klau von Bildmaterialien zu erschweren. :)

Super Sache deine Simple Lightbox!

image jump

Hi, I tried your script!
When flipping the image. Hides picture twitches. Before full of hidden again briefly shown.
(Win8, Chrome)

Привет, пробовал твой скрипт!
Когда листаешь картинки. Скрываемая картинка дёргается. Перед полным скрытием снова на мгновение показывается.

Close method keep reseting location hashbang

Although we've set history option to false, whenever we close the slide, it will reset hashbang

Drop Event does not fire when mouse leaves window

Slide is stuck in drag-state when mouse exits the window!

Add option for caption positioning

Hi André, a nice feature would be an option to set the caption's position.
Currently, the caption is overlapping the image at the bottom of the image.
The option should allow to do position the caption below the image, such that the image is not covered by the caption at all.

I guess, one more value 'top' for the option can be helpful for those people that want their caption to be positioned on top of the image instead of below.

So this all could end up in an option like
captionPosition: 'overlay'|'bottom'|'top'

Thanks in advance,
Holger

open.simplelightbox & opened.simplelightbox events are not working

open.simplelightbox & opened.simplelightbox events are not working, but close.simplelightbox & closed.simplelightbox events are working fine as expected. Also I'm not getting any errors/issues on browser console.

if click previous

Hi again :-) Thanks for your application, it is a best what I found for my goals.
I found a little bug
If image doesn't exist and I click on the left arrow(prev), images switches to right always but I think it should switches to left with a skipping non existing images

Watermark Option

Hello again,

My goal is to have a div with a back-image class over the image to be abble to add a watermark.
I try very hard to use event to append html code inside lightbox, but it's not working properly.
This is the best solution I've founded... Not really working...

 $('.galleries a').on('changed.simplelightbox', function () {
            $('.sl-image').append('<img class="watermark" src="/app/medias/logos/signature.png" alt="Smiley face" height="200" width="200">');
        });

The best should be to simply had a div with a class above the caption div directly in the simplelightbox plugin. I'm not good enough in JS to do that, pretty newbie in fact :)

It's a pain in the ass and the quality is never sharp when rendering the watermark directly in the jpg.

Can you help me?

Thank you so much,

Jim

Syntax for options (question)

Hi,

I'm trying to use this plugin, wich looks ghreat.
I'm not really good at JS so, I wonder what is the syntax for passing options to Simplelightbox ?

For example, I would like to change the close text. Following code is not working

var gallery = $('.galerie a').simpleLightbox(closeText : 'close');
});

Any idea ?
Thx

Use better default for closeText

The closeText should default to something like × (×) instead of the plain letter X.

Youtube links support

Very nice plugin! One thing is missing do youtube video support in lightbox :) It would be great to have such feature.

Can not close the lightbox preview on iOS

Hi, I'm using your Lightbox.
It is beautiful, until I can't close the popup anywhere except close button on iOS only (I don't tried it yet at Windows Phone but Android and iOS.

Body tag styles leftovers

Could you clean up body element after lightbox closing? Currently this stays there: https://db.tt/WJpB7SpI and for example overflow: auto causes problems to any element which uses position: sticky on a page. A solution would be overflow: initial or simply removing styles after lightbox closing.

Disable Right/Left Shift Animation

Is there an option to disable the animation between slides that makes the image shift right and left? I'd like the option of just having the fade in/out, but I'm hesitant to dig into the javascript myself. I'm a javascript novice, but can probably figure it out if someone could at least point me in the right direction. Thanks!

Drag&Drop doesn't work in FF

If you drag&drop in Firefox via mouse it doesn't work.

previous/next buttons with loop is false

Hi André,

Great plugin! I think it would be nice when loop is set to false, the previous button with the first image, and the next button with the last image would be hidden.

Loading animation

I don't see a point of the loading animation if you use preloading option. It's a tiny time waster. Do you plan to remove it? Thanks a lot

Why performing another select query ?

Hello, I tried your library and it works pretty well, but I have an issue on a way you handle the jquery objects.

Why don't you iterates over the object passed in your jquery function instead of performing a new jquery selection ?

Line 77 :

objects = $( this.selector, this.context ),

Why not using directly the objects array of the jquery function ?

this.each(function() { var $this = $(this); /*...*/ });

Thank you.

How make a single image?

Hello!
How make a single lightbox per one image, if many images on page?
Or make many galleries on one page?
Plugin create a gallery only.
Thx.

Add option to hash to the open lightbox for mobile sites

Like this:
http://demos.jquerymobile.com/1.3.0-rc.1/docs/demos/widgets/popup/

Otherwise on Android most of the time the user click on "back" button of the phone to close the modal (like in FB, or google images) - and "by mistake" --> "go back in the url"

docClose issue on iPad

Hello,

I have implemented your simple lightbox for use on a responsive and mobile friendly website however I am having problems with the docClose functionality when testing on an iPad. I have tested the functionality on an Android mobile, Windows 7 PC, Windows 10 PC and Macbook and for all of these clicking away from the image in the lightbox will cause it to close like expected however this functionality is not working for me on an iPad.

Are there any suggestions?

Note: I am running iOS 9.3.1 and using Safari

Update: I have noticed that you can close the lightbox if you click on the border between the image and the overlay but it has to be directly on the border, any further away and the functionality is lost.

captionPosition

Is it possible make combined value for captionPosition like 'top outside' or 'bottom outside'. If I set top, in this case the caption covers a part of image, but should be above the image like the value 'outside'

Image caption suggestion: title and description

I've been developing a website as a personal project and have included your wonderful lightbox within to offer the great functionality it provides and while implementing an image gallery I thought about a possible improvement or addition that could be made to the simple lightbox.

I've noticed that some photographers and people who host images on portfolio's etc like to have a title and a description associated with a photograph or image and displayed inside the caption so they can display a creative name for the photo/image as the title and use the description to add extra detail like where it was taken or who is featured in the shot. The title and description for a photo/image would then be contained within the 'title' and 'alt' attributes respectively inside the 'img' element although there is no reason the information could not be held within data attributes instead. Assuming classes were then added to both the title and description inside the caption they could then be styled appropriately to suit the users requirements.

I don't know if you feel this functionality would be useful to have or whether it would add a level of complexity that would take away the simplicity of the lightbox but I thought I would share my thoughts and suggestion.

Thank you for reading,
Daniel.

Responsive - mobile view - 100% width image?

On mobile the space right - left make the zoom image "to small". How to create image without left-right padding - margin?....

Caption missing?

I can't figure this out. Maybe its me. Viewing this page here:
http://rfp.thegreatwaterway.com/planner/facility-view.html?facility_num=767
The first main image there under "Green Acres Inn" does not have a caption. But its clearly defined with the title="Green Acres Inn" in the HTML source (line 339). The images below it do have captions though. Not sure why it won't add the caption for that one. Line 620 in the HTML source is the jQuery line. Any clue?

Don't output markup if not initialized

The following markup will be generated just by including the plugin with no initialization:

<div class="sl-overlay"></div>
<div class="sl-wrapper simple-lightbox">
    <div class="sl-image"></div>
    <button class="sl-close">X</button>
    <div class="sl-navigation">
        <button class="sl-prev">←</button>
        <button class="sl-next">→</button>
    </div>
    <div class="sl-spinner"><div></div></div>
</div>

Possible to display thumbnail at bottom

it is possible to display thumb images(small) at bottom while lightbox large image opened.
?

hello, how to re-init simpleightbox

you know , if i use js delete a img nod . lightbox can still see it . how to deal with it？

body {padding-right: 15px;} when opening image

Hi,

Somehow, when opening an image, css for body is changed (padding-right: 15px;).
This makes the site flicker slightly to the left. Is it possible to disable this?

Thanx for this great plugin.

Not working properly on windows 8.1 phone

Hello I just wanted to let you know that on a Windows 8.1 phone the gallery is not working properly.

When clicking on a thumbnail it just follows the link and opens the image in a new page instead of opening the lightbox.

Preloading with jQuery v3.1.1

I got the following console error while using Simplelightbox (preloading turned on) with jQuery v3.1.1.
Uncaught TypeError: url.indexOf is not a function

Test case:
https://jsfiddle.net/bydbjp2L/2/

No more picture visible after sliding a picture outside a brower

Hi,

Good clean lightbox. Thanks!!!

I will use it in my photography portfolio site in combination with http://miromannino.github.io/Justified-Gallery/. Unfortunately I have one annoying issue found during testing.

I use simplelightbox on a laptop/desktop with a browser when testing. If the browser is not maximized, and I slide outside the browser window, simplelightbox is closed. This is not the real issue (however it would be nice to prevent it if possible).

Next I click on a random picture of the collection to show with simplelightbox. As a response I get the arrows, X-symbol, and the numbering, but no picture appears. However if I click one of the navigation arrows the next/previous picture is shown and everything is back to normal again.

I have the same phenomena with IE, Chrome and Firefox.

Regards,

Steve