jsor / lity Goto Github PK
View Code? Open in Web Editor NEWLightweight, accessible and responsive lightbox.
Home Page: https://sorgalla.com/lity/
License: MIT License
Lightweight, accessible and responsive lightbox.
Home Page: https://sorgalla.com/lity/
License: MIT License
Hey!
Great plugin! I just had one question however. I want to use the inline function for a couple of different explanatory textfields. The ID messes with this however since they are being used on the same page. Do you have any pointers here?
Cheers,
Ronny
Hi and thank you for your work.
I'm facing a problem using your plugin to show youtube videos in firefox, the control buttons doesn't show up.
I noticed the problem exist in the official demo page : http://sorgalla.com/lity/
Thank you.
ps : firefox on OSX 10.11
Hi There,
Is there any way I can force the iFrame for a YouTube video, to use the highest possible quality? (Or at least start at 720p)
Kind regards,
Philippe
How can you set the window height to 95% no matter what the width is? Using something like flexbox?
Hi,
what about just translation setup?
I know that i can setup _defaultOptions, but i don't want changing template. I need just change word "Loading" to Czech "Načítám".
Thanks
Sorry if this was obvious; I dug around the source for a bit but didn't see anything obvious. Is there a way to programatically open the lightbox?
I'm doing a hacky solution that works:
$('[data-lity]').trigger('click');
Just curious if there was a way to invoke a specific instance; and if so, is it in the docs anywhere?
is there any way to set window size. example i want change my iframe window size 640x480 then how ?
If you open lity, the background is still scrollable.
The lity container is not of course, but if you open lity on mobile and try to zoom the picture, it sometimes get's difficult because of the scrollable body.
Currently I'm just hooking body -> overflow: hidden on open and body -> overflow: auto on close.
Is that something you're maybe interested in adding to the project itself?
Hi, thanks for providing this code it's really useful. I'm using the following on my squarespace site:
in the header:
var lightbox = lity();
on each link:
javascript:lightbox('VIMEO URL HERE');
it's working fine in Safari and Chrome but in Firefox I get the following error message:
function popup(event) { "use strict"; // If not an event, act as alias of popup.open if (!event.preventDefault) { return popup.open(event); } var el = $(this); var target = el.data('lity-target') || el.attr('href') || el.attr('src'); if (!target) { return; } var options = el.data('lity-options') || el.data('lity'); if (open(target, options, el)) { el.blur(); event.preventDefault(); } }
I'm not sure what the problem is, can anyone help?
the site is www.treetop.tv
many thanks
Dave
Hi,
First, thanx for your work. Your lightbox is excellent and I'm found of it.
I have a problem when I try to apply the lity lightbox on an image loaded on the fly by a controller.
I give you an example :
<a href="my-route-to-my-controller" data-lity>
<img src="...">
</a>
The image appears but for an image with 300 px height and 300px height, the iframe size is 964px by 542.25px.
That must be a clue, I get the following message in my console : Resource interpreted as Document but transferred with MIME type image/png: "my-route-to-my-controller"
Does your lity lightbox provide a way to display image loaded by this way correctly ?
Thank you for you attention.
I'd like to be able to use the YouTube API parameters (available at https://developers.google.com/youtube/player_parameters?hl=en#Parameters) when using Lity. It seems like if I have a URL like https://www.youtube.com/watch?v=ngElkyQ6Rhs&autoplay=1&showinfo=0&rel=0&iv_load_policy=3 everything gets stripped except for the autoplay=1. I poked around in the source and saw where the regex takes place and figure there is probably a way to edit the code a bit to allow for more parameters. Thoughts?
I love this lib and it works fine if you use physical based images...but as soon as I try to link to an base64 image data, the window will opened up (displaying the image) but not auto-fit the image dimensions (instead, it is full-size).
Any idea how to solve this?
Regards,
kaju
Hi,
I used Bower to install Lity in my Wordpress site but when I click the link, there is no lightbox effect. The video simply opens up and begins to play at the very bottom left part of the page (I have to scroll to see it). It is also about 1/5 the correct size.
Here is my code (I am also using Bootstrap), any help to get this to appear correctly in the center of the page with the darkened background would be greatly appreciated.
<div class="row">
<div class="container videos">
<div class="col-md-5 col-md-offset-1 first-video">
<h3>Sample Featured Video</h3>
<a href="https://www.youtube.com/watch?v=L5L5j9qqmXI" data-lity><img src='/wp-content/themes/sage-8.4.2/assets/images/blog_video1.jpg' class="img-responsive center-block"></a>
</div>
<div class="col-md-5">
<h3>Sample Featured Video</h3>
<a href="#" data-lity><img src='/wp-content/themes/sage-8.4.2/assets/images/blog_video2.jpg' class="img-responsive center-block"></a>
</div>
</div><!--end watch-more-->
</div><!--end row-->
Is there a good way to allow the lightboxed content to scroll when the content is taller than the screen?
Hi I like your lightbox, I found it is responsive and not over bloated. I have a few questions if you wouldn't mind.
Hi,
is there a way to set lity for a group of images instead of only one for time?
Thank you!
I love lity :)
How do you open a YouTube video so that it takes up more of the screen space?
Hi!
The close function seems to fail when you open a YouTube video and hit 'enter' while it's open. Probably it has something to do with the var "_instance".
All the best,
Wachem
Hello,
First off, I love this solution for video pop-up/light boxes and it looks/works great, but I am running into one minor snag that doesn't make a whole lot of sense. I have implemented this on a WordPress site in my main slider. If you click on the first slide the pop-up will appear and then play beautifully. Sometimes the pop-up will appear, start to play the video and then redirect the user to the vimeo page. Have any idea why this would happen?
Hi, I love this lean lightbox, and it is doing almost everything I need to do beautifully. Is there an easy way to add captions to image popups using nothing but the declarative approach? Or will I need to go programmatic?
Is there is any way to resize automatically lity window as per window resize, seems here size of lity frame is fixed..
Hi,
how can i do some gallery group with listing?
thx
Is it possible to have this lightbox activated when the page loads? If so can you please help me?
Hi, jsor
Your js is awesome. I love it.
However, there are a bit confusions whether what happened. Sorry if this bother you.
I don't know much about this and I followed your instruction respectively.
I got this error in Inspect Element console after a second of lity
iframe box showing on my screen.
It's look just what I want for a second and then, it redirects to the target website immediately.
It changed the URL to be the link in href
attribute.
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.
I believe that there isn't any problem about lity
in my code and it's all about the previous error I've shown.
Could you please kindly suggest me the solution of this problem?
Thank you
I'm having a very strange issue and I'm really not sure exactly where to begin.
The only way I can recreate it with consistant, reproducible results is by having a purposeful error exist in my javascript.
When using concat with Gulp to combine all my scripts together, Lity won't seem to load by default. I have tried going through each combination of leaving out another script here or there to see if there was something conflicting but Lity still would never seem to load correctly. It would always simply link to the external content, be it YouTube or Vimeo, without showing in the lightbox.
I would never see any JS errors mind you... I've even told my console not to clear the errors on navigation so that in case there was something that popped up real quick before it went to the link, but no errors ever stuck.
To test if it was something conflicting, I would try to comment out some of my external scripts that I'm using. Each time I would leave out a script I would comment out whatever code I'm using in my JS that initializes the library so as to remove any errors that might cause... But then I discovered by accidentally forgetting to remove one, Lity finally worked correctly when I saw an error in my code. Once I figured this out, I put all my scripts back in that I wanted to use and simply added an initializer for a script that doesn't exist. In my case, one of my other scripts is Parsley (form validation)... so I duplicated it's init and simply added a 2 to it: $('form').parsley2()
I'm honestly not sure what's going on here. I know it's really strange but I'm not strong enough with javascript to know where to look next. If anyone can help tell me what I should test next that would be great. I don't like having errors in my code so I want to figure out what's going on here.
For reference, here is all the external JS I'm using (and they concat in this order with a ;
inserted in between by Gulp):
Is there a way to close the iframe modal from the opened page?
Thanks!
UPDATE: Sorry, you can ignore this. I made an error in my original youtube.com/watch?.. URL which led me to using the embed URL. My mistake sorry.
Thanks for making Lity! I'm enjoying using it and have a question with regards to using additional YouTube URL parameters.
I see that Lity generates a YouTube URL from the href and appends 'autoplay=1' to it, i.e.:
=> www.youtube.com/embed/oJX4TcyhkP0?autoplay=1
I'm wanting to use the additional parameters 'showinfo=0' and 'rel=0'. In order to have this work with Lity, I need to make the href:
=> www.youtube.com/embed/oJX4TcyhkP0&showinfo=0&rel=0
so that the resulting URL becomes:
=> www.youtube.com/embed/oJX4TcyhkP0?auotplay=1&showinfo=0&rel=0
Problem is, this href [www.youtube.com/embed/oJX4TcyhkP0&showinfo=0&rel=0] is invalid as the first parameters starts with '&' instead of '?' and if anyone grabs this URL directly, YouTube returns an error.
Is there an easy way to pass these additional parameters?
Geart and light-weight plugin, I use it instead of FancyBox.
How to allow to open opposite path as iframe ?
For example:
<a href="/post/preview/" data-lity>Preview Post</a>
Lity requires jQuery when using npm/browserify, but if my site already uses a CDN version of jQuery, I can't use lity without including jQuery twice. Is there a solution? Thank you.
The regexp test for the image handler prevents using an image url that does not have an image extension even if use {'handler':'image'}
for the options.
i.e. I can't use images like https://lh3.googleusercontent.com/JT9YU8YgAur2EWr2-Ra1SFEqYjlqjH0q_GAimejTXK_hvxEEvymMsf1drGorDwsk9Js_Gf9H9ifCUOgUg3q-lhhk3w6FdnSg
Hi,
Can we add title and small description when opening image, video in lightbox.
something like this, data-title="Tile" AND data-desc="Small description goes here"
Let me know if this is possible or you can add this feature in near future?
Is there a way to group certain images into gallery, so that you can have prev and next button when lightbox is opened?
Reading through documentation I would say its not possible but I want to be sure.
Thanks
Hello,
Is it possible to create a continuous gallery, so once you open one image you could navigate back and forth (with the navigation arrows) to the next one without having to close the current one and open the next one manually?
Lity is fantastic and that's the only issue I need to solve to finish my project.
Please help me.
Hi,
Is it possible to create the ability to allow two or more images to be used as a gallery within the lightbox?
Thanks
Hi,
is some option to load page with ajax request?
In framework what i am using is function to detect ajax request and i can overload page styles to "naked style".
Idea:
1)If i click to button where is link to page with parameter "?nostyle=true" lightbox load page via ajax and my system overload styles for lightbox view (without header, footer, etc - naked)..
It's possible?
Thanks
Hi!
I have videos of different sizes and I was wondering if it is possible to have the player somehow adapt automatically to the size of each video?
Thanks!
Hi there
I'm learning JS when on school break. Honestly, I still need tons of works to achieve my goal.
I'm building simple site for school project. In it, I use Magnific Popup JS as lightbox for all image formats (jpg, png ...).
jQuery(document).ready(function() {
jQuery("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.gif'], a[href$='.png']").magnificPopup({
type: 'image',
disableOn: function() {
if( jQuery(window).width() < 300 ) {
return false;
}
return true;
}
})
});
After I found out Lity, I really want to switch from Magnific Popup to Lity. Could you please help me to point out how I can add Lity on all image formats on my site?
Thanks much indeed.
Hello i have recently include lity to my project but i have bug
http://share.bleudiamant.fr/RHrwTvL4.png
i don't know why i have a black border
otherwise Great script :)
Thanks for cool and useful plugin.
I have an Idea.
When use low quality image for list.
After click image, use high quality image link.
I want use another image link for lity.
like below ...
<a href="https://example.com/low-quality-image.jpg" data-lity="https://example.com/high-quality-image.jpg">Image</a>
thanks.
Hi,
How can I change code to move x button from the top of the page to appear on the top of the content (ex. iframe, img etc.?)
I'm trying to use this to force a user to complete an age gate before entering a website. I need a way to disable closing of the lightbox by clicking outside of it.
This is what I have so far:
$(document).ready(function(){
var agegatelightbox = lity({
'esc': false,
'template': '<div class="lity" tabindex="-1"><div class="lity-wrap" data-lity-close><div class="lity-loader">Loading...</div><div class="lity-container"><div class="lity-content"></div></div></div></div>'
});
agegatelightbox($('div#agegate'));
});
What is the browser support for this nice plugin?
Sorry for abusing the issue tracker for this question. I am not so experienced with JavaScript.
$(document).on( 'click', '[data-lity-close]', function(event) {
$( '[data-arve-lightbox]' ).removeAttr( 'src data-arve-lightbox' );
$( '#wpadminbar' ).removeClass( 'arve-hidden' );
});
I have this code and its works fine as long as the user clicks the close button, but it does not on ESC press. How could I hook into this event as well?
Hi there!
What is the browser support for this very nice plugin?
I've been able to test for older versions of FF & Chrome & there it works really nice.
This doesn't really come as a surprise though.. :-)
How is the support for IE?
Since I can't run IE versions side by side I've tried it with choosing older version of IE, version 9, inside IE11. It seems to be working fine except it crashes when tring to close the Vimeo iFrame. But it's hard to know if this is really happening in IE9 for real...
Thanks for a nice plugin...
I ran into an issue where the "×" symbol to close the lightbox was being misinterpreted by the browser as "Ö" (Safari) so I propose changing it to the HTML entity "×" in the JavaScript.
I'm trying to add a caption to this beautiful lightbox. This code mostly works -- I see the caption text flash in the lightbox before the image replaces the appended element. What is the best approach to adding custom content in addition to the default lightbox content?
$('[data-lity]').click(function(e) {
caption = $(e.currentTarget).siblings('figcaption').text();
});
$(document).on('lity:ready', function(event, $lightbox) {
$lightbox.find('.lity-content').append('<p>'+caption+'</p>');
delete caption;
});
Sorry not an issue but a question, is it possible to load a single tweet in the lightbox? At the moment it supports entire url.
Thanks
Try to combine lity with zepto...
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.min.js"></script>
<a href="http://placehold.it/800x800?.png" class="item" data-lity><img src="http://placehold.it/200x200" alt=""></a>
Got
lity.min.js:4 Uncaught TypeError: b.Deferred is not a function
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.