contenuto all'interno casella di fantasia ha bisogno di essere reattivo

Question

vorrei creare una galleria che si trova all'interno di una casella di fantasia, quindi in primo luogo ho scaricato tutto il contenuto della galleria e aggiunto al contenitore 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; 
       }); 
     } 
    }); 

Si noti che ho creato l'ascoltatore nel pulsante che mostrano il 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(); 
     } 
    }); 
} 

tentato di chiamare galleria.run quando afterShow evento di fancybox; ma è sempre lo stesso.

anche per i CSS, è necessario essere:

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

In caso contrario, non può generare la galleria

Come risolvere questo?

Riferimento

Il mio sito internet: http://internal001.zizsoft.com/be_pure/

(quando si scorre verso il basso, v'è un dispositivo di scorrimento che mostra foto Instagram, fare clic sulla foto vedrete la galleria)

Il plugin utilizzato:

http://galleria.io/

http://fancyapps.com/fancybox/

Answer 1

Come altri hanno detto nelle commants dopo tutti quei plugin che si sta utilizzando sono sensibili già. Quando visito il tuo sito se ridimensiono la finestra dopo aver aperto la fancybox non è ridimensionata come definita come "reattiva". Ho pensato che questo è ciò che ti preoccupa. Puoi richiamarlo ridimensionando galleria sull'evento di ridimensionamento della finestra. Si prega di fare riferimento a questo resize script for galleria per raggiungere. Grazie

Aggiornamento: (blocchi di codice essenziale dal legame di cui)
di ri-inizializzare il Galleria, mentre la finestra di ridimensionamento.

In primo luogo, impostare la funzione di ridimensionamento:

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 }); 
} 

quindi associare alla finestra ridimensionare evento:

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

Ciò essenzialmente reinizializzare ricaricando il tema di default. In questo esempio, sto usando il secondo parametro per specificare quale immagine mostrare, altrimenti visualizzerà la prima immagine. Tieni presente che ciò potrebbe causare un'altra istanza di Galleria. Credo che questo sia un bug e pubblicato sui loro forum.È possibile rimuovere le istanze precedenti come segue:

var gcount = Galleria.get().length; 

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

Eseguirlo dopo il metodo loadTema. Usa settimeout per ritardarlo, perché loadTheme richiede un po 'di tempo per essere completato. Io uso 200ms. Brutto, ma ho bisogno di alcune delle funzionalità in Galleria. Spero che questo ti aiuti.

Answer 2

ogni cosa è reattiva e funziona bene. Elabora il tuo problema.

se si desidera che le miniature popup appaiono in mezzo per l'utilizzo da popup il codice

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

    } 



.galleria-image { 

    display: inline-block; 

    float: none !important; 

    } 

Answer 3

ho trovato che utilizzando il javascript per gestire che ha funzionato meglio per me si potrebbe avere la tua altezza sceneggiatura calcolare e poi fare qualcosa come questo in cui è stata inizializzata fancybox

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

si può giocare con fitToView e autoSize fino a ottenere l'effetto desiderato molto come pinterest

Answer 4

si può fare questo con un semplice trucco css.

nella schermata di supporto reattivo si devono impostare il css come

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