Navigation Menu+

Resize desde el iframe de un shadowbox

Posted on Jul 25, 2011 in Technology | 0 comments

guess

Basado en este artículo: http://www.victorstanciu.ro/dynamically-resizing-the-shadowbox-js-modal-window/
Cómo cambiar el tamaño del overlay desde el mismo shadowbox iframe.

Abre la libreria shadowbox.js y aplícale formato. El http://jsbeautifier.org mencionado en el artículo me funcionó de maravillas.

Nota: Es importante revisar la libreria que tienes, en lugar de copiar y pegar el código, porque los nombres de las funciones que yo encontré fueron totalmente diferente. Así que depende mucho de la versión de shadowbox.

Busca la función:

    T.onWindowResize = function () {
        if (!m) {
            return
        }
        aB();
        var K = Q.player,
            S = ak(K.height, K.width);
        ar(S.width, S.left);
        ac(S.innerHeight, S.top);
        if (K.onWindowResize) {
            K.onWindowResize()
        }
    };

Está casi al final del documento. Copia esta función y pégala en el mismo shadowbox.js debajo de la original. Dale unos pequeños ajustes:

    T.dynamicResize = function (w,h) {
        if (!m) {
            return
        }
        aB();
       Q.player.width = w;
       Q.player.height = h;
        var K = Q.player,
            S = ak(K.height, K.width);
        ar(S.width, S.left);
        ac(S.innerHeight, S.top);
        if (K.onWindowResize) {
            K.onWindowResize()
        }
    };

Estas son las líneas modificadas:

  • T.dynamicResize = function (w,h) {
    El nombre de la función con los parámetros w (width/ancho), h (height/alto).
  • Q.player.width = w;
    Nueva línea, para asignar el nuevo valor del ancho.
  • Q.player.height = h;
    Nueva línea, para asignar el nuevo valor del alto.

Ahora sólo tienes que llamar a la nueva función desde el contenido del iframe de la siguiente manera:

window.parent.Shadowbox.skin.dynamicResize(200,100);

Reemplazando 200 y 100 por el nuevo ancho y alto, respectivamente.

Submit a Comment

Your email address will not be published. Required fields are marked *