Noticias
Nuevos mensajes
Buscar
Usuarios
Fisgona
Comunidades
Hosting
Otros servicios
Webmasters
JuanBalbuena
Usuario habitual
Usuario habitual
#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.

Avatar Image
Moderador del foro
Moderador del foro
#2•

Con JavaScript y el evento onClick, puede modificar las propiedades de la imagen:

<img src="ruta-img" alt="imagen" onClick="this.style.height = '200px'; this.style.width = '200px';" />
JuanBalbuena
Usuario habitual
Usuario habitual
#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.

Avatar Image
Moderador del foro
Moderador del foro
#4•

Busca en Google galerías jQuery. Aquí tienes un recopilatorio bastante amplio.

materialudiovisual
Usuario Novato
Usuario Novato
#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>



iluminacion para eventos

opinionesverificadas
Usuario Novato
Usuario Novato
#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">
 <img id="myimage" src="<tu imagen>" width="300" height="240" alt="Girl">
 <div id="myresult" class="img-zoom-result"></div>
</div>


Código CSS:

* {box-sizing: border-box;}

.img-zoom-container {
 position: relative;
}

.img-zoom-lens {
 position: absolute;
 border: 1px solid #d4d4d4;
 /*set the size of the lens:*/
 width: 40px;
 height: 40px;
}

.img-zoom-result {
 border: 1px solid #d4d4d4;
 /*set the size of the result div:*/
 width: 300px;
 height: 300px;
}

Código JavaScript:

function imageZoom(imgID, resultID) {
 var img, lens, result, cx, cy;
 img = document.getElementById(imgID);
 result = document.getElementById(resultID);
 /* Create lens: */
 lens = document.createElement("DIV");
 lens.setAttribute("class", "img-zoom-lens");
 /* Insert lens: */
 img.parentElement.insertBefore(lens, img);
 /* Calculate the ratio between result DIV and lens: */
 cx = result.offsetWidth / lens.offsetWidth;
 cy = result.offsetHeight / lens.offsetHeight;
 /* Set background properties for the result DIV */
 result.style.backgroundImage = "url('" + img.src + "')";
 result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
 /* Execute a function when someone moves the cursor over the image, or the lens: */
 lens.addEventListener("mousemove", moveLens);
 img.addEventListener("mousemove", moveLens);
 /* And also for touch screens: */
 lens.addEventListener("touchmove", moveLens);
 img.addEventListener("touchmove", moveLens);
 function moveLens(e) {
   var pos, x, y;
   /* Prevent any other actions that may occur when moving over the image */
   e.preventDefault();
   /* Get the cursor's x and y positions: */
   pos = getCursorPos(e);
   /* Calculate the position of the lens: */
   x = pos.x - (lens.offsetWidth / 2);
   y = pos.y - (lens.offsetHeight / 2);
   /* Prevent the lens from being positioned outside the image: */
   if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
   if (x < 0) {x = 0;}
   if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
   if (y < 0) {y = 0;}
   /* Set the position of the lens: */
   lens.style.left = x + "px";
   lens.style.top = y + "px";
   /* Display what the lens "sees": */
   result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
 }
 function getCursorPos(e) {
   var a, x = 0, y = 0;
   e = e || window.event;
   /* Get the x and y positions of the image: */
   a = img.getBoundingClientRect();
   /* Calculate the cursor's x and y coordinates, relative to the image: */
   x = e.pageX- a.left;
   y = e.pageY - a.top;
   /* Consider any page scrolling: */
   x = x - window.pageXOffset;
   y = y - window.pageYOffset;
   return {x : x, y : y};
 }
}

Script iniciar Zoom:

<script>
imageZoom("myimage", "myresult");
</script>

Espero haberte ayudado.

Raúl

Aerotermia

sandrapalos
Usuario Novato
Usuario Novato
#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

Globos biodegradables

kikoabad
Usuario Novato
Usuario Novato
#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>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="path/magnific-popup/magnific-popup.css">

</head>
<body>
<h2>Mostrar Imágenes Responsivas con Magnific Popup</h2>

<!-- 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>

</body>
</html>

Código funcional de como implementar la librería Magnific Popup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup | Simple Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="css/magnific-popup.css">

</head>
<body>

<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.">
<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
</a>

<!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></sc ript>

<!-- Magnific Popup archivo JS principal -->
<script src="js/jquery.magnific-popup.min.js"></script>

