duncanmcdougall / responsive-lightbox Goto Github PK

• Navigation isn't working correctly
• Console returns an error:
  8jquery.lightbox.js:72TypeError: 'undefined' is not a function (evaluating 'allItems[$.inArray(self, allItems) + 1].click()')
• Previous version appears to work correctly

OS: Windows 7
Safari Version: 5.1.7 (7534.57.2)

I've noticed that if you have more than one gallery on a page the mouse next / previous functionality is broken - seems to jump between galleries and then display images in the wrong proportions. The keystrokes next / previous are fine, it stays within the gallery without issue. It just seems to be the mouse control. Any help / fix much appreciated, thanks.

Regards, Paul Phillips

Hello and thank you for sharing this beautiful and simple responsive gallery.

I have a problem that I can explain as follow:

I have more than one gallery in the same page:

example:

<!-- 1st photoset -->
<div class="photoset1 gallery">
<a href="images/strutturericettive/myphotos/photo-foto2X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photo-foto2.jpg" alt="Picture caption" /></a>
<a href="images/strutturericettive/myphotos/photo-foto4X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photo-foto4.jpg" alt="Picture caption" /></a>
<a href="images/strutturericettive/myphotos/photo-foto3X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photo-foto3.jpg" alt="Picture caption" /></a>
</div>

<!-- 2nd photoset -->
<div class="photoset2 gallery">
<a href="images/strutturericettive/myphotos/photobbb-foto2X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photobbb-foto2.jpg" alt="Picture caption" /></a>
<a href="images/strutturericettive/myphotos/photobbb-foto4X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photobbb-foto4.jpg" alt="Picture caption" /></a>
<a href="images/strutturericettive/myphotos/photobbb-foto3X.jpg" title="Picture caption"><img src="images/strutturericettive/myphotos/photobbb-foto3.jpg" alt="Picture caption" /></a>
</div>

The problem is that the gallery of the 1st photoset continue on the 2nd photoset and so on.

I have tried to set a rel="photoset1" and rel="photoset2" but without result.

How can I solve this issue?

Thank you for your help!

Hi Duncan,

First of all - thanks for sharing. Really like the lightweight approach.
However it is not really an issue, I would like to know if there is a simple way to include a swipe option to make it more accessible on mobile?

Thanks,
Eva

I tried to use navbar and lightroom in bootstrap site but only either of them is working. Both of them are not working simultaneously.

If you have multiple groups on a single page it will jump to random images in all the different groups instead of just browsing images in the group that was clicked.

how can i add multiple lightboxes on a single page? i have tried different rel values, but when i edit the javascript, the nav buttons somehow disappears.

Dear McDougall,

Great work, I liked it the moment I saw the blurring effect which I used in the app that I am developing nowadays.

We, you actually, should versionise it. Let me know If I can assits.

On the other hand, is it working with BS3 and jQuery 2?

I'm using your nice lightbox on a responsive site, and it is working except on the mobile. When the background is not positioned at the top, the arrows don't work.

Your demo does the same thing, when I add enough images so that it will scroll.

Is there a way to fix that?

The image get backgrounds opacity.

The z-index solution is: Set the other items without z-index

When navigating between images with the arrow keys on keyboard while there is a horizontal scrollbar on the webpage, it moves that background/webpage also every click. That's a bit annoying. Hopefully this can be fixed 👍

So what exactly does this mean? Is it OK to have author name, author homepage link, and license info in just the JS file? Or do I need to add it elsewhere?

I'm considering integrating your responsive lightbox into an MIT licensed project ( http://www.cascade-framework.com/ ), but I'm not entirely comfortable with your CC Attribution license as this license is notoriously ambiguous and could conflict with my own license of that of people who want to use my framework.

Would you consider replacing your CC Attribution license with an MIT, BSD, Apache, LGPL or similar license? IMO such licenses are far more suitable for code libraries as they're less likely to conflict with other licenses.

It's a bit of a pain importing the CSS files, ideally having SASS or LESS available would aid a lot of developers.

Edit: Ok for high resolutions, sorry for my original comment

I was having some trouble using the plugin with links that were loaded by ajax. After a while I found the solution, just wanted to share if anyone has the same problem:

Normal request:

$ ('.lightbox').lightbox();

Requests for items loaded with ajax:

$ (Document) .ajaxComplete (function (event, request, settings) {
      $ ('.lightbox').lightbox ();
});

Thanks for sharing this simple and lightweight plugin.

I implemented this lightbox on a Bootstrap built site and noticed a conflict with the navbar-fixed-top. Though the navbar was fading back, the close button was hidden beneath it, and images that were tall enough were being cut off by it. I added a z-index to the #lightbox and it's fixed.

Otherwise, works perfectly. Again, thanks.

• P

Thanks for a great script. It works great without adding a lot of extra stuff I don't need. However I'm trying to group galleries that are dynamically created within the my template files, this means I only have the gallery class name within each post and so can only run the script when I know the gallery ID.

In your group example the code is:

<script>
$(function() {
    $('.gallery1 a').lightbox();
    $('.gallery2 a').lightbox();
  });
</script>

But since I don't know my gallery class names until the post appears in the loop, I need to be able to do this:

<script>
$(function() {
    $('.gallery1 a').lightbox();
 });
</script>
<ul class="gallery1"><li><a href="image"></a></li></ul>
<script>
$(function() {
    $('.gallery2 a').lightbox();
 });
</script>
<ul class="gallery2"><li><a href="image"></a></li></ul>

If I try do that at the moment I get duplication of all the hidden content and overlap of images between the two galleries. Clicking next/prev sometimes loads from the first gallery and sometimes the second.

Thank you.

FWIW: when opening the lightbox in Opera (tested with v12.16 1860 on Mac OS X, on the demo page), the overlay and the next/prev/close buttons are show, but not the images.

To make this plugin a little more dynamic, simple setup refresh / destroy methods might be usefull.

Usecase: dynamically added DOM elements with new lightbox/gallery images. I haven't tested this, but from what I can ready in the code, adding images to an existing gallery and re-initializing it will cause duplicate event handlers to fire on img click.

If you check your example: /demo/groups.html
you will see that:

I'm a big fan of plugin since it's clean and easy-to-use, but I would love the ability to have image captions. I'm still relatively new at Javascript/jQuery, so I haven't been able to figure it out how to add them myself. Any tips?

In the close function, this code unbinds all keydown events:
$(document).off('keydown');

Need to describe a keyDown function:

keyDownEvent: function (e) {
    // Close lightbox with ESC
    if (e.keyCode === 27) {
        plugin.close();
    }
    // Go to next image pressing the right key
    if (e.keyCode === 39) {
        plugin.next();
    }
    // Go to previous image pressing the left key
    if (e.keyCode === 37) {
        plugin.previous();
    }
}

and need to add:
$(document).on('keydown', plugin.keyDownEvent);

and to remove only this function:
$(document).unbind('keydown', plugin.keyDownEvent);

The css file has an additional "}" that shouldn't be there at the end of the file.

.lightbox__nav--prev {
left: 10px;
background-image: url('previous.png');
}
} <-

I would like to know can it be used to display inline HTML elements?

Cheers.

Is there a list somewhere? Does the lightbox work with older versons of IE?

Thanks!