Owl Carousel images open with lightbox

Hi Paul,

You could edit the function owl_function in the owlcarousel.php file:
Replace

if ($lazyLoad){
  $result .= '<img class="lazyOwl" title="' . get_the_title() . '" data-src="' . $img_src[0] . '" alt="' . get_the_title() . '"/>';
} else {
  $result .= '<img title="' . get_the_title() . '" src="' . $img_src[0] . '" alt="' . get_the_title() . '"/>';
}

With

if ($lazyLoad){
  $result .= '<img class="lazyOwl et_pb_lightbox_image" title="' . get_the_title() . '" data-src="' . $img_src[0] . '" alt="' . get_the_title() . '"/>';
} else {
  $result .= '<img class="et_pb_lightbox_image" title="' . get_the_title() . '" src="' . $img_src[0] . '" alt="' . get_the_title() . '"/>';
}

Let me know if it works.

Hi Pierre, sadly it doesn’t work. The lightbox overlay appears, but it says image could not be loaded. Just had another look and the et_pb_lightbox_image class seems to be on the link rather than the image. is there any way of getting the class onto the image link?

<a href="https://bradpolepreschool.org.uk/wp-content/uploads/2014/09/Bradpole_Preschool-illustrations.png" class="et_pb_lightbox_image" title=""><img src="https://bradpolepreschool.org.uk/wp-content/uploads/2014/09/Bradpole_Preschool-illustrations.png" alt="" class="et-waypoint et_pb_image et_pb_animation_off et_pb_image_sticky et-animated"></a>

The you can try to edit this line just above:

if(!empty($meta_link)) {
  $result .= '<a href="'. $meta_link .'">';
}

and insert the desired CSS classes.

Pierre you’re a star!! It works perfectly!
Thanks very much for your time.
Cheers,
Paul