Disable PrettyPhoto in code

Question

How can I disable PrettyPhoto after it has been enabled?

$(document).ready(function () {
    $("a[rel^='prettyPhoto']").prettyPhoto();
}

$("#disablePrettyphoto").click(function (e) {
    $("a[rel^='prettyPhoto']").KILLPRETTYPHOTO();
});

On a page with images, where I use Prettyphoto, I need to do some drag and drop action on the same images. Doing this with prettyPhoto enabled is not nice, as it fires the popups when I am dragging and dropping (as it should). So when I enable drag and drop, I want to disable PrettyPhoto and enable it again when I disable drag and drop.

Answer 1

I've had this problem with prettyPhoto as well. I've actually started using the api to have more control over the plugin.

You can, however, use unbind() to remove all click handlers, then do your drag/drop stuff, then add prettyPhoto again. Take a look at this question (Best way to remove an event handler in jQuery?), this should help.

Answer 2

To disable prettyPhoto, unbind the click attribute:

    $("a[rel^='prettyPhoto']").unbind('click');

After that, reinitializing prettyPhoto works well for me.

If you don't want to reenable it later, you can destroy it completely by removing rel attribute:

    $("a[rel^='prettyPhoto']").attr('rel', '');

(based on this answer)