Link to fancybox popup possible?

Backlight Customization
#1

Hi all,
there are several fancybox popups on my home page with links to videos and/or embedded audio files.
I searched the web but cant find a solution for linking from external sites, like twitter or Instagram, directly to the popup-content.
Please feel free to have a look to: https://radioradius.com

Thanks in advance,
Oliver

#2

your link doesn’t work
But I think you can put any html inside the pop-up box. You may need to get something from those other sites to put in there. You tube has its share links, for example. Twitter and Instagram may have theirs. Or check their documentation to see if they have an api.
I know there are WordPress plug-ins that grab content from Instagram and the like so I imagine there’s an api available.

#3

Instagram has an API, but they’ve really clamped down on access as compared to what it used to be. To the point that a lot of the apps and plugins built around the legacy API simply have no path forward. Check the documentation if you’re curious, but I think the authentication and developer requirements are too much to be bothered with. The entire API seems to be geared toward app developers, and not so much for people wanting to embed content into a website.

Fancybox supports video, so you can read their docs to see how to launch video content. Backlight has Fancybox built-in, and you can use it pretty easily any place you like.

See Custom Modals.

#4

sorry Rod, its https://radiusradio.com :wink:

#5

please excuse the misunderstanding. i want to open a fancybox popup with a <a href ...>link<a>. I tried it with anchor links #… but it did not work. Inside the web page it works fine, but I can’t find a way to create a link that opens the popup from a sent email for example.

#6

Ah. The galleries do that, so it’s possible. I can’t recall whether I had to implement that myself, or whether it came along with Fancybox (I don’t think I had to build it).

Maybe it’s only a thing with galleries, though. I suppose you could use JavaScript to parse the URL, match the hash against elements with data-fancybox, and then manually open the corresponding popup. You any good with JS?

#7

No, Matt, not good with JS :frowning:

#8

You might visit radiusradio.com
if you click on one of those quarter circels a fancybox popup opens with html content in it.
I want people to click on a link outside radiusradio e.g. in a post on facebook, twitter etc. which opens the content filled fancybox popup on the radiusradio homepage :wink:
is there a way to realize that or should I think about other solutions

#9

This should work in modern browsers. Use PHPlugins to add this to your scripts hook location.

$(document).ready(function() {
  const fbOpeners = Array.from(document.querySelectorAll('[data-fancybox]'))
  const fbTarget = fbOpeners.find((item) => {
    const target = item.getAttribute('data-src') || item.getAttribute('href')
    return window.location.hash === target
  })

  if (fbTarget) {
    $.fancybox.open({
      src: fbTarget.getAttribute('data-src') || fbTarget.getAttribute('href'),
    })
  }
})
#10

I should mention, not sure how nicely this will play with pages that already support the opening of Fancybox from a URL with hash, for example on pangolin-album pages. So maybe limit your PHPlugin function such that this will only work on non-album pages …?

#11

Wow :open_mouth: thank you so much, I will try around with it. Tomorrow. And will get back then.

Best regards,
Oliver

#12

Matt, thank you! Works like a charm! You are the greatest!!! :open_mouth: How can I get you a beer? :slight_smile:

#13

Haha. Buy an add-on, we both get something. :wink:

Seriously, though, not necessary. But if you’re ever in San Francisco (or wherever I am after SF), and if bars are ever open again, I’ll happily take you up on it.

#14

OK and if you are ever in Barcelona, let me know :slight_smile:

1 Like