<!-- Código JS importante para el correcto funcionamiento Magnific Popup-->
<script>
$(document).ready(function() {

$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});

});
</script>

</body>
</html>

Saludos

Kiko

software residuos

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

Globos biodegradables

mejoresmarcas
Usuario Novato
Usuario Novato
#9•

Necesitaras varias partes:

1.- Script inicial para el Zoom:

<script>

imageZoom("myimage", "myresult");
</script>

2.- El siguiente código en HTML cons us css:

<div class="imgen-zoom-container">
<img id="myimage" src="<tu imagen>" width="300" height="240" alt="Girl">
<div id="myresult" class="img-zoom-result"></div>
</div>

CSS:

* {box-sizing: border-box;}

.imgen-zoom-container {
 position: relative;
}

.imgen-zoom-lens {
 position: absolute;

 width: 50px;
 height: 50px;


 border: 1px solid #d4d4d4;
}

.imgen-zoom-result {

 width: 480px;
 height: 480px;

 border: 1px solid #d4d4d4;
}


3.- Y por último el siguiente código JavaScript:

function imageZoom(imgID, resultID) {
var img, lens, result, cx, cy;
img = document.getElementById(imgID);
 result = document.getElementById(resultID);
/* Create lens: */
 lens = document.createElement("DIV");
 lens.setAttribute("class", "imgen-zoom-lens");
/* Insert lens: */
 img.parentElement.insertBefore(lens, img);
/* Calculate the ratio between result DIV and lens: */
 cx = result.offsetWidth / lens.offsetWidth;
 cy = result.offsetHeight / lens.offsetHeight;
/* Set background properties for the result DIV */
result.style.backgroundImage = "url('" + img.src + "')";
result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
/* Execute a function when someone moves the cursor over the image, or the lens: */
 lens.addEventListener("mousemove", moveLens);
img.addEventListener("mousemove", moveLens);
/* And also for touch screens: */
 lens.addEventListener("touchmove", moveLens);
img.addEventListener("touchmove", moveLens);
function moveLens(e) {
  var pos, x, y;
  /* Prevent any other actions that may occur when moving over the image */
  e.preventDefault();
  /* Get the cursor's x and y positions: */
  pos = getCursorPos(e);
  /* Calculate the position of the lens: */
  x = pos.x - (lens.offsetWidth / 2);
  y = pos.y - (lens.offsetHeight / 2);
  /* Prevent the lens from being positioned outside the image: */
  if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
  if (x < 0) {x = 0;}
  if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
  if (y < 0) {y = 0;}
  /* Set the position of the lens: */
  lens.style.left = x + "px";
  lens.style.top = y + "px";
  /* Display what the lens "sees": */
  result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
}
function getCursorPos(e) {
  var a, x = 0, y = 0;
  e = e || window.event;
  /* Get the x and y positions of the image: */
  a = img.getBoundingClientRect();
  /* Calculate the cursor's x and y coordinates, relative to the image: */
  x = e.pageX- a.left;
  y = e.pageY - a.top;
  /* Consider any page scrolling: */
  x = x - window.pageXOffset;
  y = y - window.pageYOffset;
  return {x : x, y : y};
 }
}

Pedro Torrano

Complementos alimenticios Marcas

complementosnaturale
Usuario Novato
Usuario Novato
#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

Suplementos alimenticios

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>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="path/magnific-popup/magnific-popup.css">

</head>
<body>
<h2>Mostrar Imágenes Responsivas con Magnific Popup</h2>

<!-- 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>

</body>
</html>

Código funcional de como implementar la librería Magnific Popup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup | Simple Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="css/magnific-popup.css">

</head>
<body>

<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.">
<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
</a>

<!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></sc ript>

<!-- Magnific Popup archivo JS principal -->
<script src="js/jquery.magnific-popup.min.js"></script>

<!-- Código JS importante para el correcto funcionamiento Magnific Popup-->
<script>
$(document).ready(function() {

$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});

});
</script>

</body>
</html>

Saludos

Kiko

software residuos

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

Globos biodegradables

sandrapalos
Usuario Novato
Usuario Novato
#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 

Globos publicitarios

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

Suplementos alimenticios

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>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="path/magnific-popup/magnific-popup.css">

</head>
<body>
<h2>Mostrar Imágenes Responsivas con Magnific Popup</h2>

