Fix blurry images after zoom in on mobile devices
This commit is contained in:
Eduardo Gomez
parent
c9dab14c87
commit
200321c914
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(n,e,t){"use strict";t.r(e),t.d(e,"isRTL",(function(){return r})),t.d(e,"isMobile",(function(){return o})),t.d(e,"isDarkMode",(function(){return c})),t.d(e,"formatDate",(function(){return a})),t.d(e,"getParameterByName",(function(){return i}));var r=function(){var n=document.querySelector("html");return["ar","he","fa"].includes(n.getAttribute("lang"))},o=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(n,")")).matches},c=function(){var n=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return n&&n.matches},a=function(n){return n?new Date(n).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},i=function(n,e){e||(e=window.location.href),n=n.replace(/[\[\]]/g,"\\$&");var t=new RegExp("[?&]".concat(n,"(=([^&#]*)|&|#|$)")).exec(e);return t?t[2]?decodeURIComponent(t[2].replace(/\+/g," ")):"":null}},15:function(n,e,t){t(1),n.exports=t(25)},25:function(n,e){}},[[15,0,1]]]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(e,n,t){"use strict";t.r(n),t.d(n,"isRTL",(function(){return o})),t.d(n,"isMobile",(function(){return a})),t.d(n,"isDarkMode",(function(){return r})),t.d(n,"formatDate",(function(){return i})),t.d(n,"getParameterByName",(function(){return c})),t.d(n,"makeImagesZoomable",(function(){return u}));var o=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},a=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(e,n){n||(n=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var t=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(n);return t?t[2]?decodeURIComponent(t[2].replace(/\+/g," ")):"":null},u=function(e,n){var t=n(".js-zoomable");t.on("open",(function(n){a()&&e(n.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var n=e(".medium-zoom-image--opened"),t=n[0].style.transform,o=t.substr(0,t.indexOf(" ")),a=parseFloat(o.substr(o.indexOf("(")+1).split(")")[0]),r=t.substr(t.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),c="scale(1) translate3d(0, ".concat(i<0?a*i+i:a*i-i,"px, 0)");n.addClass("medium-zoom-image-mobile"),n[0].style.transform=c}),10)})),t.on("close",(function(){a()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},15:function(e,n,t){t(1),e.exports=t(25)},25:function(e,n){}},[[15,0,1]]]);
|
||||
|
|
@ -1 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1:function(t,n,e){"use strict";e.r(n),e.d(n,"isRTL",(function(){return r})),e.d(n,"isMobile",(function(){return i})),e.d(n,"isDarkMode",(function(){return o})),e.d(n,"formatDate",(function(){return a})),e.d(n,"getParameterByName",(function(){return c}));var r=function(){var t=document.querySelector("html");return["ar","he","fa"].includes(t.getAttribute("lang"))},i=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(t,")")).matches},o=function(){var t=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return t&&t.matches},a=function(t){return t?new Date(t).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(t,n){n||(n=window.location.href),t=t.replace(/[\[\]]/g,"\\$&");var e=new RegExp("[?&]".concat(t,"(=([^&#]*)|&|#|$)")).exec(n);return e?e[2]?decodeURIComponent(e[2].replace(/\+/g," ")):"":null}},19:function(t,n,e){t.exports=e(20)},20:function(t,n,e){"use strict";e.r(n);var r=e(0),i=e.n(r),o=(e(6),e(2)),a=e(1);i()(document).ready((function(){var t=i()(".js-featured-articles");t.length>0&&(t.on("init",(function(){Object(o.a)(".js-featured-article-title",200)})),t.slick({arrows:!0,infinite:!0,prevArrow:'<button class="m-icon-button in-featured-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',nextArrow:'<button class="m-icon-button in-featured-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',mobileFirst:!0,rtl:Object(a.isRTL)()}),setTimeout((function(){t.slick("setPosition")}),350))}))}},[[19,0,1]]]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[4],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"makeImagesZoomable",(function(){return c}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},19:function(e,t,n){e.exports=n(20)},20:function(e,t,n){"use strict";n.r(t);var a=n(0),o=n.n(a),r=(n(6),n(2)),i=n(1);o()(document).ready((function(){var e=o()(".js-featured-articles");e.length>0&&(e.on("init",(function(){Object(r.a)(".js-featured-article-title",200)})),e.slick({arrows:!0,infinite:!0,prevArrow:'<button class="m-icon-button in-featured-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',nextArrow:'<button class="m-icon-button in-featured-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',mobileFirst:!0,rtl:Object(i.isRTL)()}),setTimeout((function(){e.slick("setPosition")}),350))}))}},[[19,0,1]]]);
|
||||
|
|
@ -1 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{23:function(t,e,a){t.exports=a(24)},24:function(t,e,a){"use strict";a.r(e);var s=a(0),n=a.n(s),o=a(3),i=a(4),r=a.n(i);n()(document).ready((function(){r()(".js-post-content"),function(){for(var t=document.querySelectorAll(".kg-gallery-image img"),e=0,a=t.length;e<a;e++){var s=t[e].closest(".kg-gallery-image"),n=t[e].attributes.width.value/t[e].attributes.height.value;s.style.flex="".concat(n," 1 0%")}}(),n()(".js-post-content").find("figure img").each((function(){n()(this).closest("figure").hasClass("kg-bookmark-card")||n()(this).addClass("js-zoomable");var t=n()(this).parent().find("figcaption");t?n()(this).attr("alt",t.text()):n()(this).attr("alt","")})),Object(o.a)(".js-zoomable")}))}},[[23,0,1]]]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[5],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return s})),n.d(t,"makeImagesZoomable",(function(){return c}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),s="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=s}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},23:function(e,t,n){e.exports=n(24)},24:function(e,t,n){"use strict";n.r(t);var a=n(0),o=n.n(a),r=n(4),i=n.n(r),s=n(3),c=n(1);o()(document).ready((function(){i()(".js-post-content"),function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}}(),o()(".js-post-content").find("figure img").each((function(){o()(this).closest("figure").hasClass("kg-bookmark-card")||o()(this).addClass("js-zoomable");var e=o()(this).parent().find("figcaption");e?o()(this).attr("alt",e.text()):o()(this).attr("alt","")})),Object(c.makeImagesZoomable)(o.a,s.a)}))}},[[23,0,1]]]);
|
||||
|
|
@ -1 +1 @@
|
|||
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{1:function(t,e,n){"use strict";n.r(e),n.d(e,"isRTL",(function(){return o})),n.d(e,"isMobile",(function(){return i})),n.d(e,"isDarkMode",(function(){return a})),n.d(e,"formatDate",(function(){return r})),n.d(e,"getParameterByName",(function(){return s}));var o=function(){var t=document.querySelector("html");return["ar","he","fa"].includes(t.getAttribute("lang"))},i=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(t,")")).matches},a=function(){var t=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return t&&t.matches},r=function(t){return t?new Date(t).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},s=function(t,e){e||(e=window.location.href),t=t.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(t,"(=([^&#]*)|&|#|$)")).exec(e);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null}},21:function(t,e,n){t.exports=n(22)},22:function(t,e,n){"use strict";n.r(e);var o=n(0),i=n.n(o),a=(n(6),n(14)),r=n(3),s=n(4),c=n.n(s),l=n(2),u=n(1),d=null,f=null,m=window.pageYOffset,w=0,h=0,p=0,g=!1;function b(){m=window.pageYOffset,y()}function v(t){Object(u.isMobile)("1023px")?(i()("body").addClass("share-menu-displayed"),setTimeout((function(){d.removeAttr("data-aos")}),t)):(Object(a.a)(".js-sticky",{stickyBitStickyOffset:100}),i()("body").removeClass("share-menu-displayed"))}function k(){x(),v(100),setTimeout((function(){O(),y()}),200)}function y(){g||requestAnimationFrame(j),g=!0}function j(){var t=h-w,e=Math.ceil(m/t*100);e<=100&&function(t){if(t<=100){var e=p-t/100*p;f[0].style.strokeDashoffset=e}}(e),g=!1}function x(){w=window.innerHeight,h=i()(document).height()}function O(){var t=f.parent().width(),e=t/2,n=Object(u.isMobile)()?2:3;f.parent().attr("viewBox","0 0 ".concat(t," ").concat(t)),f.attr("stroke-width",n),f.attr("r",e-(n-1)),f.attr("cx",e),f.attr("cy",e),p=2*e*Math.PI,f[0].style.strokeDasharray="".concat(p," ").concat(p),f[0].style.strokeDashoffset=p}function M(){f=i()(".js-progress"),x(),O(),j(),setTimeout((function(){f.parent().css("opacity",1)}),300)}i()(document).ready((function(){d=i()(".js-aos-wrapper");var t=i()(".js-scrolltop"),e=i()(".js-load-comments"),n=i()(".js-comments-iframe"),o=i()(".js-recommended-articles");c()(".js-post-content"),function(){for(var t=document.querySelectorAll(".kg-gallery-image img"),e=0,n=t.length;e<n;e++){var o=t[e].closest(".kg-gallery-image"),i=t[e].attributes.width.value/t[e].attributes.height.value;o.style.flex="".concat(i," 1 0%")}}(),v(1e3),o.length>0&&(o.on("init",(function(){M(),Object(l.a)(".js-article-card-title",100),Object(l.a)(".js-article-card-title-no-image",250)})),o.slick({arrows:!0,infinite:!0,prevArrow:'<button class="m-icon-button filled in-recommended-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',nextArrow:'<button class="m-icon-button filled in-recommended-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',mobileFirst:!0,responsive:[{breakpoint:720,settings:{slidesToShow:2}},{breakpoint:1023,settings:{arrows:!1,slidesToShow:3}}],rtl:Object(u.isRTL)()})),t.click((function(){i()("html, body").animate({scrollTop:0},500)})),e.click((function(){e.parent().hide(),n.fadeIn("slow")})),i()(".js-post-content").find("img").each((function(){i()(this).closest("figure").hasClass("kg-bookmark-card")||i()(this).addClass("js-zoomable");var t=i()(this).parent().find("figcaption");t?i()(this).attr("alt",t.text()):i()(this).attr("alt","")})),Object(r.a)(".js-zoomable"),window.addEventListener("scroll",b,{passive:!0}),window.addEventListener("resize",k,{passive:!0})})),i()(window).on("load",(function(){M()}))}},[[21,0,1]]]);
|
||||
(window.webpackJsonp=window.webpackJsonp||[]).push([[6],{1:function(t,e,n){"use strict";n.r(e),n.d(e,"isRTL",(function(){return a})),n.d(e,"isMobile",(function(){return o})),n.d(e,"isDarkMode",(function(){return i})),n.d(e,"formatDate",(function(){return s})),n.d(e,"getParameterByName",(function(){return r})),n.d(e,"makeImagesZoomable",(function(){return c}));var a=function(){var t=document.querySelector("html");return["ar","he","fa"].includes(t.getAttribute("lang"))},o=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(t,")")).matches},i=function(){var t=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return t&&t.matches},s=function(t){return t?new Date(t).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},r=function(t,e){e||(e=window.location.href),t=t.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(t,"(=([^&#]*)|&|#|$)")).exec(e);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},c=function(t,e){var n=e(".js-zoomable");n.on("open",(function(e){o()&&t(e.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var e=t(".medium-zoom-image--opened"),n=e[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),i=n.substr(n.indexOf(" ")+1),s=parseFloat(i.split(",")[1]),r="scale(1) translate3d(0, ".concat(s<0?o*s+s:o*s-s,"px, 0)");e.addClass("medium-zoom-image-mobile"),e[0].style.transform=r}),10)})),n.on("close",(function(){o()&&t(event.target).parent().hasClass("kg-gallery-image")&&t(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},21:function(t,e,n){t.exports=n(22)},22:function(t,e,n){"use strict";n.r(e);var a=n(0),o=n.n(a),i=(n(6),n(14)),s=n(3),r=n(4),c=n.n(r),l=n(2),u=n(1),d=null,m=null,f=window.pageYOffset,p=0,g=0,h=0,w=!1;function b(){f=window.pageYOffset,y()}function v(t){Object(u.isMobile)("1023px")?(o()("body").addClass("share-menu-displayed"),setTimeout((function(){d.removeAttr("data-aos")}),t)):(Object(i.a)(".js-sticky",{stickyBitStickyOffset:100}),o()("body").removeClass("share-menu-displayed"))}function k(){x(),v(100),setTimeout((function(){O(),y()}),200)}function y(){w||requestAnimationFrame(j),w=!0}function j(){var t=g-p,e=Math.ceil(f/t*100);e<=100&&function(t){if(t<=100){var e=h-t/100*h;m[0].style.strokeDashoffset=e}}(e),w=!1}function x(){p=window.innerHeight,g=o()(document).height()}function O(){var t=m.parent().width(),e=t/2,n=Object(u.isMobile)()?2:3;m.parent().attr("viewBox","0 0 ".concat(t," ").concat(t)),m.attr("stroke-width",n),m.attr("r",e-(n-1)),m.attr("cx",e),m.attr("cy",e),h=2*e*Math.PI,m[0].style.strokeDasharray="".concat(h," ").concat(h),m[0].style.strokeDashoffset=h}function C(){m=o()(".js-progress"),x(),O(),j(),setTimeout((function(){m.parent().css("opacity",1)}),300)}o()(document).ready((function(){d=o()(".js-aos-wrapper");var t=o()(".js-scrolltop"),e=o()(".js-load-comments"),n=o()(".js-comments-iframe"),a=o()(".js-recommended-articles");c()(".js-post-content"),function(){for(var t=document.querySelectorAll(".kg-gallery-image img"),e=0,n=t.length;e<n;e++){var a=t[e].closest(".kg-gallery-image"),o=t[e].attributes.width.value/t[e].attributes.height.value;a.style.flex="".concat(o," 1 0%")}}(),v(1e3),a.length>0&&(a.on("init",(function(){C(),Object(l.a)(".js-article-card-title",100),Object(l.a)(".js-article-card-title-no-image",250)})),a.slick({arrows:!0,infinite:!0,prevArrow:'<button class="m-icon-button filled in-recommended-articles slick-prev" aria-label="Previous"><span class="icon-arrow-left"></span></button>',nextArrow:'<button class="m-icon-button filled in-recommended-articles slick-next" aria-label="Next"><span class="icon-arrow-right"></span></button>',mobileFirst:!0,responsive:[{breakpoint:720,settings:{slidesToShow:2}},{breakpoint:1023,settings:{arrows:!1,slidesToShow:3}}],rtl:Object(u.isRTL)()})),t.click((function(){o()("html, body").animate({scrollTop:0},500)})),e.click((function(){e.parent().hide(),n.fadeIn("slow")})),o()(".js-post-content").find("img").each((function(){o()(this).closest("figure").hasClass("kg-bookmark-card")||o()(this).addClass("js-zoomable");var t=o()(this).parent().find("figcaption");t?o()(this).attr("alt",t.text()):o()(this).attr("alt","")})),Object(u.makeImagesZoomable)(o.a,s.a),window.addEventListener("scroll",b,{passive:!0}),window.addEventListener("resize",k,{passive:!0})})),o()(window).on("load",(function(){C()}))}},[[21,0,1]]]);
|
||||
|
|
@ -54,5 +54,5 @@
|
|||
"desktop": "assets/screenshot-desktop.jpg",
|
||||
"mobile": "assets/screenshot-mobile.jpg"
|
||||
},
|
||||
"version": "0.6.8"
|
||||
"version": "0.6.9"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -42,3 +42,32 @@ export const getParameterByName = (name, url) => {
|
|||
|
||||
return decodeURIComponent(results[2].replace(/\+/g, ' '))
|
||||
}
|
||||
|
||||
export const makeImagesZoomable = ($, mediumZoom) => {
|
||||
const zoom = mediumZoom('.js-zoomable')
|
||||
|
||||
zoom.on('open', (event) => {
|
||||
if (isMobile() && $(event.target).parent().hasClass('kg-gallery-image')) {
|
||||
setTimeout(() => {
|
||||
const $mediumZoomImage = $('.medium-zoom-image--opened')
|
||||
const transform = $mediumZoomImage[0].style.transform
|
||||
const scale = transform.substr(0, transform.indexOf(' '))
|
||||
const scaleValue = parseFloat(scale.substr(scale.indexOf('(') + 1).split(')')[0])
|
||||
const translate = transform.substr(transform.indexOf(' ') + 1)
|
||||
const translateY = parseFloat(translate.split(',')[1])
|
||||
const newTranslateY = (translateY < 0) ? (scaleValue * translateY) + translateY : (scaleValue * translateY) - translateY
|
||||
const newTransform = `scale(1) translate3d(0, ${newTranslateY}px, 0)`
|
||||
|
||||
$mediumZoomImage.addClass('medium-zoom-image-mobile')
|
||||
$mediumZoomImage[0].style.transform = newTransform
|
||||
}, 10)
|
||||
}
|
||||
})
|
||||
|
||||
zoom.on('close', () => {
|
||||
if (isMobile() && $(event.target).parent().hasClass('kg-gallery-image')) {
|
||||
const $mediumZoomImage = $('.medium-zoom-image')
|
||||
$mediumZoomImage.removeClass('medium-zoom-image-mobile')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import $ from 'jquery'
|
||||
import mediumZoom from 'medium-zoom'
|
||||
import fitvids from 'fitvids'
|
||||
import mediumZoom from 'medium-zoom'
|
||||
import { makeImagesZoomable } from './helpers'
|
||||
|
||||
$(document).ready(() => {
|
||||
fitvids('.js-post-content')
|
||||
|
|
@ -32,5 +33,5 @@ $(document).ready(() => {
|
|||
}
|
||||
})
|
||||
|
||||
mediumZoom('.js-zoomable')
|
||||
makeImagesZoomable($, mediumZoom)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@ import fitvids from 'fitvids'
|
|||
import shave from 'shave'
|
||||
import {
|
||||
isRTL,
|
||||
isMobile
|
||||
isMobile,
|
||||
makeImagesZoomable
|
||||
} from './helpers'
|
||||
|
||||
let $aosWrapper = null
|
||||
|
|
@ -185,7 +186,7 @@ $(document).ready(() => {
|
|||
}
|
||||
})
|
||||
|
||||
mediumZoom('.js-zoomable')
|
||||
makeImagesZoomable($, mediumZoom)
|
||||
|
||||
window.addEventListener('scroll', onScrolling, { passive: true })
|
||||
window.addEventListener('resize', onResizing, { passive: true })
|
||||
|
|
|
|||
|
|
@ -54,6 +54,13 @@ fieldset {
|
|||
background-color: var(--background-color) !important;
|
||||
}
|
||||
|
||||
.medium-zoom-image-mobile {
|
||||
left: 0 !important;
|
||||
width: 100% !important;
|
||||
height: auto !important;
|
||||
@include transition(all .3s cubic-bezier(.2,0,.2,1) !important);
|
||||
}
|
||||
|
||||
.medium-zoom-overlay,
|
||||
.medium-zoom-image {
|
||||
z-index: 5;
|
||||
|
|
|
|||
|
|
@ -239,6 +239,7 @@
|
|||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.kg-gallery-row:not(:first-of-type) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue