5

Saludos...

La clase "Material box" del FW Materialize permite al usuario hacer clic en una imagen para centrarla y ampliarla. Para salir del efecto, el usuario puede hacer clic en la imagen de nuevo, hacer scroll hacia afuera, o presionar la tecla ESC.

Pretendo asociar este comportamiento a un link para ampliar una imagen oculta.

Imagen oculta con la La clase materialboxed:

<img id="img1" class="hide materialboxed" src="images/img1.jpg">

Enlace:

<a href="#!" id="linkImg1" onclick="document.getElementById('img1').classList.remove('hide'); document.getElementById('img1').click();">Imagen 1</a>

Funciona bien. Pero al regresar al estado inicial, haciendo clic o con ESC, se debe ocultar nuevamente la imagen agregando la clase "hide" o "display:hidden". Por ejemplo:

document.getElementById('img1').classList.add('hide');

Regresar al estado inicial de la imagen es un evento diferente al clic en el enlace. Sucede sobre la imagen ampliada. Debe hacerse al ocurrir la función returnToOriginal() dentro de la propiedad materialbox del objeto fn creado en el archivo materialize.js.

¿Alguna pista?

No puedo "escuchar" en todo el documento porque hay imágenes "materialboxed" que no deben ocultarse. ¿Cómo puedo "escuchar" que sucede returnToOriginal() específicamente en la imagen que debe ocultarse de nuevo.

2 respuestas 2

0

El comportamiento que estás planteando es demasiado dependiente de la implementación de Materialize. Y pareciera ser que ellos no desarrollaron teniendo en cuenta ese escenario (Agregar una acción al evento de cierre o brindar posibilidad de pasar un callback a un evento de cierre).

Es cierto que podría usarse la función returnToOriginal, pero no hay forma decente de obtener acceso a la misma, mucho menos modificarla.


La forma más simple de lograr lo que buscas, se siente un poco Hacky, pero se puede simular pasando un width con un valor muy pequeño (Pero no demasiado). Por ejemplo:

HTML:

<img id="img1" class="materialboxed" src="images/img1.jpg" width="0.2">
<a href="#!" id="linkImg1" onclick="document.getElementById('img1').click();">Imagen 1</a>

De esta forma el elemento no llega a verse en pantalla, el enlace funciona para despertar el efecto, y Materialize continúa manejando su cierre.


Otra forma de lograr lo mismo, se siente mucho más Hacky y es bastante más compleja. Pero sería usando javascript principalmente. Algo rápido podría ser:

Primero, mantener una referencia a la imagen actualmente abierta (Cuando hago click en un enlace). Guardada en elementoAbiertoActualmente en este ejemplo. Segundo, al tener referencia a la imagen activa, puedo saber cual cerrar/ocultar. No sobreescribo la acción de Materialize, sino que dejo que se complete la animación (A los 200ms actualmente), oculto el elemento y destruyo la referencia ya que la imagen no estaría actualmente activa.

let elementoAbiertoActualmente;

function abrirElemento(selector) {
  elementoAbiertoActualmente = document.getElementById(selector);
  elementoAbiertoActualmente.classList.remove('hide');
  elementoAbiertoActualmente.click();
}

function cerrarElemento() {
  if (elementoAbiertoActualmente) {
    let aCerrar = elementoAbiertoActualmente;
    setTimeout(function() {
      aCerrar.classList.add('hide');
    }, 200);
    elementoAbiertoActualmente = null;
  }
}

Teniendo la lógica base, hay que preparar los elementos HTML para esta solución:

<img id="img1" class="hide materialboxed" src="images/img1.jpg" width="1">
<a href="#!" id="linkImg1" onclick="abrirElemento('img1');">Imagen 1</a>

Y por último, manejar los mismos eventos que describiste para el cierre; click, scroll y tecla escape. Algo minimamente funcional:

$(document).keyup(function(e) {
  if (e.keyCode === 27) {
    cerrarElemento();
  }
});
$(window).scroll(function() {
  if (ultimoElemento) {
    cerrarElemento();
  }
});
$(document).click(function(e) {
  if (ultimoElemento && e.target.tagName == "DIV") {
    cerrarElemento();
  }
});

Con esto ya se puede realizar el mismo comportamiento. En esta situación, mientras más pequeño el width que tenga el elemento img, más agradable será a la vista.

Sino, otra forma de lograr lo mismo, es la más obvia; abandonar Materialize para este caso en particular, e implementar manualmente ese efecto por css y js, ya teniendo control total del mismo.

1
  • Se aplicó esta idea. Imagen muy pequeña (sí, algo Hacky, pero muy usado): <img id="img1" class="hide materialboxed responsive-img" src="images/img1.jpg" width="1"> Link que remueve la clase hide a la imagen materialboxed y llama su evento click para expandirla: <a href="#!" onclick="document.getElementById('img1').classList.remove('hide'); document.getElementById('img1').click();">Imagen 1</a> el 17 oct. 2018 a las 11:48
0

Hola buenas tardes que tal?. Bueno creo que más o menos lo entiendo, asi que intentaré guiarte ya que no tengo la aplicación que estás utilizando para algo en directo.

