Tengo controles deslizantes de filtro que cambian el Contraste, la Saturación y el Tono de una imagen seleccionada. Todos estaban trabajando muy bien hace unos meses. WordPress se actualizó mucho desde diciembre. Ahora no funcionan.
Mientras estoy en el back-end, puedo hacer que funcionen perfectamente cambiando cualquier pequeña cosa. Puedo mover la posición del JavaScript o poner una letra y eliminarla del JavaScript y de repente funcionará. En WordPress tienes estas burbujas HTML en las que pones el código, y puedo cambiar cualquiera de las otras 4 secciones de JavaScript dentro de la misma burbuja y empezará a funcionar de nuevo.
Los otros 4 procesos (separados) dentro de esa burbuja funcionan bien sin necesidad de preguntar, aunque ninguno de ellos son controles deslizantes como estos.
Intenté cambiar la posición de inicio del JS hacia arriba y hacia abajo en la página desde el HTML y nada corrigió los controles deslizantes (aunque una posición de inicio más alta hizo que mis otros botones fallaran).
Intenté agregar document.ready() pero eso rompió los controles deslizantes por completo.
Los controles deslizantes de filtro HTML:
<span class="sliders"> <label class="label1 sliders">Contrast</label> <input type="range" min="90" max="120" value="100" step="1" onchange="applyFilter()" data-filter="contrast" data-scale="%"><br> </span> <span class="sliders"> <label class="label2 sliders">Saturation</label> <input type="range" min="70" max="200" value="100" step="1" onchange="applyFilter()" data-filter="saturate" data-scale="%"><br> </span> <span class="sliders"> <label class="label3 sliders">Color</label> <input type="range" min="-22" max="22" value="0" step="1" onchange="applyFilter()" data-filter="hue-rotate" data-scale="deg"><br> </span>El javascript para hacerlos funcionar:
<script type="text/javascript"> var image = document.querySelector('.pic'); var filterControls = document.querySelectorAll('input[type=range]'); function applyFilter() { var computedFilters = ''; filterControls.forEach(function(item, index) { computedFilters += item.getAttribute('data-filter') + '(' + item.value + item.getAttribute('data-scale') + ') '; }); image.style.filter = computedFilters; }; </script>Después de buscar en el código, descubrí que tenía esto para un conjunto de fotos diferente en la misma página. Las variables son idénticas a las de mi zona problemática, pero están ubicadas más abajo en la página, por lo que este conjunto de controles funcionó.
<script type="text/javascript"> var image = document.querySelector('.pic-resin-coaster'); var filterControls = document.querySelectorAll('input[type=range]'); function applyFilterResin() { var computedFilters = ''; filterControls.forEach(function(item, index) { computedFilters += item.getAttribute('data-filter') + '(' + item.value + item.getAttribute('data-scale') + ') '; }); image.style.filter = computedFilters; }; </script>Una vez que los cambié para que fueran exclusivos de este conjunto de fotos, comenzaron a trabajar en el front-end y el back-end.
Aspecto variable final:
<script type="text/javascript"> var imagerc = document.querySelector('.pic-resin-coaster'); var filterControlsrc = document.querySelectorAll('input[type=range]'); function applyFilterResin() { var computedFiltersrc = ''; filterControlsrc.forEach(function(item, index) { computedFiltersrc += item.getAttribute('data-filter') + '(' + item.value + item.getAttribute('data-scale') + ') '; }); imagerc.style.filter = computedFiltersrc; }; </script>