search

dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.38k stars 3.5k forks source link

Gallery like experience for images across the page and not in a gallery #1150

Closed kapooramit closed 4 years ago

kapooramit commented 4 years ago

I have images on my documentation page and they are scattered here and there between paragraphs of text. How can I make deliver gallery like experience in this case?

This is how a sample image HTML looks like:

<span class="confluence-embedded-file-wrapper conf-macro output-inline" data-hasbody="false" data-macro-name="sp-image">
<img class="confluence-embedded-image" src="/space2021/files/582418577/582418579/1/1563720219000/image1.png">
</span>

And my call looks like this and it shows only one image - the one clicked upon:

$('span.confluence-embedded-file-wrapper').magnificPopup({delegate: 'img' , type: 'image'});
kapooramit commented 4 years ago

Nobody here?

kapooramit commented 4 years ago

Knock knock....

kapooramit commented 4 years ago

What worked for me-> it came out to be selector choice that I had to change...and then I added zoom effect and animation...

$('.confluence-embedded-image').magnificPopup({
  removalDelay: 300, 
  mainClass: 'mfp-fade mfp-with-zoom',
  type: 'image',
  zoom: {
    enabled: true, 
    duration: 300, 
    easing: 'ease-in-out',
    opener: function(openerElement) {
      return openerElement.is('img') ? openerElement : openerElement.find('img');
    }
  },
  gallery:{
    enabled:true
  }
});