Inhalt in ausgefallener Box muss reagieren

Question

Ich möchte eine Galerie erstellen, die in einer schicken Box ist, also habe ich zuerst den gesamten Inhalt der Galerie heruntergeladen und an den HTML-Container angehängt.

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

Der jquery Teil

$("#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; 
       }); 
     } 
    }); 

Beachten Sie, dass ich den Hörer in den Knopf, der die 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(); 
     } 
    }); 
} 

Versuchte galleria.run wenn afterShow Veranstaltung fancybox zu rufen zeigen einzurichten; aber es ist immer noch dasselbe.

Auch für CSS, muss es sein:

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

Andernfalls kann es nicht die Galerie erzeugen

Wie das beheben?

Referenz

Meine Website: http://internal001.zizsoft.com/be_pure/

(Wenn Sie nach unten scrollen, es ist ein Slider-Fotos instagram, klicken Sie auf das Foto zeigt, und Sie werden die Galerie sehen)

Das Plugin verwendet:

http://galleria.io/

http://fancyapps.com/fancybox/

Answer 1

Wie andere in den commants erwähnt all diese Plugins, die Sie verwenden, sind bereits ansprechbar. Wenn ich Ihre Seite besuche, wenn ich die Größe des Fensters nach dem Öffnen der Fancybox ändere, wird seine Größe nicht so geändert, wie es "responsive" definiert ist. Ich dachte, das ist es, worüber du dich Sorgen machst. Sie können dies aufrufen, indem Sie die Größe der Galleria beim Fenstergrößenänderungsereignis ändern. Bitte beachten Sie diese resize script for galleria zu erreichen. Dank

Update: (Essential Codeblocks aus dem genannten Link)
auf die galleria, während Fenster Resize neu zu initialisieren.

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

Dann binden sie an die Fenstergröße ändern Ereignis: durch erneutes Laden der Standard-Theme

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

Dies wird im Wesentlichen neu initialisieren

zuerst die Formatfunktion einrichten. In diesem Beispiel verwende ich den zweiten Parameter, um anzugeben, welches Bild angezeigt werden soll. Andernfalls wird das erste Bild angezeigt. Beachten Sie, dass dies eine andere Instanz von Galleria verursachen kann. Ich glaube, dass dies ein Fehler ist, und in ihren Foren gepostet.Sie können die älteren Instanzen wie folgt entfernen:

Führen Sie es nach der LoadTheme-Methode. Verwenden Sie settimeout, um es zu verzögern, da loadTheme einige Zeit benötigt. Ich benutze 200ms. Hässlich, aber ich brauche ein paar Features in Galleria. Hoffe das hilft.

Answer 2

alles reagiert und funktioniert gut. Mach dein Problem aus.

, wenn Sie Ihre Popup-Thumbnails in Mitte des Popup-Code verwenden die folgende angezeigt werden soll

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

    } 



.galleria-image { 

    display: inline-block; 

    float: none !important; 

    } 

Answer 3

Ich fand, dass die mit Hilfe von Javascript, die am besten für mich gearbeitet zu handhaben Sie Ihr Skript berechnen Höhe haben könnte und dann so etwas tun, wo Sie fancybox initialisiert

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

Sie mit fitToView und autosize, bis Sie spielen Holen Sie sich den gewünschten Effekt ähnlich wie pinterest

Answer 4

können Sie dies mit einem einfachen css-Trick tun.

in dem ansprechenden Medien Bildschirm haben Sie die CSS als

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