• Resolved mklandwp

    (@mklandwp)


    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 2 years, 2 months ago by mklandwp.
    • This topic was modified 2 years, 2 months ago by mklandwp.
Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘some suggestions(withoutmedia-file link,img.src without extension)’ is closed to new replies.