#1• Hola: Estoy buscando un codigo que permita que al hacer cilck en una imagen esta se amplie. Supongo que habrá algun código html que permita hacerlo. Gracias de antemano. |
#2• Con JavaScript y el evento onClick, puede modificar las propiedades de la imagen: |
#3• Esta bien pero no es exactamente lo que buscaba. Habría alguna forma de hacerlo con Java Script o Jquery en la que saliera un preload y luego muestre la imagen. Y una vez que quieras volver a seguir navegando hacer click en una parte de la pantalla, ya sea un simbolo o fuera de la imagen? Gracias. Un saludo. |
#5• Creo que lo que tratas de hacer es algo como esto: <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="css/index.css"></head><body><inputid="image"type="file"placeholder="Load an image"><br><buttonclass="plus">+</button><buttonclass="minus">-</button><br><divclass="container"></div><scripttype="text/javascript"src="js/index.js"></script></body></html>document.addEventListener('DOMContentLoaded',function(){const imgInput = document.getElementById('image');const container = document.querySelector('.container');const img = document.createElement('img');const plusButton = document.querySelector('.plus');const minusButton = document.querySelector('.minus'); imgInput.addEventListener('change', setImage); plusButton.addEventListener('click', increaseSize); minusButton.addEventListener('click', reduceSize); img.addEventListener('click', fullScreen);function setImage(){ img.file =this.files[0]; img.classList.add('imageLoaded'); container.appendChild(img);const reader =newFileReader(); reader.onload =(function(img){returnfunction(e){ img.src = e.target.result;};})(img); reader.readAsDataURL(this.files[0]);}function increaseSize(){ img.style.width =`${img.width +=100}px`; img.style.height =`${img.height +=50}px`;}function reduceSize(){if(img.width <=100|| img.height <=50)return; img.style.width =`${img.width -=100}px`; img.style.height =`${img.height -=50}px`;}function fullScreen(){if(this.width === window.innerWidth){ img.style.width =(window.innerWidth /2)+"px";}else{ img.style.width = window.innerWidth +"px";}}}); document.addEventListener('DOMContentLoaded',function(){const imgInput = document.getElementById('image');const container = document.querySelector('.container');const img = document.createElement('img');const plusButton = document.querySelector('.plus');const minusButton = document.querySelector('.minus'); imgInput.addEventListener('change', setImage); plusButton.addEventListener('click', increaseSize); minusButton.addEventListener('click', reduceSize); img.addEventListener('click', fullScreen);function setImage(){ img.file =this.files[0]; img.classList.add('imageLoaded'); container.appendChild(img);const reader =newFileReader(); reader.onload =(function(img){returnfunction(e){ img.src = e.target.result;};})(img); reader.readAsDataURL(this.files[0]);}function increaseSize(){ img.style.width =`${img.width +=100}px`; img.style.height =`${img.height +=50}px`;}function reduceSize(){if(img.width <=100|| img.height <=50)return; img.style.width =`${img.width -=100}px`; img.style.height =`${img.height -=50}px`;}function fullScreen(){if(this.width === window.innerWidth){ img.style.width =(window.innerWidth /2)+"px";}else{ img.style.width = window.innerWidth +"px";}}});body {margin:0;padding:0;}.container {margin: auto;}.imageLoaded {width:50%;height: auto;} <!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><linkrel="stylesheet"href="css/index.css"></head><body><inputid="image"type="file"placeholder="Load an image"><br><buttonclass="plus">+</button><buttonclass="minus">-</button><br><divclass="container"></div><scripttype="text/javascript"src="js/index.js"></script></body></html> |
#6• Buenas tardes Juan. Te pasi el código para que puedas hacer un Zoom de la imagen. Los pasos son los siguientes: CódigoHTML: <div class="img-zoom-container"> Código CSS: * {box-sizing: border-box;} Código JavaScript: function imageZoom(imgID, resultID) { Script iniciar Zoom: <script> Espero haberte ayudado. Raúl |
#7• Es sencillo si utilizas la libreria de js llamada jquery magnific popup: <script> $(document).ready(function() { $.magnificPopup.open( { showCloseBtn:true, closeOnBgClick:true, enableEscapeKey: true, closeOnContentClick: true, closeBtnInside: true, type:'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '</div>', tError: 'La imagen no puede cargarse.' }, items: { src: 'images2.jpg' } } ); }); </script> Saludos. Marcos |
#8• Amplio la conversación de nuestro compañero Marcos, por si alguien quiere utilizar el Magic PopUp Estos son los tres archivos principales que utilizaremos para que funcione correctamente Magnific Popup en nuestro proyecto.<!-- Magnific Popup archivo CSS principal --> <link rel="stylesheet" href="path/magnific-popup/magnific-popup.css"> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Magnific Popup archivo JS principal --> <script src="path/magnific-popup/jquery.magnific-popup.min.js"></script> Código HTML como agregar Magnific Popup:<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> </body> Código funcional de como implementar la librería Magnific Popup<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <h2>Simple Popup de una sola imagen</h2> <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML."> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> <!-- Código JS importante para el correcto funcionamiento Magnific Popup--> $('.image-popup-vertical-fit').magnificPopup({ }); Saludos Kiko Escrito originalmente por @sandrapalos Es sencillo si utilizas la libreria de js llamada jquery magnific popup: <script> $(document).ready(function() { $.magnificPopup.open( { showCloseBtn:true, closeOnBgClick:true, enableEscapeKey: true, closeOnContentClick: true, closeBtnInside: true, type:'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '</div>', tError: 'La imagen no puede cargarse.' }, items: { src: 'images2.jpg' } } ); }); </script> Saludos. Marcos |
#9• Necesitaras varias partes: 1.- Script inicial para el Zoom: <script> imageZoom("myimage", "myresult"); 2.- El siguiente código en HTML cons us css: <div class="imgen-zoom-container"> CSS: * {box-sizing: border-box;} width: 50px;
border: 1px solid #d4d4d4; 3.- Y por último el siguiente código JavaScript: function imageZoom(imgID, resultID) { Pedro Torrano |
#10• No se que debo hacer mal pero no consigo que ninguna de las opciones me funcione. Quizas me falta cargar alguna libreria? Raúl Escrito originalmente por @kikoabad Amplio la conversación de nuestro compañero Marcos, por si alguien quiere utilizar el Magic PopUp Estos son los tres archivos principales que utilizaremos para que funcione correctamente Magnific Popup en nuestro proyecto.<!-- Magnific Popup archivo CSS principal --> <link rel="stylesheet" href="path/magnific-popup/magnific-popup.css"> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Magnific Popup archivo JS principal --> <script src="path/magnific-popup/jquery.magnific-popup.min.js"></script> Código HTML como agregar Magnific Popup:<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> </body> Código funcional de como implementar la librería Magnific Popup<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <h2>Simple Popup de una sola imagen</h2> <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML."> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> <!-- Código JS importante para el correcto funcionamiento Magnific Popup--> $('.image-popup-vertical-fit').magnificPopup({ }); Saludos Kiko Escrito originalmente por @sandrapalos Es sencillo si utilizas la libreria de js llamada jquery magnific popup: <script> $(document).ready(function() { $.magnificPopup.open( { showCloseBtn:true, closeOnBgClick:true, enableEscapeKey: true, closeOnContentClick: true, closeBtnInside: true, type:'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '</div>', tError: 'La imagen no puede cargarse.' }, items: { src: 'images2.jpg' } } ); }); </script> Saludos. Marcos |
#11• Acabo de ver tu mensaje. Mírate la libreria de js llamada jquery magnific popup. Seguro que con eso se solucionará.! Un ejemplo para que lo veas está en los productos de esta web de Carpinteria Aluminio Sandra Escrito originalmente por @complementosnaturale No se que debo hacer mal pero no consigo que ninguna de las opciones me funcione. Quizas me falta cargar alguna libreria? Raúl Escrito originalmente por @kikoabad Amplio la conversación de nuestro compañero Marcos, por si alguien quiere utilizar el Magic PopUp Estos son los tres archivos principales que utilizaremos para que funcione correctamente Magnific Popup en nuestro proyecto.<!-- Magnific Popup archivo CSS principal --> <link rel="stylesheet" href="path/magnific-popup/magnific-popup.css"> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Magnific Popup archivo JS principal --> <script src="path/magnific-popup/jquery.magnific-popup.min.js"></script> Código HTML como agregar Magnific Popup:<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> </body> Código funcional de como implementar la librería Magnific Popup<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <h2>Simple Popup de una sola imagen</h2> <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML."> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> <!-- Código JS importante para el correcto funcionamiento Magnific Popup--> $('.image-popup-vertical-fit').magnificPopup({ }); Saludos Kiko Escrito originalmente por @sandrapalos Es sencillo si utilizas la libreria de js llamada jquery magnific popup: <script> $(document).ready(function() { $.magnificPopup.open( { showCloseBtn:true, closeOnBgClick:true, enableEscapeKey: true, closeOnContentClick: true, closeBtnInside: true, type:'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '</div>', tError: 'La imagen no puede cargarse.' }, items: { src: 'images2.jpg' } } ); }); </script> Saludos. Marcos |
#12• Muchas gracias Sandra. Me lo miro y te digo! Un placer encontrarse gente tan amable! Raúl Escrito originalmente por @sandrapalos Acabo de ver tu mensaje. Mírate la libreria de js llamada jquery magnific popup. Seguro que con eso se solucionará.! Un ejemplo para que lo veas está en los productos de esta web de Carpinteria Aluminio Sandra Escrito originalmente por @complementosnaturale No se que debo hacer mal pero no consigo que ninguna de las opciones me funcione. Quizas me falta cargar alguna libreria? Raúl Escrito originalmente por @kikoabad Amplio la conversación de nuestro compañero Marcos, por si alguien quiere utilizar el Magic PopUp Estos son los tres archivos principales que utilizaremos para que funcione correctamente Magnific Popup en nuestro proyecto.<!-- Magnific Popup archivo CSS principal --> <link rel="stylesheet" href="path/magnific-popup/magnific-popup.css"> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Magnific Popup archivo JS principal --> <script src="path/magnific-popup/jquery.magnific-popup.min.js"></script> Código HTML como agregar Magnific Popup:<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> </body> Código funcional de como implementar la librería Magnific Popup<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <h2>Simple Popup de una sola imagen</h2> <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML."> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> <!-- Código JS importante para el correcto funcionamiento Magnific Popup--> $('.image-popup-vertical-fit').magnificPopup({ }); Saludos Kiko Escrito originalmente por @sandrapalos Es sencillo si utilizas la libreria de js llamada jquery magnific popup: <script> $(document).ready(function() { $.magnificPopup.open( { showCloseBtn:true, closeOnBgClick:true, enableEscapeKey: true, closeOnContentClick: true, closeBtnInside: true, type:'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '</div>', tError: 'La imagen no puede cargarse.' }, items: { src: 'images2.jpg' } } ); }); </script> Saludos. Marcos |
#13• Hola Raúl. No hay de que.!! Que sepas también que en wordpress puedes encontrar Magnific Popup y es muy facil de manejar. Te dejo un ejemplo: ¿Que es? Cualquier cosa a tu disposición para ayudar! Saludos Raul. Escrito originalmente por @complementosnaturale Muchas gracias Sandra. Me lo miro y te digo! Un placer encontrarse gente tan amable! Raúl Escrito originalmente por @sandrapalos Acabo de ver tu mensaje. Mírate la libreria de js llamada jquery magnific popup. Seguro que con eso se solucionará.! Un ejemplo para que lo veas está en los productos de esta web de Carpinteria Aluminio Sandra Escrito originalmente por @complementosnaturale No se que debo hacer mal pero no consigo que ninguna de las opciones me funcione. Quizas me falta cargar alguna libreria? Raúl Escrito originalmente por @kikoabad Amplio la conversación de nuestro compañero Marcos, por si alguien quiere utilizar el Magic PopUp Estos son los tres archivos principales que utilizaremos para que funcione correctamente Magnific Popup en nuestro proyecto.<!-- Magnific Popup archivo CSS principal --> <link rel="stylesheet" href="path/magnific-popup/magnific-popup.css"> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Magnific Popup archivo JS principal --> <script src="path/magnific-popup/jquery.magnific-popup.min.js"></script> Código HTML como agregar Magnific Popup:<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> </body> Código funcional de como implementar la librería Magnific Popup<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <h2>Simple Popup de una sola imagen</h2> <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML."> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> <!-- Código JS importante para el correcto funcionamiento Magnific Popup--> $('.image-popup-vertical-fit').magnificPopup({ }); Saludos Kiko Escrito originalmente por @sandrapalos Es sencillo si utilizas la libreria de js llamada jquery magnific popup: <script> $(document).ready(function() { $.magnificPopup.open( { showCloseBtn:true, closeOnBgClick:true, enableEscapeKey: true, closeOnContentClick: true, closeBtnInside: true, type:'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '</div>', tError: 'La imagen no puede cargarse.' }, items: { src: 'images2.jpg' } } ); }); </script> Saludos. Marcos |
#14• Escrito originalmente por @sandrapalos Acabo de ver tu mensaje. Mírate la libreria de js llamada jquery magnific popup. Seguro que con eso se solucionará.! Un ejemplo para que lo veas está en los productos de esta web de Carpinteria Aluminio Sandra Escrito originalmente por @complementosnaturale No se que debo hacer mal pero no consigo que ninguna de las opciones me funcione. Quizas me falta cargar alguna libreria? Raúl Escrito originalmente por @kikoabad Amplio la conversación de nuestro compañero Marcos, por si alguien quiere utilizar el Magic PopUp Estos son los tres archivos principales que utilizaremos para que funcione correctamente Magnific Popup en nuestro proyecto.<!-- Magnific Popup archivo CSS principal --> <link rel="stylesheet" href="path/magnific-popup/magnific-popup.css"> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- Magnific Popup archivo JS principal --> <script src="path/magnific-popup/jquery.magnific-popup.min.js"></script> Código HTML como agregar Magnific Popup:<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> </body> Código funcional de como implementar la librería Magnific Popup<!DOCTYPE html> <!-- Magnific Popup archivo CSS principal --> </head> <h2>Simple Popup de una sola imagen</h2> <a class="image-popup-vertical-fit" href="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_b.jpg" title="Caption. Can be aligned to any side and contain any HTML."> <!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ --> <!-- Magnific Popup archivo JS principal --> <!-- Código JS importante para el correcto funcionamiento Magnific Popup--> $('.image-popup-vertical-fit').magnificPopup({ }); Saludos Kiko Escrito originalmente por @sandrapalos Es sencillo si utilizas la libreria de js llamada jquery magnific popup: <script> $(document).ready(function() { $.magnificPopup.open( { showCloseBtn:true, closeOnBgClick:true, enableEscapeKey: true, closeOnContentClick: true, closeBtnInside: true, type:'image', image: { markup: '<div class="mfp-figure">'+ '<div class="mfp-close"></div>'+ '<div class="mfp-img"></div>'+ '</div>', tError: 'La imagen no puede cargarse.' }, items: { src: 'images2.jpg' } } ); }); </script> Saludos. Marcos |
ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un nuevo tema en lugar de responder al actual |
Opciones: Ir al subforo: |
Permisos: TU NO PUEDES Escribir nuevos temas TU NO PUEDES Responder a los temas TU NO PUEDES Editar tus propios mensajes TU NO PUEDES Borrar tus propios mensajes |
Temas similares | ||||
Tema | Usuarios | Respuestas | Visitas | Actividad |
---|---|---|---|---|
Por: complementosnaturale, el 24/Oct/2023, 18:52 | 0 | 388 | Oct/23 | |
Por: MaIcOl, el 05/Oct/2003, 12:12 | 11 | 46k | Oct/03 |