Jump to content

lightbox for frond-end images in the body


webhoes
 Share

Recommended Posts

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

Link to comment
Share on other sites

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();
    }
}

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...