some suggestions(withoutmedia-file link,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 has no parent node

When the number of files is small, it can be added manually,
but when there are too many files and to many , 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
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 == <img>.src, It means a 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.

• This topic was modified 3 years, 1 month ago by mklandwp.
• This topic was modified 3 years, 1 month ago by mklandwp.