ファンシーボックス内のコンテンツは応答する必要があります

Question

ファンシーボックス内のギャラリーを作成したいので、最初にギャラリーのすべてのコンテンツをダウンロードしてhtmlコンテナに追加しました。

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

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

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

fancyboxを示し、私はボタンにリスナーを設定お知らせgalleria.run fancyboxのafterShowイベントを呼び出そうとしました。それはまだ同じです。

またCSSのために、それはする必要があります

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

をそれ以外の場合は、これを修正する方法ギャラリー

を生成することはできませんか？

リファレンス

マイサイト： http://internal001.zizsoft.com/be_pure/

（あなたが一番下までスクロールすると、Instagramの写真を示すスライダーがあり、写真をクリックして、ギャラリーが表示されます）

プラグイン使用：

http://galleria.io/

http://fancyapps.com/fancybox/

Answer 1

を使用し、あなたのポップアップの真ん中に表示されたい場合は、既に応答性です。私があなたのサイトにアクセスするとき、私はfancyboxを開いた後にウィンドウのサイズを変更します。私はこれがあなたが心配しているものだと思った。これは、ウィンドウのサイズ変更イベントで、サイズ変更ガレリアで呼び出すことができます。これを達成するにはresize script for galleriaを参照してください。おかげ

更新：（言及リンクからエッセンシャルコードブ​​ロック）
ウィンドウのサイズを変更しながら再初期化ガレリアへ。そして、イベントのサイズを変更するウィンドウにバインド

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

：

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

これは、基本的にデフォルトのテーマを再ロードすることによって再初期化されます

まず、サイズ変更機能を設定します。この例では、2番目のパラメータを使用して表示する画像を指定しています。そうでない場合は、最初の画像が表示されます。これがGalleriaの別のインスタンスを引き起こす可能性があることに注意してください。これはバグだと思ってフォーラムに投稿しました。古いインスタンスは次のように削除できます。

var gcount = Galleria.get().length; 

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

loadThemeメソッドの後で実行します。 loadThemeは完了するまでに時間がかかるので、settimeoutを使用して遅延させてください。私は200msを使う。醜いですが、私はギャラリアのいくつかの機能が必要です。お役に立てれば。

Answer 2

すべてのものが応答性があり、良好に動作します。あなたの問題を詳述してください。

あなたのポップアップサムネイルがcommants使用しているすべてのそれらのプラグインで述べた他の人のよう次のコード

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

    } 



.galleria-image { 

    display: inline-block; 

    float: none !important; 

    } 

Answer 3

私はそれが私のために最高の仕事を処理するためにJavaScriptを使用して、あなたのスクリプトの計算高さを持っているし、次にあなたがfancybox

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

を初期化したところ、あなたまでfitToViewとは、autoSizeで遊ぶことができ、このような何かを行うことがわかっpinterestのような効果を得ることができます。

Answer 4

シンプルなCSSトリックでこれを行うことができます。応答メディア画面で

あなたは

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