गामा गैलरी - महान उत्तरदायी गैलरी

उत्तरदायी डिजाइन के लिए फोटो गैलरी बनाना कोई आसान काम नहीं है। विभिन्न उपकरणों की स्क्रीन पर प्रदर्शन को ध्यान में रखा जाना चाहिए, जबकि मोबाइल उपकरणों पर बहुत सारे ग्राफिक्स लोड नहीं कर रहे हैं। एक अच्छा समाधान गामा गैलरी है, यह बहुत अच्छा लग रहा है।



प्रदर्शन | स्रोत कोड

गैलरी विकसित करते समय, निम्नलिखित उपकरणों का उपयोग किया गया था:

• ग्रिड के लिए jQuery चिनाई
• स्लाइड शो के लिए PageVisibility API
• url () : सरल जावास्क्रिप्ट पार्सर url
• HTML5 इतिहास / राज्य एपीआई का समर्थन करने के लिए History.js
• jQuery ++ और Modernizr

सभी आकारों की छवियां मुख्य HTML निर्माण में तुरंत घोषित की जाती हैं, लेकिन स्क्रीन आकार के आधार पर केवल एक लोड किया जाता है:

<div class="gamma-container gamma-loading" id="gamma-container"> <ul class="gamma-gallery"> <li> <div data-alt="img01" data-description="<h3>Assemblage</h3>" data-max-width="1800" data-max-height="2400"> <div data-src="images/xxxlarge/1.jpg" data-min-width="1300"></div> <div data-src="images/xxlarge/1.jpg" data-min-width="1000"></div> <div data-src="images/xlarge/1.jpg" data-min-width="700"></div> <div data-src="images/large/1.jpg" data-min-width="300"></div> <div data-src="images/medium/1.jpg" data-min-width="200"></div> <div data-src="images/small/1.jpg" data-min-width="140"></div> <div data-src="images/xsmall/1.jpg"></div> <noscript> <img src="images/xsmall/1.jpg" alt="img01"/> </noscript> </div> </li> <li> <!-- ... --> </li> <!-- ... --> </ul> <div class="gamma-overlay"></div> </div> 

प्लगइन सेटिंग्स:

 // default value for masonry column count columns : 4, // transition properties for the images in ms (transition to/from singleview) speed : 300, easing : 'ease', // if set to true the overlay's opacity will animate (transition to/from singleview) overlayAnimated : true, // if true, the navigate next function is called when the image (singleview) is clicked nextOnClickImage : true, // circular navigation circular : true, // transition settings for the image in the single view. // These include: // - adjusting its position and size when the window is resized // - fading out the image when navigating svImageTransitionSpeedFade : 300, svImageTransitionEasingFade : 'ease-in-out', svImageTransitionSpeedResize : 300, svImageTransitionEasingResize : 'ease-in-out', svMarginsVH : { vertical : 140, horizontal : 120 }, // allow keybord and swipe navigation keyboard : true, swipe : true, // slideshow interval (ms) interval : 4000, // if History API is not supported this value will turn false historyapi : true 

गैलरी आरंभीकरण, निर्धारित करता है कि कुछ स्क्रीन पर कितने कॉलम प्रदर्शित किए जाएंगे:

 <script type="text/javascript"> $(function() { var GammaSettings = { // order is important! viewport : [ { width : 1200, columns : 5 }, { width : 900, columns : 4 }, { width : 500, columns : 3 }, { width : 320, columns : 2 }, { width : 0, columns : 2 } ] }; Gamma.init( GammaSettings ); }); </script> 

वर्तमान में प्लगइन की प्रयोगात्मक स्थिति है, लेकिन यह काफी महत्वपूर्ण रूप से काम करता है, इसलिए इसे लाइव साइटों पर उपयोग करना काफी संभव है। गैलरी के लेखक tympanus.net हैं ।