Resolusi Chapter Manga + radio - database Code

verylow Low 0.5 Low 1 Medium 1.5 Medium 2 High

Show Code

<div class="resolution_Manga">
   <input type="radio" name="resolution" value="s200" id="verylow">
        <label for="verylow">verylow</label>
        <input type="radio" name="resolution" value="s300" id="lowv1">
        <label for="lowv1">Low 0.5</label>
        <input type="radio" name="resolution" value="s450" id="lowv2">
        <label for="lowv2">Low 1</label>
        <input type="radio" name="resolution" value="s600" id="mediumv1" checked="checked">
        <label for="mediumv1">Medium 1.5</label>
        <input type="radio" name="resolution" value="s800" id="mediumv2">
        <label for="mediumv2">Medium 2</label>
        <input type="radio" name="resolution" value="s1600" id="high">
        <label for="high">High 2.5</label>
    </div>

<div class="pageManga"> 
  postingan Chapter Manga disini
    </div>

<style> 
  .pageManga img {
    width: 100%;
    height: auto;
}
  .separator.loadshigure {
    content:"";
    width: 100%;
    height: auto;
    position: relative;  
}
  .loadshigure.separator::after {
    content: "Memproses img Chapter...";
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 24px;
    font-family: fantasy;
    font-weight: 600;
    white-space: nowrap;
    color: #fff;
    text-shadow: 1px 1px 1px #ff0056;
}   @media screen and (max-width: 1024px) {  .separator.loadshigure::before {
    display: flex;
    justify-content: center;
  }
}
.separator.loadshigure canvas{
    display: none;
} 
.pageManga .separator.loadshigure::before{    
  content: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsnKRUbZrMI9ZLFR1fzoGLo26nLlAFv0EJL_5az3suMUuzltKXJrcZeY8orOl5tsr63bu3UQFfaw1LUiKi33PUw2NtpTVSqLv7i7yRtQi2QNNThL4K-a-hyit1P5xjI4OY5mgLZRMoQdtXp-AvrBSU-bTNiUicfAyOqig4AxfyU3cw8rAMkEDY7kCCU7w/s600/tenor.gif); 
 }
</style>

<script>
  /*<![CDATA[*/
  var useCanvas=!0,
originalImageUrls=[];function extractOriginalImageUrls(){document.querySelectorAll(".pageManga img").forEach(function(e){var a=e.src;originalImageUrls.push(a)})}function updateImageResolution(e){var a=document.querySelectorAll(".pageManga .separator");a.forEach(e=>{e.classList.add("loadshigure")});var t=document.querySelectorAll(".separator img");t.forEach(function(e){e.classList.add("imgResolusi")}),setTimeout(function(){a.forEach(e=>{e.classList.remove("loadshigure")}),t.forEach(function(e){e.classList.remove("hidden")})},6e3),document.querySelectorAll(".separator canvas").forEach(function(e){e.parentNode.removeChild(e)}),originalImageUrls.forEach(function(a,t){if(useCanvas){var r,n=document.createElement("canvas"),o=n.getContext("2d"),i=new Image;i.onload=function(){var e=window.devicePixelRatio,a=Math.min(2048/i.width,1080/i.height);n.width=i.width*a*e,n.height=i.height*a*e,n.style.width="100%",n.style.height="auto",o.drawImage(i,0,0,n.width,n.height)};var l=a.replace(/\/s\d+\//,"/"+e+"-rw/");i.src=l,r=n}else{var s=new Image,l=a.replace(/\/s\d+\//,"/"+e+"-rw/");s.src=l,r=s}var c=document.querySelectorAll(".separator")[t];c.innerHTML="",c.appendChild(r)}),localStorage.setItem("selectedResolution",e)}var radioButtons=document.querySelectorAll('input[name="resolution"]');radioButtons.forEach(function(e){e.addEventListener("change",function(){updateImageResolution(this.value)})}),document.addEventListener("DOMContentLoaded",function(){extractOriginalImageUrls();var e=localStorage.getItem("selectedResolution");if(e){var a=document.querySelector('input[name="resolution"][value="'+e+'"]');a&&(a.checked=!0,updateImageResolution(e))}else{var t=document.getElementById("mediumv1").value,a=document.querySelector('input[name="resolution"][value="'+t+'"]');a&&(a.checked=!0,updateImageResolution(t))}});
    /*]]>*/
    </script>