टॉगल गैलेरिया पूर्ण स्क्रीन मोड

Question

किसी को भी जानता है Galleria

एक ही रास्ता मैं के बारे में सोच सकते हैं विषयों के बीच स्विच करने के लिए है में पूर्ण स्क्रीन और सामान्य मोड के बीच टॉगल करने के लिए कैसे मैं सोच रहा हूँ: डिफ़ॉल्ट रूप से, और पूर्ण स्क्रीन विषय (जो मैं वहां से खरीदा गया)

यदि आप एक बेहतर तरीका जानते हैं, तो मैं आपकी मदद की सराहना करता हूं।

Answer 1

मैं सिर्फ @ करने के लिए Ohgodwhy के जवाब जोड़ने के लिए जा रहा हूँ:

गैलेरिया उदाहरण मिलता है और का उपयोग एपीआई Galleria.ready समारोह का उपयोग करने के लिए है करने के लिए सबसे अच्छा तरीका है:

Galleria.ready(function() { 
    var gallery = this; // galleria is ready and the gallery is assigned 
    $('#fullscreen').click(function() { 
    gallery.toggleFullscreen(); // toggles the fullscreen 
    }); 
}); 

या, आप $.data वस्तु के माध्यम से उदाहरण का उपयोग कर सकते है, तो आप जानते हैं कि गैलरी आरंभ नहीं हो जाता:

$('#fullscreen').click(function() { 
    $('#galleria').data('galleria').toggleFullscreen(); // toggles the fullscreen 
}); 

मैं यह सोचते हैं रहा हूँ आप आईडी 'fullsc के साथ एक लिंक/बटन है रीन 'और गैलरी आईडी' गैलेरिया 'पर है।

Answer 2

गैलेरिया दस्तावेज़ीकरण से।

.enterFullscreen([callback]) 

यह गैलरी को पूर्णस्क्रीन मोड में सेट करेगा। यह अस्थायी रूप से कुछ दस्तावेज़ शैलियों में हेरफेर करेगा और ब्राउज़र स्क्रीन को कवर करने के लिए गैलरी को उड़ा देगा। ध्यान दें कि यह केवल ब्राउज़र विंडो को भर देगा, क्लाइंट स्क्रीन नहीं (जावास्क्रिप्ट ऐसा नहीं कर सकता)।

.toggleFullscreen([callback]) 

पूर्णस्क्रीन मोड को टॉगल करता है।

आप इनमें से उपयोग की किसी भी आगे स्पष्टीकरण की जरूरत है, पूछने के लिए संकोच नहीं करते कृपया।

Answer 3

यह काम करना चाहिए:

जे एस

Galleria.loadTheme('http://aino.github.com/galleria/demos/categories/themes/classic/galleria.classic.min.js'); 

$('#galleria').galleria(); 

Galleria.ready(function() { 
    var gallery = this; 
    this.addElement('fscr'); 
    this.appendChild('stage','fscr'); 
    var fscr = this.$('fscr') 
     .click(function() { 
      gallery.toggleFullscreen(); 
     }); 
    this.addIdleState(this.get('fscr'), { opacity:0 }); 
}); 

सीएसएस

.galleria-fscr{ 
    width:20px; 
    height:20px; 
    position:absolute; 
    bottom:0px; 
    right:10px; 
    background:url('fullscreen.png'); 
    z-index:4; 
    cursor: pointer; 
    opacity: .3; 
} 
.galleria-fscr:hover{ 
    opacity:1; 
} 

कहाँ fullscreen.png अपनी पसंद का एक उपयुक्त छवि है।

Answer 4

मैं उपयोग कर रहा हूँ:

lightbox: true,

Galleria.run() से पहले। यह आपको गैलरी में छवि पर क्लिक करने के बाद पूर्णस्क्रीन ओवरले प्रदर्शित करने की अनुमति देता है।

Answer 5

रिचर्ड का दृष्टिकोण बहुत अच्छी तरह से काम कर रहा है।

तुम भी इसके साथ-आउट तैयार समारोह गैलेरिया बढ़ा कर कर सकता है:

जे एस

Galleria.run('.galleria', { 

    // configure 
    autoplay: true, 
    lightbox: true, 
    idleMode: true, 

    // extend theme 
    extend: function() { 
     var gallery = this; // "this" is the gallery instance 

     //fullscreen button 
     this.addElement('fscr'); 
     this.appendChild('stage','fscr'); 
     var fscr = this.$('fscr').click(function() { 
      gallery.toggleFullscreen(); 
     }); 

     // this.addIdleState(this.get('fscr'), { opacity:0 }); 
    } 
    });` 

और आप अधिकतम आइकन के लिए एक FontAwesome चिह्न का उपयोग करना चाहते हैं तो आप कर सकते हैं निम्नलिखित के रूप में इसे लागू (अन्य सीएसएस शैलियों रिचर्ड की पोस्ट देखें):

सीएसएस

.galleria-fscr:before { 
     content: "\f065"; /* char code for fa-expand */ 
     position: absolute; 
     font-family: FontAwesome; 
     color: #fff; 
    } 

(ध्यान में रखना <link rel="stylesheet" href="css/font-awesome.min.css"> साथ FontAwesome की शैली पत्रक शामिल करने के लिए)

मैं अभी भी बड़ा करें बटन के साथ एक समस्या हो रही है। अगर मैं इसके ऊपर घूम रहा हूं, तो यह सफेद नहीं होता है और भूरे रंग में रहता है। शायद आईडीईई राज्य के साथ कुछ गलत है, लेकिन मुझे अभी तक कोई समाधान नहीं मिला है। (यदि मैं this.addIdleState(...) होवरिंग कार्यों के साथ कोड लाइन हटा देता हूं। मुझे यहां और अधिक परीक्षण करने की आवश्यकता है।)

स्क्रीन पूर्ण स्क्रीन पर होने के बाद मैं आइकन को अधिकतम करने के लिए आइकन को अधिकतम से भी बदलना चाहता हूं, लेकिन मैं अभी तक यह नहीं करना है। यह मेरी todo सूची पर भी है।

अद्यतन 07.02.2014

मैं पता लगा इन दोनों मुद्दों को हल करने के लिए कैसे:

• "निष्क्रिय अवस्था" मुद्दे के लिए - मैं निष्क्रिय अवस्था हटा दिया है। क्योंकि मुझे परवाह नहीं है कि ये नियंत्रण स्थायी रूप से वहां हैं और अब अपेक्षित कार्यों को होवर करते हैं। शायद मैं बाद में एक और समाधान की जांच करें।

• क्लिक पर एक आइकन को बदलने के लिए आप के साथ सीएसएस और jQuery यह कर सकते हैं:

  1. अपने सीएसएस में अधिकतम आइकन के फिल्टर से पहले पहले नीचे एक अधिभावी CSS नियम जोड़ें जैसे:

     .galleria-fscr.minimize:before{ 
         content: "\f066"; 
     } 
     

  2. जोड़े इन जे एस लाइन gallery.toggleFullscreen() के बाद - कि शैली और मील से पहले सामान्य के बीच हर क्लिक के साथ आइकन टॉगल nimize से पहले शैली:

     $(".galleria-fscr").toggleClass("minimize"); 
     

यह एक नाटक/फिर से शुरू बटन के लिए भी काम करता है (कोड के बाकी फुलस्क्रीन कोड को simillar है):

जे एस

... 
    gallery.playToggle(); 
    $('.galleria-pauseResumeBtn').toggleClass("resume");