Uncaught Error: Syntax error, unrecognized expression. PJAX

[craigphiz]

I'm using magnific in the html like this:

<a class="img-thumbnail lightbox" href="assets/img/45-lrg.jpg" data-plugin-options="{&quot;type&quot;:&quot;image&quot;}"> <img class="img-responsive" src="assets/img/45-lrg.jpg" alt=""> <span class="zoom"> <i class="fa fa-search"></i> </span> </a>

It's working great apart from when the html is partially loaded using jquery.pjax. In this case, when the image is clicked a console error

Uncaught Error: Syntax error, unrecognized expression: assets/img/45-lrg.jpg

is thrown.

Is anyone else seeing this? Have a workaround/fix? Any help gratefully received!

[greaveselliott]

Trying to load in a vimeo video and getting the exact same error.

[craigphiz]

Found a solution by adding this:

$(document).on('ready pjax:end pjax:popstate', function(e) {

    // Lightbox
    (function($) {

        'use strict';

        if ($.isFunction($.fn['themePluginLightbox'])) {

            $(function() {
                $('[data-plugin-lightbox]:not(.manual), .lightbox:not(.manual)').each(function() {
                    var $this = $(this),
                        opts;

                    var pluginOptions = $this.data('plugin-options');
                    if (pluginOptions)
                        opts = pluginOptions;

                    $this.themePluginLightbox(opts);
                });
            });

        }

    }).apply(this, [jQuery]);

});

Hope this helps you too :)