*

morfik

  • ****
  • 169 posts
Zoom for blog images (delta theme)
« on: March 05, 2023, 09:39:23 PM »
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).

*

MB Themes

Re: Zoom for blog images (delta theme)
« Reply #1 on: March 07, 2023, 12:57:58 PM »
@morfik
If image is only inserted into body of article, probably library will not get that one.
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

morfik

  • ****
  • 169 posts
Re: Zoom for blog images (delta theme)
« Reply #2 on: March 07, 2023, 01:19:17 PM »
So how should the image be inserted into the blog article?

*

MB Themes

Re: Zoom for blog images (delta theme)
« Reply #3 on: March 07, 2023, 01:22:44 PM »
@morfik
Sorry question is not clear. Content of article is not touched by lightgallery library as it does not have epxected class.
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

morfik

  • ****
  • 169 posts
Re: Zoom for blog images (delta theme)
« Reply #4 on: March 07, 2023, 01:34:50 PM »
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.

*

MB Themes

Re: Zoom for blog images (delta theme)
« Reply #5 on: March 08, 2023, 12:54:38 PM »
@morfik
It's not working. It probably require "data-src" attribute to be able to use in in gallery. (tested)
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

morfik

  • ****
  • 169 posts
Re: Zoom for blog images (delta theme)
« Reply #6 on: March 08, 2023, 03:38:39 PM »
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:

Code: [Select]
<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:

Code: [Select]
  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:

Code: [Select]
  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?
« Last Edit: March 09, 2023, 03:49:08 PM by morfik »

*

MB Themes

Re: Zoom for blog images (delta theme)
« Reply #7 on: March 09, 2023, 03:47:07 PM »
Those 2 codes looks identical.
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

morfik

  • ****
  • 169 posts
Re: Zoom for blog images (delta theme)
« Reply #8 on: March 09, 2023, 03:50:20 PM »
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:

Code: [Select]
    $('.blg-primary-img').lightGallery({
    $('.blg-content-img').lightGallery({

*

MB Themes

Re: Zoom for blog images (delta theme)
« Reply #9 on: March 09, 2023, 03:58:07 PM »
Code: [Select]
$('.blg-primary-img, .blg-content-img').lightGallery({
  To get fast support, we need following details: Detail description, URL to reproduce problem, Screenshots

*

morfik

  • ****
  • 169 posts
Re: Zoom for blog images (delta theme)
« Reply #10 on: March 09, 2023, 04:02:35 PM »
Code: [Select]
$('.blg-primary-img, .blg-content-img').lightGallery({

Yes, that do the job, thank you!