ZOOM DE IMAGEN CON RUEDITA DE MOUSE Y BARRAS DE PROGRESO.
Para
- 1- Adjuntar en el <head> jquery y jqueryUI
- 2- En el script copiar el jQuery event handling para bloquear el scrolling dentro de la imagen.
- 3- La barra verde con su progreso va con width y la barra roja con left, pero progreso1 en css tiene que llevar position: relative porque si no left no funciona.
- 4- El resto está en los comentarios
<head>
<LINK href="../css/estilos.css" type=text/css rel=StyleSheet>
<LINK href="../scripts/jquery-ui.css" type=text/css rel=StyleSheet>
<script src="../scripts/jquery-3.6.4.min.js"></script>
<script src="../scripts/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
// Patch jQuery event handling to support passive listeners (si no no opera PreventDefaut en wheel)
jQuery.event.special.wheel = {
setup: function( _, ns, handle ){
this.addEventListener("wheel", handle, { passive: !ns.includes("noPreventDefault") });
}
};
jQuery.event.special.mousewheel = { // For older browser compatibility
setup: function( _, ns, handle ){
this.addEventListener("mousewheel", handle, { passive: !ns.includes("noPreventDefault") });
}
};
// FIN Patch jQuery event handling to support passive listeners
//centrador
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", Math.max(0, (($(window).height() - $(this).outerHeight()) / 2) +
$(window).scrollTop()) + "px");
this.css("left", Math.max(0, (($(window).width() - $(this).outerWidth()) / 2) +
$(window).scrollLeft()) + "px");
return this;
}
//fin centrador
//************función mensaje ****************************************************************
var timer1; // timer1 global para que valga fuera de la función
function mensaje(texto,fondo="#dddddd",tiempo=3000) { // fondo color css válido por defecto gris desaparece en 3seg
// recomendado: para error 'coral' para éxito 'limegreen'
var estilo = "style= background-color:" + fondo +";font-size:0.80rem;";
estilo += "opacity:1;text-align:center;z-index:102;position:absolute;"; //obligatorios
estilo += "min-width:100px;max-width:200px;min-height:25px;padding:20px;"; //parametrizo el estilo
estilo += "color:black;border-radius:20px;" // idem
var nuevo = "<div id='mensaje01' " + estilo + ">" + texto + "</div>"; //creo la div mensaje01
$("body").append(nuevo); // la meto en el body
$("#mensaje01").css('cursor', 'pointer'); // manito
$("#mensaje01").center(); // la centro
timer1 = setTimeout(function () {
$("#mensaje01").fadeOut( 2000, function() { //desvanezco en 2 seg
$("#mensaje01").remove(); // elimino la div mensaje01
});
}, tiempo); // delay
return "true"; // agregar la función siguiente
}
$("body").on("mouseenter", '#mensaje01', function(){ // al entrar en el mensaje
clearTimeout(timer1); // detengo timer1
}).on("mouseleave", '#mensaje01', function(){ // al salir del mensaje
$("#mensaje01").fadeOut( 1000, function() { //desvanezco en 1 seg
$("#mensaje01").remove(); // y elimino la div mensaje01
});
});
$("body").on("dblclick", '#mensaje01', function(){ // al clicar en el mensaje
clearTimeout(timer1); // detengo timer1
$("#mensaje01").remove();
});
// *************************************fin función mensaje
//***********************************variables globales********************************
var img = $('#miimagen')[0]; // Obtener elemento DOM nativo
var ancho = img.naturalWidth; // ancho de la imagen real
var alto = img.naturalHeight; // alto de la imagen real
var anchoinicial = $('#miimagen').width(); // ancho de la imagen en html
var altoinicial = $('#miimagen').height(); // alto de la imagen en html
var proporcion = alto/ancho; // proporcionalidad para corregir alturas
var paso = Math.round((ancho-anchoinicial)/20); // 20 pasos de agrandar o achicar zoom
var anchoahora = anchoinicial; // ancho actual en cada etapa del zoom, inicia tal como carga en la web
var zoom = Math.round(anchoinicial/ancho * 100);// % de zoom;
var permitido = true; // variable para bloquear la ruedita durante el animate
var corrimientoh; // el corrimiento horizontal para corregir desplazamiento por zoom
var corrimientov; // el corrimiento vertical para corregir desplazamiento por zoom
const animacion = 100; // tempo en ms de los animate
const anchocursor= 5; // % de ancho cursor frente a ancho barra
//*********************************** tareas al cargar*********************************
$("#miimagen").css("min-width",anchoinicial + 'px'); // me aseguro no achicarla más del ancho inicial
$("#miimagen").css("max-width",ancho + 'px'); // me aseguro no agrandarla más del ancho real
$('.contenedor_imagen').css('height',altoinicial + 'px'); // ajusta la altura de la div según ancho actual
$('#conteo').html(`Ancho real (max.): ${ancho}px Ancho actual: ${anchoinicial}px Zoom: ${zoom} %`);
$('#progreso').css('width', `${zoom}%`); // ubica la barra de progreso en el % de zoom inicial
$('#porcentaje').html(`${zoom} %`); // da el % de zoom inicial
$('#progreso1').css('width', `${anchocursor}%`); // pone el ancho del cursor en %
$('#progreso1').css('left', `${zoom-anchocursor}%`); // corre la barra de progreso1 en el % de zoom inicial
$('#porcentaje1').html(`${zoom} %`); // da el % de zoom inicial
$('body').on("wheel.noPreventDefault", '.imagen', function(e) {
e.preventDefault(); // impide que la ruedita escrolee dentro de imagen (Patch jQuery)
if(permitido){
permitido = false; // si puedo arrancar animación, bloqueo otra orden de la ruedita
if (e.originalEvent.deltaY < 0) { // <0 ruedita arriba >0 ruedita abajo
if(anchoahora < ancho){ // si no llegué al tamaño real de la imagen...
anchoahora = anchoahora + paso; // como la ruedita agranda sumo al ancho un paso
$("#miimagen").css('cursor','zoom-in'); // pone el cursor con lupita +
if(anchoahora > ancho){ // si me pasé del ancho real
anchoahora = ancho; // corrijo el ancho actual al real
}
} //fin de estoy aumentando elzoom
} else { // como la ruedita achica...
if(anchoahora > anchoinicial){ // si no llegamos al ancho inicial
anchoahora = anchoahora - paso; // achicamos la imagen
$("#miimagen").css('cursor','zoom-out');// pone el cursor con lupita -
if(anchoahora < anchoinicial){ // si me pase hacia abajo en el tamaño
anchoahora = anchoinicial; // corrijo el ancho actual al inicial
}
}
}
corrimientoh = Math.round((anchoinicial-anchoahora)/2); //el corrimiento es la mitad del aumento total
corrimientov = corrimientoh*proporcion; // el vert. es prop.
$("#miimagen").animate({
width: anchoahora + 'px', // zoomeo el ancho
height :"auto", // alto auto
left: corrimientoh +'px', // corro horizontal para centrar
top: corrimientov +'px' // corro vertical para centrar
},animacion,function() {
permitido=true; // al fin de la animación habilito ordenes de la ruedita
});
//****************************************PARA LOS CONTADORES Y LA BARRA DE ZOOM ************
zoom = Math.round(anchoahora/ancho * 100); // % de zoom
$('#conteo').html(`Ancho real (max.): ${ancho}px Ancho actual: ${anchoahora}px Zoom: ${zoom} % `); // muesta el contador
$('#progreso').animate({
width: `${zoom}%`
},animacion,function() {
//fin animación
});
$('#porcentaje').html(`${zoom} %`);
$('#progreso1').animate({
left: `${zoom-anchocursor}%`
},animacion,function() {
//fin animación
});
$('#porcentaje1').html(`${zoom} %`);
//*************************************FIN DE LOS CONTADORES Y LA BARRA DE ZOOM**************
} //fin if permitido
});
$('body').on('click','.imagen', function(e){
$("#miimagen").css('cursor','default'); // devuelve el cursor a default si clicamos la imagen
var anchoahora= $('#miimagen').width();
var altoahora = $('#miimagen').height();
mensaje('real: ' + ancho + 'x' + alto + '</br>' + 'actual: ' + anchoahora + 'x' + altoahora + '</br>' + 'paso: ' + paso);
});
$('body').on("mouseout", '.imagen', function(e) {
$("#miimagen").css('cursor','default'); // devuelve el cursor a default si salimos de la imagen
});
});
</script>
</head>
STYLE++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<style>
.contenedor_imagen{
margin: 0 auto;
margin-top:50px;
text-align:center;
width: 1000px;
position: relative;
overflow: hidden;
z-index: 2;
border: #a70404ff solid 2px;
}
.imagen{
width: 100%;
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
}
/* contadores */
#conteo{
margin: 0 auto;
text-align: center;
font-size: 1rem;
}
/* barra indicadora de zoom */
.barra {
position: relative !important;
margin: 0 auto !important;
width: 50% !important;
background-color: #555555 !important;
border: 1px solid #000 !important;
padding: 0px !important;
left: 15px !important;
border-radius: 3px !important;
height:25px !important; /* la altura de .barra = altura de .progreso*/
}
.progreso {
background-color: #5ee57b;
width: 0%;
height: 25px; /* la altura de .barra = altura de .progreso*/
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.porcentaje {
position: absolute;
display: inline-block;
color: #fff;
font-weight: bold;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -20px;
}
.progreso1 {
position: relative !important; /* si no es position relative, left no va a funcionar */
background-color: #e93159;
width: 0;
height: 25px; /* la altura de .barra = altura de .progreso*/
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
}
.porcentaje1 {
position: absolute;
display: inline-block;
color: #fff;
font-weight: bold;
top: 50%;
left: 50%;
margin-top: -9px;
margin-left: -20px;
}
</style>
HTLM+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<body>
<!-- **********************************CONTADORES Y BARRA************************ -->
<div style="margin-bottom: 15px;">
<div id="conteo" ></div>
</div>
<div class='barra'>
<div class='progreso' id='progreso'></div>
<div class='porcentaje' id='porcentaje'></div>
</div>
<div> </div>
<div class='barra'>
<div class='progreso1' id='progreso1'></div>
<div class='porcentaje1' id='porcentaje1'></div>
</div>
<!-- ******************************FIN CONTADORES Y BARRA************************ -->
<!-- **********************************IMAGEN************************************ -->
<div class="contenedor_imagen">
<img class="imagen" src="img-pasadiapo/tagetes.jpg" id="miimagen" />
</div>
<!-- ******************************FIN IMAGEN************************************ -->
</body>