Veo que has eliminado la clase 'hide', ¿por qué no cambias el estilo en línea de la imagen que vas a sacar en lugar de eliminar su clase? Así podrías al cerrar la imagen, retornarle ese estilo CSS que le cambiamos. Ejemplo:

<a href="#!" id="linkImg1" onclick="document.getElementById('img1').style.display = 'inline'; document.getElementById('img1').click();">Imagen 1</a>

Y al cerrar habría que añadir a la función, que le de su estilo anterior.

document.getElementById('img1').style.display = 'none';

Con ésto (siempre que la clase 'hide' sea un mero ocultamiento) no necesitas eliminar su clase para que aparezca. Puede que no sea 'display', tendrás que comprobar si es opacidad, u otros.

Edito a partir de aquí, espero que te sirva para que puedas probar en base a vuestra página web. Un saludo

He creado un estilo nuevo, sólo para mantenerlo oculto y no depender de la original, que sólo hace eso.

.hide-new {            
    display: none;
}

El HTML, la imagen dentro de un DIV con esa clase nueva.

<div id="div1" class="hide-new">
    <img id="img1" class="materialboxed" width="250" src="http://th01.deviantart.net/fs70/PRE/i/2013/126/1/e/nature_portrait_by_pw_fotografie-d63tx0n.jpg">
</div> 

Y finalmente el código.

$(document).ready(function () {
        var imgContainer = $('.material-placeholder');
        var imagen = $('#img1');
        var link = document.getElementById('linkImg1');

        //Función de retorno que oculta la imagen animando una opacidad y removiendo el id asignado en la otra función.
        var quitaClase = function () {
            imagen.animate({ opacity: 0 }, {duration: 0});             
            setTimeout(function () {
                $('#div1').addClass('hide-new');
            }, 250);
            imgContainer.removeAttr('id');
            quitaClase = null;
        }

        //Función que elimina la clase, activa el evento click y da un atributo nuevo al div para poder cerrarla.
        var cambioClase = function () {
            $('#div1').removeClass('hide-new');
            document.getElementById('img1').click();
            imgContainer.attr('id', 'new-click');                
            document.getElementById('new-click').addEventListener('click', quitaClase, false);
        }
        //Si quieres que también se active en la imagen, hay que agregarla

        link.addEventListener('click', cambioClase, false);

        //Cierre de la imagen con la tecla ESC
        $(document).keyup(function (e) {
            if (e.keyCode === 27 && imagen.hasClass('active')) {
                quitaClase();
            }
        });
    });

Como observarás, es 'demasiado' y difícil de controlar cuando tienes la opción de añadir algo al original. Espero que al menos algo te oriente. Un saludo!.

8
  • Funciona ampliar la imagen de muchas formas: style.display style.visibility clasList className Indicas: "Y al cerrar habría que añadir a la función que le de su estilo anterior" document.getElementById('img1').style.display = 'none'; Pero materialize.js gobierna todo el sitio, y no solo a esta implementación de usuario. No queremos tocar la función original del FW. Lo hacemos con una función de usuario, asociada a esta imagen particular. ¿Cómo detectar el "cerrar" que indicas, asociado a una img material boxed que quiero ocultar en su retorno? @Qadesh el 25 feb. 2017 a las 21:27
  • Si no tenéis intención de tocar el código original, entonces vamos a dividir el trabajo en dos partes. La apertura y el cierre. (sigo editando....)
    – Qadesh
    el 25 feb. 2017 a las 21:48
  • Estoy haciendo una demostración con esa librería para que lo veas más claro, pero si o si, tendrás que añadir algo de código en un <script> aunque sea al final de vuestra página HTML. Dame un momento por favor. ¿Tenéis Jquery cargado en vuestra página web?
    – Qadesh
    el 25 feb. 2017 a las 22:10
  • Correcto @Qadesh. Apertura funcionando onclick del enlace. Falta ocultar nuevamente la imagen al cerrar. Uso JQuery y ya está agregado mi script al final: <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" src="js/materialize.js"></script> <script type="text/javascript" src="js/prueba.js"></script> <!-- Mi script --> En mi script quiero "escuchar" el clic o la tecla ESC con la imagen ampliada (la img asociada al enlace). Trataré de subir mi prueba. Sorry. No me sale el salto de línea <br/> en los comentarios. el 25 feb. 2017 a las 23:42
  • Hola de nuevo. Te comento que no he podido dar con ello del todo. Sólo he podido hacer que suceda una vez añadiendo una eventlistener al placeholder e img, etc. Pero al cerrar la imagen y volver a su sitio oculta, si queremos de nuevo hacer click, lo lee como un doble click y se oculta de nuevo al reaparecer la clase hide. Lo mismo sucede usando estilos en línea. No he podido averiguar nada más, y es añadir código innecesariamente, ya que con poner 2 líneas en el original, suplimos todas las carencias. Si en cualquier caso quieres ver mi código, avisame y te lo pongo.
    – Qadesh
    el 26 feb. 2017 a las 15:13

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.