Simply open <a href=...> linked page in a modal

[raveren]

I want a regular page to load as ajax inside of a modal window.

Judging from the documentation I expected it to be as "complicated" as

    Fancybox.bind('.js-fancybox', {
        type: 'ajax',
    });

but if I add the js-fancybox class to any link it opens Fancybox with simply "Image Not Found":

What do?

[raveren]

I used to achieve this in good ol' colorbox via $('.js-colorbox).colorbox(), then I used fancybox v3 like this:

  $('a.js-fancybox').fancybox({
    type: 'ajax',
    src: $(this).prop('href'),
  });

Which doesn't work with v5 since I don't have the element at hand to fetch href from :/

[fancyapps]

Use defaultType option to set default type for each item in the gallery or use data attributes to specify content type for each trigger element - https://fancyapps.com/fancybox/plugins/html/#ajax

This separation makes it clear what type each item has and also allows to change it individually.
For example, this is how to use it when opening Fancybox manually:

Fancybox.show(
  // Gallery items
  [
    // Gallery item
    { 
      src : "index.html", 
      // type: "ajax" 
    }
  ], {
    // Gallery options
    defaultType : "ajax"
  });

And in your case, it would be like this:

Fancybox.bind(
  // Gallery items from this selector
  '.js-fancybox', 
  // Gallery options
  {
    defaultType : 'ajax',
  });

[raveren]

Thanks for the response, but there's no gallery. I just want to use the plugin to display HTML fetched from linked pages - in a modal.

It used to work great, I know I used this amazing plugin @ v2 and v3 in various projects, is it broken now?

I can't find a way to make it work, after more inspection I can see the example in OP is not even loading the url at all.

Using the example from the docs

Fancybox.bind("[data-fancybox]", {
  // Your custom options
});

with

<a data-fancybox data-type="ajax" href="...">...

I can see in inspector the url is loading fine, but the Fancybox is just showing the loading animation, it's the same with your suggested

Fancybox.bind(
  // Gallery items from this selector
  '.js-fancybox', 
  // Gallery options
  {
    defaultType : 'ajax',
  });

The spinner just keeps spinning and nothing happens, do you have any ideas?

[raveren]

It works perfectly with

    Fancybox.bind('.fancybox-popup', {
        type: 'iframe',
        width: '800',
        height: '500',
    });

and is highly readable code, but this is a legacy approach, I'd like to not use iframes going forward

[raveren]

BTW: I still very much preferred the jquery syntax, plus it's now very awkward to limit invocation to jquery element subsets.

Example real-world initialize code, used to fire up loaded modal content:

const bootstrap = function(parent) {
  const base = $(parent || document);

  base.find('a.js-fancybox').fancybox({
    type: 'ajax',
    src: $(this).prop('href'),
    afterShow: function(instance, current) {
      bootstrap(current.$slide);
    },
  });

 // more plugins initialized below....
};

[fancyapps]

Look, it works perfectly fine. I can not help you any further without seeing your live page/demo.

[raveren]

Ok it doesn't work now for the type: iframe either anymore, I don't know why it did on first testing, but I am reverting my migration to the new Fancybox, will keep using the v2.7 that's still working, and will find a better replacement someday.

But really, you pulled defaultType out of thin air, I cannot even find that in the docs. Not to mention how confusing it is as a parameter.

[fancyapps]

I think you find it confusing because you are used to the old syntax. If you only used the latest version, the old version would be very confusing for you, for example, you can't tell if an option will affect all items or just one, or how to affect just one. The new syntax makes it very clear.

I cannot even find that in the docs

It is right here - https://fancyapps.com/fancybox/api/options/#defaulttype

[raveren]

No, I don't find the syntax confusing, I find the defaultType confusing.

type does nothing, even though it's used in the doc examples, and the defaultType which is only listed in the api dump makes any change.

Anyway the plugin did not work for me at all, so I have already moved on, good luck to you!