jsor / lity Goto Github PK

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

What is the browser support for this nice plugin?

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, 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?

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.

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.

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

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

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

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 I like your lightbox, I found it is responsive and not over bloated. I have a few questions if you wouldn't mind.

1. I can see a loading message in the script, but my javascript is not that good, so wanted know how can I enable the loading message everytime a iframe is being loaded? At the present moment the screen is blank till the iframe loads
2. How to disable clicking outside of iframe to close.

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

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

How can you set the window height to 95% no matter what the width is? Using something like flexbox?

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

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...

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

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

Is there a good way to allow the lightboxed content to scroll when the content is taller than the screen?

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.

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?

Viewing an image where you need to use pinch to zoom gesture for more detailed view seems impossible.

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?

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

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

Hi,

how can i do some gallery group with listing?

thx

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

• Modernizr (custom build using Gulp Modernizr)
• Outdated Browser
• jQuery (latest 2.x)
• D3 Ease
• Segment.js
• GSAP TweenMax
• GSAP ScrollTo Plugin
• ScrollMagic
• ScrollMagic GSAP Animation Plugin (seen in example here)
• CountUp.js
• Swiper
• Parsley
• Lity

Hi,

is there a way to set lity for a group of images instead of only one for time?

Thank you!
I love lity :)

is there any way to set window size. example i want change my iframe window size 640x480 then how ?

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.

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

2. If i click to same button but open link in new window / tab, page was with standart styles (with header, footer etc).

It's possible?

Thanks

Is there is any way to resize automatically lity window as per window resize, seems here size of lity frame is fixed..

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?

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

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,

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.?)

The .svg file is shown, but within a viewport with scroll bars.

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?

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!

Is it possible to have this lightbox activated when the page loads? If so can you please help me?

How do you open a YouTube video so that it takes up more of the screen space?

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.

Is there a way to close the iframe modal from the opened page?

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

jsfiddle

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?

Here is the site

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?

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?

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>