Using 3rd party plug-ins

Plone Support Theming
1

I'm having a little difficulty getting a 3rd party JS plugin working for a custom view of mine. I want to use the lightGallery library but I can't seem to get the resource to function correctly..? I tried adding it as a static resource to the view template itself but it causes a 'lightGallery()' is not defined error in the console. Adding it as a resource to my registry.xml allows me to implement the libs into the Plone header, however I still get the undefined error. Furthermore, I get the following error, though I'm not sure how to resolve this. If I add lightgallery to my RequireJS statement it just causes an error when compiling saying it can't find lightgallery.js, even though the lib itself is saved as lightgallery.min.js..?

This is all very confusing, I just want to use the darn plugin - is there a hassle free way of doing this without getting a bible of errors..?

Any help appreciated, thanks!

This is my resource registry:

<?xml version="1.0"?>
<registry>

  <records interface="Products.CMFPlone.interfaces.IResourceRegistry" prefix="plone.resources/someapp">
    <value key="js">++theme++someapp.website/js/someapp.js</value>
    <value key="css">
      <element>++theme++someapp.website/less/someapp.less</element>
    </value>
    <value key="deps">jquery</value>
  </records>

  <records interface="Products.CMFPlone.interfaces.IResourceRegistry" prefix="plone.resources/lightgallery">
    <value key="js">++theme++someapp.website/js/lightgallery.js</value>
    <value key="css">
      <element>++theme++someapp.website/less/lightgallery.css</element>
    </value>
    <value key="deps">jquery</value>
  </records>

  <records interface="Products.CMFPlone.interfaces.IResourceRegistry" prefix="plone.resources/fullscreen">
    <value key="js">++theme++someapp.website/js/fullscreen.js</value>
    <value key="deps">jquery</value>
  </records>

  <records interface="Products.CMFPlone.interfaces.IResourceRegistry" prefix="plone.resources/thumbnail">
    <value key="js">++theme++someapp.website/js/thumbnail.js</value>
    <value key="deps">jquery</value>
  </records>

  <records interface="Products.CMFPlone.interfaces.IBundleRegistry" prefix="plone.bundles/someapp">
    <value key="resources">
      <element>someapp</element>
    </value>
    <value key="jscompilation">++theme++someapp.website/js/someapp-compiled.js</value>
    <value key="csscompilation">++theme++someapp.website/less/someapp-compiled.css</value>
    <value key="enabled">True</value>
    <value key="compile">True</value>
    <value key="depends">lightgallery</value>
  </records>

  <records interface="someapp.website.settings.settings.ISettings" prefix="someapp.website" />

</registry>

My custom JS file for compiling:

(function($) {
  'use strict';

  $(document).ready(function() {
    $('#lightgallery').lightGallery();
  });

})(jQuery);
2

I made an add on : https://github.com/espenmn/medialog.magneticpopup

( scroll to bottom: Pop up images in Plone 5? and read )

and

might help

PS: Notice that require([ does NOT include .js (jquery.magnetic-popup-min, not query.magnetic-popup.min.js )

1 Like
3

Thanks buddy that's exactly what I needed!