CODEWITHSUNDEEP
magnific-popup
Kaps
Kaps

Reputation: 23

The image could not be displayed using Magnific Popup

I have the following code and the image popup shows nothing. What am I doing wrong? $('span.confluence-embedded-file-wrapper').magnificPopup({type: 'image'});

And the HTML code:

<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>

Upvotes: 0

Views: 166

Answers (1)

Kaps
Kaps

Reputation: 23

It came out to doing three things.

  1. Missing href. For this I added the below:
<script>
  count = document.getElementsByTagName('img').length;
  href ='';
  n = 0;
  while (n < (count + 1)) {
    imgsrc = document.getElementsByTagName('img')[n].getAttribute('src');
    document.getElementsByTagName('img')[n].setAttribute('href', imgsrc); 
    n = n + 1;
    imgsrc ='';
  }
  </script>

  1. Instead of before or after the magnific call, I had to add it at the end of page after the body tag. It works now.

  2. Delegation :

Modified the call to

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

Is there a way to make it work work without inserting the href attribute? src attribute is already there which is what I am pushing to href.

Upvotes: 1

Related Questions