0

I've created a dropdown menu that has different locations as options. When one of the links is clicked, the content from the respective post is loaded asynchronously via AJAX. I followed this tutorial to pull it off.

So I have a native Wordpress gallery set up in each of the location posts and I'm using a Colorbox plugin for a lightbox effect. when I go directly to the post, the lightbox works as intended. However, when the gallery is loaded on a separate page via AJAX, the photos appear but the lightbox does not work.

I think the problem might be in the AJAX call I'm using...

here's the JS:

(function($) {
    $(document).ready(function(){
    $.ajaxSetup({cache:false});
    $("#location").click(function(){
        $("div.dropdown").addClass("open");
    });
    $("a.loc-dd").click(function(){
        $("#location").html($(this).html());
        var post_id = $(this).attr("rel")
        $("#pricing-container").append("<div class='loader'></div>");
        $("#pricing-container").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/wp/pricing/",{id:post_id});
        return false;
    });
});
})(jQuery);
1
  • The gallery doesn't exist yet when the colorbox script binds itself to links. The fix will be specific to that colorbox plugin, you need to invoke the script on the gallery links after they load.
    – Milo
    Aug 30 '17 at 20:18
0

The problem is that the gallery doesn't exist when colorbox binds itself to the gallery links. I was able to fix this problem by using the ajaxComplete() event, like so:

$(document).ajaxComplete(function(){
    $('.gallery-icon a').colorbox();
});

Thanks @Milo for pointing me in the right direction.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.