Wordpress WPBakery disable prettyPhoto and use Responsive Lightbox & Gallery

Question

I have this wordpress site and its using WPBakery, what I am trying to do is disable PrettyPhoto and enable Lightbox using Responsive Lightbox & Gallery.

I was able to disable PrettyPhoto by adding the following code to my functions.php file:

function remove_vc_prettyphoto(){
  wp_dequeue_script( 'prettyphoto' );
  wp_deregister_script( 'prettyphoto' );
  wp_dequeue_style( 'prettyphoto' );
  wp_deregister_style( 'prettyphoto' );
}
add_action( 'wp_enqueue_scripts', 'remove_vc_prettyphoto', 9999 );

Then I installed the plugin Responsive Lightbox & Gallery and changed the selector to prettyPhoto, but it does not work, when I click on an image, it just opens the image in the same window. I have done some digging and I think the reason could be because my links are using data-rel and not rel, my question is, is this the reason its not working and / or how do I fix it?

<a href="http://example.com/wp-content/uploads/2018/10/Making-Her-Mrs-Toronto-Wedding-Planners-5-731x1024.jpg" title="Romantic Blush-Toned Weddings" data-rel="prettyPhoto[rel--1933041382]" data-vc-gitem-zone="prettyphotoLink" class="vc_gitem-link prettyphoto vc-zone-link vc-prettyphoto-link"></a>

UPDATE

I am able to change data-rel to rel or prettyPhoto[rel--1933041382] to just lightbox, but its not working on the particular page:

http://makinghermrs.com/lookbook/

But on this page with just one photo it works:

http://makinghermrs.com/3748-2/

UPDATE

Okay, I got it working, but the lightbox is not working properly on mobile and is buggy on desktop what am I doing wrong?

http://makinghermrs.com/lookbook/

Sforza

Did you try install responsive lightbox plugin and activate it through the ‘Plugins’ menu ? – Shamanism

Yes I did install it via the plugin menu – Sforza

Did you add the class attribute “lightbox” to enable the lightbox. – Shamanism

Answer 1

1. Go to Responsive Lightbox settings and enable "Force Lightbox" option.
2. Type "prettyPhoto" in the "Selector" field as in the picture

Shamanism

I will try that when I get home in a few minutes, the selector is prettyPhoto 100% – Sforza

There is an option called Try to force lightbox for custom WP gallery replacements, like Jetpack or Visual Composer galleries. it was unchecked – Sforza

yes check it, save settings if you use cache clear it. – Shamanism

I just tried that and even cleared my cache, still did not work....super weird behavour , when i goto makinghermrs.com/lookbook click on the image, it still opens a window in a new page, but then when i go back, the lightbox is there. – Sforza

Okay, I got it working, but the lightbox is not working properly on mobile and is buggy on desktop what am I doing wrong? – Sforza

I am not able to see image in the mentioned page. makinghermrs.com/lookbook – Tumult

Answer 2

You just forgot to load the ScrollTo Plugin.After apply above solution enqueue this script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.0/plugins/ScrollToPlugin.min.js"></script>

Foxhole