If Lightbox is enabled images are shown twice

Could you, please, give a link for analyze the problem?

Hi adz1111,

A link to your website would be very helpful. If you would prefer, you can send it through e-mail at [email protected]

Best regards,

Etoile Web Design

sorry for late reply – link below

it’s a test site – but catalogue is on the Services tab (for now).

https://www.yourscope.co.uk/wordpress/services/

If I understood correctly from the debugger, you have a plugin on your site “Lightbox Plus Colorbox v2.7.2/1.5.9”. With a scripts of upcp plugin you have 2 different lightboxes on your site. You can try to turn off or cut off Lightbox Plus from your site.

Also you can use custom CSS:

#colorbox, #cboxOverlay {display:none;}

Check your Footer.php
Here is a code of Lightbox Plus

<script type="text/javascript">

if(typeof jQuery == 'undefined' || typeof jQuery.fn.on == 'undefined') {
	document.write('<script src="https://www.yourscope.co.uk/wordpress/wp-content/plugins/beaver-builder-lite-version/js/jquery.js"><\/script>');
	document.write('<script src="https://www.yourscope.co.uk/wordpress/wp-content/plugins/beaver-builder-lite-version/js/jquery.migrate.min.js"><\/script>');
}

</script><!-- Lightbox Plus Colorbox v2.7.2/1.5.9 - 2013.01.24 - Message: 0-->
<script type="text/javascript">
jQuery(document).ready(function($){
  $("a[rel*=lightbox]").colorbox({initialWidth:"30%",initialHeight:"30%",maxWidth:"90%",maxHeight:"90%",opacity:0.8});
});
</script>

Thanks TeslAndroid

So, I deactivated the LB plugin and it now works as expected – thank you so much for your help.

However a side question… Does that mean if I need LB elsewhere on the site that the upcp provided LB will work for that too (i.e. I can safely delete the separate LB plugin)?

Thanks again

If you want LB for special pages, you’ll need a “hook” to activate a script on that pages only
.
But firstly, you should know, how many pages will use that plugin (is this a static number of pages or dynamic). If there are several pages, it wouldn’t be so hard.

To do that, you need:
1) create a new .js file from your script (which I put in the last message) with a name, for example, “lightbox_plus.js”. Put this file in “template_directory”/js

2) In functions.php add the following (but read before placing):

/* Enqueue scripts (and related stylesheets) */
    add_action( 'wp_enqueue_scripts', 'my_lightbox_script' );

function my_lightbox_script() {
    wp_register_script('lightbox_plus', get_stylesheet_directory_uri() . '/js/lightbox_plus.js', false, null, true);

/* here you need to place a slug from url to set an "anchor". Or you can use an ID of a page */
if (is_page('page-slug-here')){
    wp_enqueue_script('lightbox_plus');
}}

I hope it’ll help.

Many Thanks

I’ll have a play (gulp)!

Appreciate you taking the time.