फैंसी बॉक्स के अंदर सामग्री को उत्तरदायी होने की आवश्यकता है

Question

मैं एक फैंसी बॉक्स के अंदर एक गैलरी बनाना चाहता हूं, इसलिए सबसे पहले मैंने गैलरी की सभी सामग्री डाउनलोड की और एचटीएमएल कंटेनर में जोड़ा।

<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 घटना; लेकिन यह अभी भी वही है।

इसके अलावा सीएसएस के लिए, यह करने की आवश्यकता है: अन्यथा

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

, यह गैलरी

कि ठीक करने के लिए कैसे उत्पन्न नहीं कर सकते?

संदर्भ

मेरी साइट: http://internal001.zizsoft.com/be_pure/

(आप नीचे तक स्क्रॉल है, वहाँ instagram फोटो दिखाने में कोई स्लाइडर है, तस्वीर पर क्लिक करें और आप गैलरी देखेंगे)

प्लगइन प्रयोग किया है:

http://galleria.io/

http://fancyapps.com/fancybox/

Answer 1

commants में उल्लेख किया है दूसरों के रूप में निम्नलिखित अपने पॉपअप उपयोग के बीच में ही प्रकट हों उन सभी प्लग-इन का उपयोग कर रहे पहले से ही उत्तरदायी हैं। जब मैं आपकी साइट पर जाता हूं तो मैं फैंक्सबॉक्स खोलने के बाद विंडो का आकार बदलता हूं, जिसे "उत्तरदायी" के रूप में परिभाषित नहीं किया जाता है। मैंने सोचा कि यह वही है जिसके बारे में आप चिंता कर रहे हैं। आप विंडो आकार बदलने की घटना पर गैलेरिया का आकार बदलकर इसका आह्वान कर सकते हैं। प्राप्त करने के लिए कृपया 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 
}); 

यह अनिवार्य रूप से डिफ़ॉल्ट थीम पुन: लोड करके फिर से प्रारंभ हो जाएगा। इस उदाहरण में, मैं यह निर्दिष्ट करने के लिए कि कौन सी छवि दिखाना है, दूसरे पैरामीटर का उपयोग कर रहा हूं- अन्यथा यह पहली छवि प्रदर्शित करेगा। ध्यान रखें कि इससे गैलेरिया का एक और उदाहरण हो सकता है। मुझे विश्वास है कि यह एक बग होगा, और उनके मंचों पर पोस्ट किया गया।आप पुराने उदाहरणों को निम्नानुसार हटा सकते हैं:

var gcount = Galleria.get().length; 

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

लोडथीम विधि के बाद इसे चलाएं। इसे देरी करने के लिए सेटटाइम का उपयोग करें, क्योंकि लोडथीम को पूरा करने में कुछ समय लगता है। मैं 200ms का उपयोग करता हूं। बदसूरत, लेकिन मुझे गैलेरिया में कुछ विशेषताओं की आवश्यकता है। उम्मीद है की यह मदद करेगा।

Answer 2

हर चीज उत्तरदायी है और अच्छी काम करती है। अपनी समस्या का विस्तार करें।

अगर आप अपने पॉपअप थंबनेल कोड

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

    } 



.galleria-image { 

    display: inline-block; 

    float: none !important; 

    } 

Answer 3

मैंने पाया जावास्क्रिप्ट का उपयोग करने को संभालने के लिए है कि मेरे लिए सबसे अच्छा काम किया आप अपनी स्क्रिप्ट calculate ऊंचाई है और फिर इस जहां fancybox

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

प्रारंभ की तरह कुछ आप आप तक fitToView और AutoSize साथ खेल सकते हैं कर सकता है वांछित प्रभाव प्राप्त करें जैसे कि पिन रुचि

Answer 4

आप इसे सरल सीएसएस चाल के साथ कर सकते हैं।

उत्तरदायी मीडिया स्क्रीन में

आप के रूप में

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