andreknieriem / simplelightbox Goto Github PK
View Code? Open in Web Editor NEWTouch-friendly image lightbox for mobile and desktop
Home Page: https://simplelightbox.js.org
License: MIT License
Touch-friendly image lightbox for mobile and desktop
Home Page: https://simplelightbox.js.org
License: MIT License
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?
it is possible to display thumb images(small) at bottom while lightbox large image opened.
?
Although we've set history option to false, whenever we close the slide, it will reset hashbang
Slide is stuck in drag-state when mouse exits the window!
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.
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.
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.
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.
If I put the lightbox on a single link, the prev / next buttons are showing.
Example : http://codepen.io/yvalentin/pen/LGNzmB
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.
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
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?
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.
If the link URL contains GET parameters (e.g. ?param=foo), the lightbox doesn't work.
Example : http://codepen.io/yvalentin/pen/mVPBKg
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.
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.
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/
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.
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.
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
Wäre super, wenn die einstellbar wäre. Um den klau von Bildmaterialien zu erschweren. :)
Super Sache deine Simple Lightbox!
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.
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
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
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:
transform: translate3d(0, 0, 0);
to the paragraph below the gallery: https://db.tt/upBx4gd5On 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.
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
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'
If you drag&drop in Firefox via mouse it doesn't work.
The closeText should default to something like × (×
) instead of the plain letter X.
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
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.
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!
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!
Hi, I tried your script!
When flipping the image. Hides picture twitches. Before full of hidden again briefly shown.
(Win8, Chrome)
Привет, пробовал твой скрипт!
Когда листаешь картинки. Скрываемая картинка дёргается. Перед полным скрытием снова на мгновение показывается.
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.
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>
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.
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.
Very nice plugin! One thing is missing do youtube video support in lightbox :) It would be great to have such feature.
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!
you know , if i use js delete a img nod . lightbox can still see it . how to deal with it?
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.
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
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
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; }
Hello
My lightbox works perfectly fine on all browers beside firefox. Any ideas ?
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).
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
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"
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.