"Fancybox" Global jQuery plugin implementation with JSPM / System.js as module:

Question

I got 'Fancybox' working as a module, where I can import it import fancybox from 'fancybox'; inside the main app JS file. But what I cannot get to work are the 'helper' js files, which extend the functionality of the main fancybox function.

JSPM Package.json in the overrides section exports 'fancybox' function from the main 'source/jquery.fancybox.pack.js' file. Where then it should be extended by the helper files.

{
  "jspm": {
    "configFile": "config.js",
    "dependencies": {
      "fancybox": "bower:fancybox@^2.1.5",
    },
    "overrides": {
      "bower:[email protected]": {
        "main": "source/jquery.fancybox.pack.js",
        "format": "global",
        "files": [
          "source/jquery.fancybox.pack.js",
          "source/helpers/jquery.fancybox-buttons.js",
          "source/helpers/jquery.fancybox-media.js",
          "source/helpers/jquery.fancybox-thumbs.js"
        ],
        "shim": {
          "source/jquery.fancybox.pack.js": {
            "deps": [
              "jquery"
            ],
            "exports": "fancybox"
          },
          "source/helpers/jquery.fancybox-buttons.js": {
            "deps": [
              "jquery"
            ],
            "exports": "*"
          },
          "source/helpers/jquery.fancybox-media.js": {
            "deps": [
              "jquery"
            ],
            "exports": "*"
          },
          "source/helpers/jquery.fancybox-thumbs.js": {
            "deps": [
              "jquery"
            ],
            "exports": "*"
          }
        }
      }
    }
  }
}

Main app entery point main.js:

import jquery from 'jquery';
import fancybox from 'fancybox';

jquery(document).ready(function() {
    /*
     *  Simple image gallery. Uses default settings
     */
     if (typeof jquery('.fancybox').fancybox !== 'undefined') {
            // the variable is defined

             jquery('.fancybox').fancybox();

             /*
             *  Different effects
             */

             // Change title type, overlay closing speed
             jquery(".fancybox-effects-a").fancybox({
                 helpers: {
                     title : {
                         type : 'outside'
                     },
                     overlay : {
                         speedOut : 0
                     }
                 }
             });

// ..... & other helpers and configurations.

             /*
             *  Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
             */
             jquery('.fancybox-thumbs').fancybox({
                 prevEffect : 'none',
                 nextEffect : 'none',

                 closeBtn  : false,
                 arrows    : false,
                 nextClick : true,

                 helpers : {
                     thumbs : {
                         width  : 50,
                         height : 50
                     }
                 }
             });
 } });

I'm not sure how to combine the helpers with the main function. Thanks

• JSPM override generator: http://jarreddebeer.github.io/jspm-package-override-generator/public/
• Fancybox repo: https://github.com/fancyapps/fancyBox & Docs: http://fancyapps.com/fancybox/#docs
• JSPM registry documentation: https://github.com/jspm/registry/wiki/Configuring-Packages-for-jspm & http://jspm.io/0.17-beta-guide/overrides.html
• System.js globals format https://github.com/systemjs/systemjs/blob/master/docs/module-formats.md#globals

Answer 1

I've installed the latest beta version of JSPM 0.17 ... Then I followed the documentation for this version, with a lot of trial and error, finally this seems to fulfill my requirement. In the package specific file [email protected] that JSPM creates I've altered to the below code. And then JSPM install which caused it to be also saved in the package.json. After which it is possible to import the package to the page, i.e. import 'fancybox; without any exports.

    {
  "main": "source/helpers/jquery.fancybox-thumbs.js",
  "format": "global",
  "meta": {
    "source/jquery.fancybox.pack.js": {
      "deps": [
        "./helpers/jquery.fancybox-thumbs.css!",
        "./helpers/jquery.fancybox-buttons.css!",
        "./jquery.fancybox.css!"
      ],
      "format": "global",
      "globals": {
        "jQuery": "jquery"
      }
    },
    "source/helpers/jquery.fancybox-buttons.js": {
      "format": "global",
      "globals": {
        "jQuery": "jquery",
        "fancybox": "../jquery.fancybox.pack.js"
      }
    },
    "source/helpers/jquery.fancybox-media.js": {
      "format": "global",
      "globals": {
        "fancybox": "./jquery.fancybox-buttons.js"
      }
    },
    "source/helpers/jquery.fancybox-thumbs.js": {
      "format": "global",
      "globals": {
        "fancybox": "./jquery.fancybox-media.js"
      }
    }
  },
  "map": {}
}