There's a way to zoom the primary image. But what about the rest of the images included in the article? Is there a way to apply zoom feature to them (I'm using delta theme).

@morfik
If image is only inserted into body of article, probably library will not get that one.

So how should the image be inserted into the blog article?

@morfik
Sorry question is not clear. Content of article is not touched by lightgallery library as it does not have epxected class.

Basically, I want to add some photos to the blog article and I want to zoom the photos in the way the listing's images are zoomed.

@morfik
It's not working. It probably require "data-src" attribute to be able to use in in gallery. (tested)

I've managed to partially make it work. Partially, because apparently not all gallery features can be implemented in blog -- it works best with only one image. Basically, the gallery relies on several images (thumbnail for instance). When you upload the image via the blog post form, it creates only one image, i.e the full sized image. To make this image be zoomable, you just wrap it in some div and also you add the data-src="" attribute, for instance:

<div class="blg-content-img center">
  <img src="https://some-domain.tldl/oc-content/plugins/blog/img/tinymce/picture.jpg" alt="some-name" width="500" height="387" data-src="https://some-domain.tldl/oc-content/plugins/blog/img/tinymce/picture.jpg" />
</div>
But this is not all what you have to do to make it work. You also have to edit this file: osclass/oc-content/plugins/blog/js/user.js . Find the following code:

  if(typeof $.fn.lightGallery !== 'undefined') {
    $('.blg-primary-img').lightGallery({
      mode: 'lg-fade',
      thumbnail:true,
      cssEasing : 'cubic-bezier(0.25, 0, 0.25, 1)',
      download: false,
      share: false
    });
  }
and add another block with your div you used earlier:

  if(typeof $.fn.lightGallery !== 'undefined') {
    $('.blg-content-img').lightGallery({
      mode: 'lg-fade',
      thumbnail:true,
      cssEasing : 'cubic-bezier(0.25, 0, 0.25, 1)',
      download: false,
      share: false
    });
  }
Basically you always have to wrap each blog image in separate <div class="blg-content-img"> because if you had 2 or more image inside this div, the gallery will show you missing icons where thumbnails should be, which spoils the gallery effect.

I have one question though, can the two JavaScript blocks be combined into one somehow?

Those 2 codes looks identical.

Those 2 codes looks identical.

My mistake, I just copied wrong code. I updated the post. The difference between the two blocks is only in this part:

    $('.blg-primary-img').lightGallery({
    $('.blg-content-img').lightGallery({

Code: [Select]

$('.blg-primary-img, .blg-content-img').lightGallery({

Yes, that do the job, thank you!