花式框內的內容需要有響應

我想創建一個花式框內的畫廊，所以首先我下載了畫廊的所有內容並附加到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; 
       }); 
     } 
    });

請注意，我設置了監聽器在顯示的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(); 
     } 
    }); 
}

試圖調用galleria.run時的fancybox的afterShow事件;但它仍然是一樣的。

而且對CSS，它必須是：

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

否則，就無法生成畫廊

如何解決呢？

參考

我的網站： http://internal001.zizsoft.com/be_pure/

（當您滾動至底部，有顯示的Instagram照片滑塊，點擊照片，你會看到畫廊）

插件使用：

http://galleria.io/

http://fancyapps.com/fancybox/

來源

2015-10-06 user782104

花式盒看起來響應我。請詳細說明您所面對的具體問題。 –

它可能爲你把它放進小提琴嗎？ – vijayP

你有沒有嘗試給百分比寬度和高度？ – Rakshith

正如commants提到的其他所有那些你正在使用的插件響應了。當我訪問你的網站時，如果我調整窗口大小後打開fancybox它沒有調整大小定義爲「響應」。我認爲這是你所擔心的。您可以在窗口大小調整事件中通過調整大小環球免稅店來調用此功能。請參考resize script for galleria來實現。感謝

更新：（來自稱爲鏈路基本代碼塊）
與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 
});

通過重新加載默認的主題這將基本上是重新初始化。在這個例子中，我使用第二個參數來指定要顯示的圖像 - 否則它將顯示第一個圖像。請注意，這可能會導致另一個Galleria實例。我相信這是一個錯誤，併發布在他們的論壇上。您可以按如下方式刪除較舊的實例：

var gcount = Galleria.get().length; 

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

在loadTheme方法後運行它。使用settimeout來延遲它，因爲loadTheme需要一些時間才能完成。我用200ms。醜，但我需要一些在Galleria的功能。希望這可以幫助。

來源

2015-10-16 15:19:19

每件事情都很敏感，並且運作良好。闡述你的問題。

，如果你希望你的彈出縮略圖顯示在您的彈出使用的中間下面的代碼

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

    } 



.galleria-image { 

    display: inline-block; 

    float: none !important; 

    }

來源

2015-10-14 13:13:23

我發現，使用JavaScript來處理這個工作最適合我的，你可以有你的腳本計算的高度，然後做這樣的事情，你初始化的fancybox

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

你可以fitToView和autoSize的發揮，直到你獲得期望的效果，就像pinterest

來源

2015-10-18 10:21:29 RiaanV

你可以用一個簡單的CSS技巧做到這一點。

在響應媒體屏幕

你要設置的CSS爲

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

來源

2015-10-19 15:38:23

花式框內的內容需要有響應

回答

相關問題