some suggestions (without Tag.a media-file link,or img.src without extension)

I do really like this SimpLy plugin. Thanks so much for your great work on SimpLy.

In the next two cases, perhaps SimpLy plugin can have further performance.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

CASE 1) When Tag.img has no parent node Tag.a media file

When the number of files is small, it can be added manually,
but when there are too many old posted blog and too many Tag.img, it will be tiring.

I thought of some basic code that could automatically provide some improvements
EFFECT:

  before:<img ...> 
  ==>
  after:<a href='img.src'><img ...></a>

JS CODE START>>>>>>>>

/**
 * wrap Tag<Img> with Tag<a href=img.src> for LightBox
 * but exclude like <img data-LightBoxExclude=''> mark by 
 *     custom attribute data-LightBoxExclude
 * ------------------------------------------------------------------
 * @param {string} galleryAreaID gallery-area's ID
 * @return void
 */
function wrapTagImgWithA(galleryAreaID)
{
    // get gallery area object, in wordpress is (id='content') area
    var oGalleryArea = document.getElementById(galleryAreaID);

    // get array include <img>(without parentNode<a>)
    var oImgAry = [];
    if (oGalleryArea){
        var imgs = oGalleryArea.getElementsByTagName('img');
        for(var i=0; i < imgs.length; i++){
            // exclude <img data-LightBoxExclude=''>
            if (imgs[i].dataset.lightboxexclude !== undefined) continue; 

            if (!imgs[i].parentNode.href) oImgAry.push(imgs[i]);
        }
    }

    // wrap <a> to <img>'s parentNode, set a.href=img.src
    oImgAry.forEach(function(oImg){
        var oImgWithA = document.createElement('a');
        oImgWithA.href = oImg.src;
        oImg.parentNode.replaceChild(oImgWithA, oImg);
        oImgWithA.appendChild(oImg);
    });
}
window.addEventListener("DOMContentLoaded", wrapTagImgWithA('content'));

JS CODE END<<<<<<<

At the same time, it can be automatically added cursor style “zoom-in” for Tag.img
for friendly user experience

Like these basic code
EFFECT:

  before:<img ...> 
  ==>
  after:<img ... style="cursor:zoom-in"></a>

JS CODE START>>>>>>>>

/**
 * change cursor style to zoom-in in galleryArea's <img> 
 * but exclude like <img data-LightBoxExclude=''> mark by 
 *     custom attribute data-LightBoxExclude
 * ------------------------------------------------------------------
 * @param {string} galleryAreaID gallery-area's ID
 * @return void
 */
function chgTagImgCursorToZoomIn(galleryAreaID)
{
    // get gallery area object, in wordpress is (id='content') area
    var oGalleryArea = document.getElementById(galleryAreaID);

    // change cursor style to zoom-in
    var imgs = oGalleryArea.getElementsByTagName('img');
    for(var i=0; i < imgs.length; i++){
        // exclude <img data-LightBoxExclude=''>
        if (imgs[i].dataset.lightboxexclude !== undefined) continue; 

        imgs[i].style.cursor = 'zoom-in';
    }
}
window.addEventListener("DOMContentLoaded", chgTagImgCursorToZoomIn('content'));

JS CODE END<<<<<<<

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

CASE 2) When img src have not extension
Like:https://picsum.photos/1200/800
or https://p26.toutiaoimg.com/origin/569100012982530394c5

In this case, I thought of two ways to skip img extension check

 <i> when parentNode<a>.href == childNode<img>.src, It means a real image file 
 <ii> when <a> tag with custom attribute (data-type="image"), force mark a image link

I add some simulation code to pgc_sgb_lightbox.min.js for test

In about js code in pgc_sgb_lightbox.min.js

original code==>key: "GalleryItem",
original code==>value: function(e, t, i) {
original code==>...
original code==>} else l = (r = a).split("/").pop().split("#")[0].split("?")[0].split(".");

append simulation code START>>>>>> 
// when <a>.href==<img>.src OR <a> tag with custom attribute (data-type="image")
// means force Mark Img, add dummy extension 'image' to skip extension check
var isMarkImg = false;
if (a == o.src) isMarkImg = true;
else { 
    var tp = s.getAttribute("data-type"); 
    if (tp && tp == 'image') isMarkImg = true;
}
if (l.length == 1 && isMarkImg ) l.push("image");
append simulation code END<<<<<<<

original code==>if (l.length <= 1) return null;
...

just some simulation code(work for test)

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =
best wishes to SimpLy plugin, If the next version can have the above features added,
SimpLy plugin will be more popular ??

best sincerely regards.

from really fans