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 experienceLike 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/569100012982530394c5In 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.
- The topic ‘some suggestions(withoutmedia-file link,img.src without extension)’ is closed to new replies.