Best practice to turn off lightbox?

For my website, I basically use featured images and portfolio images. When hovering over these images, a kind of ‘zoom icon’ appears and clicking on that makes a lightbox appear. Now I want to turn off this lightbox function. What is the best way to achieve that?

I’ve read about several solutions like:

(1) Editing avia.js and replacing

 
//activates the prettyphoto lightbox
        $(container).avia_activate_lightbox({callback:'avia_lightbox_callback'});
 

with

 
//activates the prettyphoto lightbox
        //$(container).avia_activate_lightbox({callback:'avia_lightbox_callback'});
 

(2) Editing style.css and add:

 
#top.single-post .big-preview.single-big a,
#top.single-post .small-preview {
pointer-events: none;
cursor: default;
} 
 

(3) Go to theme options and turn off Lighbox Modal Window

Regarding (1): I didn’t try this yet.
Regarding (2): I’ve tried this. The lightbox function disappears on a single blog post page, but is still there on the blog list page. (post formats: image)
Regarding (3): I’ve tried this. The lightbox function disappears on a single blog post page, but it links to the image file which still is not what I want.

I’m getting a bit confused… Basically I don’t want to use any lightbox of link for images on my website. What is the cleanest way to achieve this?

UPDATE
=======

Based on (2) Edited css and added this, which seems to work, but I’m not sure if it’s very nice/clean:

 
.big-preview.single-big a,
.small-preview {
pointer-events: none;
cursor: default;
} 
 

• This topic was modified 9 years, 11 months ago by Marc Bijl. Reason: Added and update with latest test results