Zawartość wewnątrz ozdobnego pudełka musi być responsywna.

Question

Chciałbym stworzyć galerię, która znajduje się w ozdobnym pudełku, więc najpierw pobrałem całą zawartość galerii i dołączyłem do kontenera html.

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

Część 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; 
       }); 
     } 
    }); 

Zauważ, że mogę skonfigurować słuchacza w przycisku, które pokazują 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(); 
     } 
    }); 
} 

próbowano połączyć galleria.run gdy fancybox za afterShow wydarzenie; ale wciąż jest tak samo.

również dla CSS, to muszą być:

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

W przeciwnym razie nie można wygenerować galerię

Jak to naprawić?

referencyjny

Moja strona: http://internal001.zizsoft.com/be_pure/

(Podczas przewijania do dołu, nie ma rozsuwany pokazując Instagram zdjęcia, kliknij na zdjęcie, a zobaczysz galerię)

Wtyczka używane:

http://galleria.io/

http://fancyapps.com/fancybox/

Answer 1

jak inni wymienionych w commants wszystkie te wtyczki używasz reagują już. Kiedy odwiedzam twoją stronę, jeśli zmieniam rozmiar okna po otwarciu fancybox, jego rozmiar nie jest zmieniany zgodnie z definicją "responsywny". Myślałem, że o to się martwisz. Możesz wywołać to przez zmianę rozmiaru galerii na zdarzeniu zmiany rozmiaru okna. Proszę odnieść się do tego resize script for galleria, aby osiągnąć. Dzięki

Aktualizacja: (Podstawowe bloki kodu z określoną link)
aby ponownie zainicjować Galleria podczas zmiany rozmiaru okna.

Najpierw skonfigurować funkcję zmiany rozmiaru:

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

następnie powiązać go do okna zmiany rozmiaru zdarzenie:

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

To będzie zasadniczo ponownie zainicjować przez przeładowywania domyślny motyw. W tym przykładzie używam drugiego parametru, aby określić, który obraz ma zostać wyświetlony - w przeciwnym razie wyświetli on pierwszy obraz. Należy pamiętać, że może to spowodować inne wystąpienie Galerii. Uważam, że jest to błąd i opublikowany na ich forach.Możesz usunąć starsze instancje w następujący sposób:

var gcount = Galleria.get().length; 

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

Uruchom go po metodzie loadTheme. Użyj polecenia settimeout, aby je opóźnić, ponieważ ładowanie zajmuje trochę czasu. Używam 200ms. Brzydki, ale potrzebuję niektórych funkcji w Galerii. Mam nadzieję że to pomoże.

Answer 2

każda rzecz jest responsywna i działa dobrze. Rozwiąż swój problem.

jeśli chcesz, aby Twoje miniatury popup pojawi się w środku użytku podręcznego następujący kod

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

    } 



.galleria-image { 

    display: inline-block; 

    float: none !important; 

    } 

Answer 3

Okazało się, że przy użyciu javascript, aby obsłużyć, że pracował dla mnie najlepsza można mieć swój wzrost skrypt obliczenia i następnie zrobić coś takiego, gdzie inicjowany fancybox

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

można grać z fitToView i autoSize do ciebie uzyskać pożądany efekt podobny do pinteresta

Answer 4

możesz to zrobić za pomocą prostej sztuczki CSS.

na ekranie mediów reagującego trzeba ustawić css jak

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