This change provides compatibility with jQuery 3 by changing the way Swipebox works with dynamic content. Swipebox is no longer dynamic by default as the "selector" jQuery property that it previously relied on has been removed in jQuery 3.

To make Swipebox work with dynamic content it must instead be initialised by passing the selector as an option, similar to Bootstrap's popovers/tooltips. Only do this for dynamic content.

$(document).swipebox({ selector: '.swipebox' });

For non-dynamic uses, simply apply this PR and you're done. You do not need the selector option. Dynamic content refers to galleries where images may be added or removed on the fly.

Fixes #295.

When on mobile, if you open a lightbox and you try to close it by going for the X at the bottom left the bottom bar of the safari browser will appear and thus cover the X to close the lightbox.

When viewing a swipebox gallery on Mobile Safari iOS7 and the user clicks the close button the browser's native navigation overlays the swipebox bar and swipebox cannot be closed without refreshing the page

I've integrated Swipebox into my blog for some time now. Recently, I've switched to a Windows Phone (Lumia 1020). Running the latest firmware, I've noticed that while the Swipebox opens normally on click, the viewport remains scrollable. This happens both on the demo site and on my blog. Furthermore, the buttons are clickable, but don't actually do anything. To close the Swipebox, I've got to reload the page.

The weird thing is, earlier today I tried the demo site and it seemed to work fine - except that you could still scroll the page in the background (1 px was visible underneath the black). I thought that maybe the problem had been fixed by the recent changes, but after I upgraded my Swipebox codebase to master, nothing changed. I tried the demo site again and this time it handled exactly the same as my blog, i.e. I can scroll away from the Swipebox (black background) and the buttons don't really work. Oh, and touch gestures don't work, either.

First of all beautiful plugin!

I was wondering if it's possible to add thumbnail grouping (either by "rel" or "data-swipeboxgroup"). This is so that if there are several groups of thumbnails on a page then opening one will only create a swipebox for the images in its group, rather than all the images on the page.

I'm using webpack to bundle all my css / js files. I have installed swipebox with npm install swipebox and initialised it like so:

import 'swipebox/src/css/swipebox.css';
import swipebox from 'swipebox';
$( '.swipebox' ).swipebox();

Now whenever i click anywhere on the screen the swipebox modal appears but nothing is in it. So basically i get a black screen with a closing button (which doesn't work).

I don't have any errors in my console or terminal (from compiling with webpack). What am i doing wrong?

I love swipebox, it does exactly what I want it to do, except in testing on iPhone the close button is being covered by the iPhone bottom menu. Since you can't scroll vertically in swipe box it is difficult to remove the menu. I tried to play with the css, but I can't get it to not cover it up. If I switch from portrait to landscape a couple of times the close button appears above the menu, but initially it does not. Does anyone have any idea on how to trouble shoot this?

Hi,

Is it very difficult to include support for viewing mp4 and other video formats in swipebox? I know I can use youtube/vimeo urls but my client wants to host videos in his own server for legal reasons. Could you please add this capability?

Very good plugin, works perfectly!

I wonder if he supports putting the count of photos in the gallery, for example: Photo 1 of 367

Is that possible?

Thank you!

i try to combine swipebox with isotope on one page. now when i filter my photos on the page with isotope i'm able to remove the swipebox class from my links. and add them if i choose to show another selection. but swipebox keeps it's original set of pictures, meaning i allways see all the pictures in swipebox and not just the ones that are filterd now.

does anybody have a clue how to fix this?

The attribute for title and caption are now configurable via the option array. A caption is usful to give an additional image description or provide proper attribution. This includes the XSS fix from #268

The fix made for jQuery 3.x was this to forcefully add a swipebox class to the calling element, and then to have the selector variable use that class. While this works fine in some cases, in other cases it causes quite a lot of problems.

In my use case, there are multiple types of galleries on the same page, each with different settings. When you are setting the selector to be universally .swipebox, the binding is getting messy, and the settings of one gallery tend to overlap with another. E.g. I have different functions for the beforeOpen and afterOpen events based on the selectors, but the one defined last is overriding all the others. This is problematic, since it tends to result in errors if certain conditions that would be met for one selector don't apply to the others.

I believe you might want to consider an alternative to hardcoding the selector to .swipebox. The implementation here lets you define a setting called selector, and then use that setting: https://github.com/mho79/swipebox/blob/master/src/js/jquery.swipebox.js.

I would propose a hybrid - you can add the option for the selector, then, in your plugin.init function, use the option if not null. If null, then use the default .swipebox that you added to all elements. This way, users will not have to change their code, and you will be able to fix the bug too.

This is a follow up of the previously raised PR. That one was agreed to be merged, but had merge conflicts and seems like the author of the PR has stopped maintaining it.

The original description was: "The attribute for title and caption are now configurable via the option array. A caption is usful to give an additional image description or provide proper attribution. This includes the XSS fix from https://github.com/brutaldesign/swipebox/pull/268"

I like the idea of having an ability to add an optional comment to the photo, as for example in my gallery I'm storing comments in JPEG's tags. They can be multi-line and are not necessarily suitable for the main title. In the original version, the title doesn't support multiple lines allowing the text to overflow.

JS is not my specialty, I just replicated the original changes, so happy to incorporate corrections/suggestions if any

Hello developers,

I try to add click event on the close button over the swipebox-overy but I can't fix anybody help how to add my custom event on there

My code is: jQuery(document).on('click', '#swipebox-close' , function() { jQuery(body).css('color', 'red'); });

I just updated from 1.3.0.2 to 1.5.1 to eliminate the black screen on click issue with the newest Wordpress update. I am currently troubleshooting a variety of jQuery depreciations, using the jQuery Migrate plugin for tracking.

Currently, it appears that the site is now functioning correctly, but I am concerned about future issues based on the logging of the depreciated array syntax logged above.