javascript - receptividad - El contenido dentro de la caja elegante necesita ser receptivo

receptividad psicologia

Question

Me gustaría crear una galería que esté dentro de una caja elegante, así que primero descargué todo el contenido de la galería y lo anexé al contenedor html.

<div id="popup" style="display:none;"><div class="galleria"></div></div>

La parte jquery

$("#hidden_content").instagram({
        clientId: blockInstaSettings.clientId
        , hash: hash
        , userId: blockInstaSettings.userId
        , next_url: insta_next_url
        , show: 10
        , image_size: image_size
        , onComplete: function (photos, data) {
            var album_html = "";

            $.each(photos, function( index, val ) {
                album_html += "<img src=''" + val.images.standard_resolution.url + "'' data-title='''' data-description=''" + val.caption.text.replace("''","&rsquo;") + "'' longdesc=''" + val.link + "''>";
            });

            $(".galleria").html(album_html);

                $(''#block_instagram'').on(''click'', function () {
                    openPop();
                    return false;
                });
        }
    });

Observe que configuré el oyente en el botón que muestra el fancybox

function openPop(){
    $.fancybox({
         ''autoScale'': true,
         ''transitionIn'': ''elastic'',
         ''transitionOut'': ''elastic'',
         ''speedIn'': 500,
         ''speedOut'': 300,
         ''autoDimensions'': true,
         ''centerOnScroll'': true,
         ''href'' : ''#popup''
    });

    Galleria.run(''.galleria'', {
        transition: ''fade'',
        popupLinks: true,
        show: no,
        extend: function(options) {
            Galleria.get(0).$(''info-link'').click();
        }
    });
}

Intenté llamar a galleria.run cuando el evento afterShow de afterShow ; pero sigue siendo el mismo

También para CSS, debe ser:

.galleria{
    width:700px;
    height:500px;
}

De lo contrario, no puede generar la galería

¿Cómo arreglar eso?

Referencia

Mi sitio: http://internal001.zizsoft.com/be_pure/

(Cuando se desplaza hacia abajo, hay un control deslizante que muestra fotos de instagram, haga clic en la foto y verá la galería)

El complemento utilizado:

http://galleria.io/

http://fancyapps.com/fancybox/

Answer 1

todo es receptivo y funciona bien. Elabora tu problema

si desea que sus miniaturas emergentes aparezcan en medio de su ventana emergente, use el siguiente código

.galleria-thumbnails {
text-align: center;
width: 100% !important;

    }



.galleria-image {

    display: inline-block;

    float: none !important;

    }

Answer 2

Descubrí que al usar el javascript que mejor funcionaba para mí, podía hacer que su script calculara la altura y luego hacer algo como esto donde inicializó fancybox

fitToView : true,
autoSize  : true,
width     : 100%,
height    : ''auto'',

puedes jugar con fitToView y autoSize hasta que obtienes el efecto deseado como pinterest

Answer 3

puedes hacer esto con un simple truco de CSS.

en la pantalla de medios receptivos, debe configurar el css como

.tp-simpleresponsive .slotholder *, .tp-simpleresponsive img { background-size: 100% auto !important; }

Answer 4

Como otros mencionaron en los comandos, todos los complementos que estás usando ya son receptivos. Cuando visito su sitio, si cambio el tamaño de la ventana después de abrir el fancybox, no cambia de tamaño, como se define como "receptivo". Pensé que esto es por lo que te estás preocupando. Puede invocar esto por resize galleria en el evento de cambio de tamaño de la ventana. Por favor refiérase a este script de cambio de tamaño para galleria . Gracias

Actualización: (Bloques de código esenciales del enlace referido)
reiniciar la galería mientras cambia el tamaño de la ventana.

Primero, configure la función de cambio de tamaño:

function ResizeGallery() {
     gWidth = $(window).width();
     gHeight = $(window).height();
     gWidth = gWidth - ((gWidth > 200) ? 100 : 0);
     gHeight = gHeight - ((gHeight > 100) ? 50 : 0);
     $("#gallerycontainer").width(gWidth);
     $("#gallery").width(gWidth);
     $("#gallery").height(gHeight);
     // Reload theme
     Galleria.loadTheme(''js/galleria/themes/classic/galleria.classic.js'', { show: curIdx });
}

A continuación, vincúlelo al evento de cambio de tamaño de la ventana:

var TO = false;
$(window).resize(function () {
    if (TO !== false)
        clearTimeout(TO);
    TO = setTimeout(ResizeGallery, 200); //200 is time in miliseconds
});

Esto esencialmente se reinicializará al volver a cargar el tema predeterminado. En este ejemplo, estoy usando el segundo parámetro para especificar qué imagen mostrar; de lo contrario, se mostrará la primera imagen. Tenga en cuenta que esto puede causar otra instancia de Galleria. Creo que esto es un error y publicado en sus foros. Puede eliminar las instancias anteriores de la siguiente manera:

var gcount = Galleria.get().length;

if (gcount > 1) {
   Galleria.get().splice(0, gcount - 1);
}

Ejecútelo después del método loadTheme. Use settimeout para retrasarlo, porque loadTheme tarda un tiempo en completarse. Yo uso 200ms. Feo, pero necesito algunas de las características en Galleria. Espero que esto ayude.