<!-- 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>

</body>
</html>

Código funcional de como implementar la librería Magnific Popup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup | Simple Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="css/magnific-popup.css">

</head>
<body>

<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.">
<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
</a>

<!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></sc ript>

<!-- Magnific Popup archivo JS principal -->
<script src="js/jquery.magnific-popup.min.js"></script>

<!-- Código JS importante para el correcto funcionamiento Magnific Popup-->
<script>
$(document).ready(function() {

$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});

});
</script>

</body>
</html>

Saludos

Kiko

software residuos

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

Globos biodegradables

complementosnaturale
Usuario Novato
Usuario Novato
#12•

Muchas gracias Sandra. Me lo miro y te digo! Un placer encontrarse gente tan amable!

Raúl

Complementos alimenticios

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 

Globos publicitarios

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

Suplementos alimenticios

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>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="path/magnific-popup/magnific-popup.css">

</head>
<body>
<h2>Mostrar Imágenes Responsivas con Magnific Popup</h2>

<!-- 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>

</body>
</html>

Código funcional de como implementar la librería Magnific Popup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup | Simple Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="css/magnific-popup.css">

</head>
<body>

<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.">
<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
</a>

<!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></sc ript>

<!-- Magnific Popup archivo JS principal -->
<script src="js/jquery.magnific-popup.min.js"></script>

<!-- Código JS importante para el correcto funcionamiento Magnific Popup-->
<script>
$(document).ready(function() {

$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});

});
</script>

</body>
</html>

Saludos

Kiko

software residuos

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

Globos biodegradables

sandrapalos
Usuario Novato
Usuario Novato
#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

Complementos alimenticios

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 

Globos publicitarios

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

Suplementos alimenticios

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>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="path/magnific-popup/magnific-popup.css">

</head>
<body>
<h2>Mostrar Imágenes Responsivas con Magnific Popup</h2>

<!-- 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>

</body>
</html>

Código funcional de como implementar la librería Magnific Popup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup | Simple Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="css/magnific-popup.css">

</head>
<body>

<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.">
<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
</a>

<!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></sc ript>

<!-- Magnific Popup archivo JS principal -->
<script src="js/jquery.magnific-popup.min.js"></script>

<!-- Código JS importante para el correcto funcionamiento Magnific Popup-->
<script>
$(document).ready(function() {

$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});

});
</script>

</body>
</html>

Saludos

Kiko

software residuos

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

Globos biodegradables

kikoabad
Usuario Novato
Usuario Novato
#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 

Globos publicitarios

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

Suplementos alimenticios

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>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="path/magnific-popup/magnific-popup.css">

</head>
<body>
<h2>Mostrar Imágenes Responsivas con Magnific Popup</h2>

<!-- 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>

</body>
</html>

Código funcional de como implementar la librería Magnific Popup

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimal-ui">
<title>Mostrar Imágenes Responsivas con Magnific Popup | Simple Popup</title>

<!-- Magnific Popup archivo CSS principal -->
<link rel="stylesheet" href="css/magnific-popup.css">

</head>
<body>

<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.">
<img src="http://farm9.staticflickr.com/8241/8589392310_7b6127e243_s.jpg" width="75" height="75">
</a>

<!-- Puedes usar cualquiera de estas dos librerías jQuery 1.7.2+ o Zepto.js 1.0+ -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></sc ript>

<!-- Magnific Popup archivo JS principal -->
<script src="js/jquery.magnific-popup.min.js"></script>

<!-- Código JS importante para el correcto funcionamiento Magnific Popup-->
<script>
$(document).ready(function() {

$('.image-popup-vertical-fit').magnificPopup({
type: 'image',
closeOnContentClick: true,
mainClass: 'mfp-img-mobile',
image: {
verticalFit: true
}
});

});
</script>

</body>
</html>

Saludos

Kiko

software residuos

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

Globos biodegradables

;)

Precio

AnteriorSiguienteArriba
Responder
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
TemaUsuariosRespuestasVisitasActividad
Ampliar imagen código
Por: , el 24/Oct/2023, 18:52
complementosnaturale0435Oct/23
¿Cual es el codigo para escribir sobre una imagen?
Por: , el 05/Oct/2003, 12:12
MaIcOl -ArgentinO- Electros User 479801 Jallander1146kOct/03