lightbox for frond-end images in the body

[webhoes]

Hello,

Is there a module of way to have the images that are added in the body (field) to popup when clicked on?

I have made a fotogallery and implemented this as a function. But have no clue how to do this the other images.

Sanne

[szabesz]

Hi,

Here is an example with UIkit: 

somewhat similar module, but probably not exactly what you need, but might be good to learn from its code:

http://modules.processwire.com/modules/textformatter-image-interceptor/

So such a feature can be achieved with a Textformatter.

 

Edited May 15, 2017 by szabesz
typo

[tpr]

I'm usually use this which uses lightgallery.js (non-jQuery) and include my own script loader. Perhaps it's not what you're after but maybe you can get ideas. Make sure you run it after the DOM is ready (DOMContentLoaded, window.ready, jQuery document.ready, etc).

So when the document is ready this JS runs and if there's a matching selector. If yes, it builds up the lightbox. To use only links with custom class, use ".project-items a.my-class" and then "selector: a.my-class", for example (add classes inside CKEditor).

Also make sure the links are linking to the big version of your image (inside CKEditor). I also recommend to make such links open in a new tab.

Spoiler

var scriptsDir = '/site/templates/scripts/';

// use lightbox for all "a" elements inside "main .project-items"
loadAsset(scriptsDir + 'lightgallery.js/css/lightgallery.min.css?selector=".project-items"', function () {
  loadAsset(scriptsDir + 'lightgallery.js/js/lightgallery.min.js?async=true', function () {
      lightGallery(document.querySelector('main'), {
          selector: 'a',
          preload: true,
          controls: true,
          closable: true,
          download: false,
          counter: true
    	});
	});
  });

// loadAsset function
function loadAsset(path, callback, o) {

    var selector = getUrlParameter('selector', path).replace(/['"]+/g, '').trim(),
        async = getUrlParameter('async', path) === 'true',
        assetType = 'js',
        assetTag = 'script',
        assetSrc = 'src',
        needAsset = true;

    if (selector.length > 0 && !document.querySelector(selector)) return false;

    function getUrlParameter(name, url) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        url = url ? url : window.location.search;

        // var regex = new RegExp('[\\?&]' + name + '=([^&#]*)'),
        var regex = new RegExp('[\\?&]' + name + '=([^&]*)'),
            results = regex.exec(url);

        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

    path = path.split(/\?(.+)/)[0]; // remove url parameters (settings)

    if (path.slice(-3) === 'css') {
        assetType = 'css';
        assetTag = 'link';
        assetSrc = 'href';
    }

    if (document.querySelector(assetTag + '[' + assetSrc + '="' + path + '"]')) needAsset = false;

    function callCallback() {
        if (callback) {
            var obj = {};
            if (selector) obj.selector = selector;
            if (o) obj.o = o;
            callback.call(obj);
        }
    }

    if (needAsset) {

        var asset = document.createElement(assetTag);
        asset[assetSrc] = path;

        if (assetType === 'js') {
            asset.type = "text/javascript";
            asset.async = async;

            if (asset.readyState) { // IE
                asset.onreadystatechange = function () {
                    if (asset.readyState === "loaded" || asset.readyState === "complete") {
                        asset.onreadystatechange = null;
                        callCallback();
                    }
                };
            } else {    // others
                asset.onload = callCallback;
            }

        } else {    // CSS
            asset.rel = "stylesheet";
            callCallback();
        }
        document.getElementsByTagName("head")[0].appendChild(asset);

    } else {    // always run callback
        callCallback();
    }
}