ऑटो-ग्रुपिंग के साथ नई jQuery के अनुकूली गैलरी प्लगइन

Tympanus.net एक नया प्रयोगात्मक jQuery गैलरी प्लगइन प्रस्तुत करता है, जिसका उपयोग विभिन्न समस्याओं को हल करने के लिए किया जा सकता है, उदाहरण के लिए, एक छवि को निश्चित रूप से समूहीकृत करना या पृष्ठ को फिर से लोड किए बिना फ़ोटो के साथ पूरे उपयोगकर्ता एल्बम प्रदर्शित करना। बेशक, गैलरी अनुकूली है, जो इसे बड़े स्क्रीन वाले कंप्यूटर और मोबाइल डिवाइस दोनों पर उपयोग करने के लिए सुविधाजनक बनाती है।

डेटा- * विशेषता का उपयोग करके स्वचालित रूप से प्लगइन, छवियों के थंबनेल को किसी प्रकार के पैक (स्टैक) में समूहित करता है। जब उपयोगकर्ता उस पर क्लिक करता है, तो छवि कुछ दिशाओं में अलग-अलग दिशाओं में बिखर जाती है। उन्हें थोड़ा घुमाया या ऑफसेट किया जा सकता है।

आउटपुट के लिए उपयोग की जाने वाली जाली अनुकूली है। जैसे-जैसे स्क्रीन रिज़ॉल्यूशन कम होता जाता है, टेबल तत्वों को फिर से बनाया जाता है और कॉलम की संख्या घटती जाती है।

ब्राउज़र समर्थन खराब नहीं है, बस ध्यान रखें कि CSS रूपांतरण केवल उन ब्राउज़र में काम करते हैं जो उनका समर्थन करते हैं। बाकी के लिए, थोड़ा एनीमेशन है।

उदाहरण का उपयोग करें

सबसे पहले आपको tp-grid वर्ग के साथ एक अनियंत्रित सूची बनाने की आवश्यकता है:

<ul id="tp-grid" class="tp-grid"> <li data-pile="Group 1"> <a href="#"> <span class="tp-info"> <span>Some title</span> </span> <img src="images/1.jpg" /> </a> </li> <li data-pile="Group 2"> <!-- ... --> </li> <li data-pile="Group 1,Group 2"> <!-- ... --> </li> <!-- ... --> </ul> 

महत्वपूर्ण डेटा-पाइल विशेषता में उस समूह का नाम होता है जिससे छवि संबंधित है। इसके अलावा, प्रत्येक थंबनेल एक से अधिक समूहों से संबंधित हो सकता है।

उसके बाद, प्लगइन को कॉल करें:

 $( '#tp-grid' ).stapel(); 

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

 $.Stapel.defaults = { //    gutter : 40, //        // (  ) pileAngles : 2, //    ,    pileAnimation : { openSpeed : 400, openEasing : 'ease-in-out', closeSpeed : 400, closeEasing : 'ease-in-out' }, //      otherPileAnimation : { openSpeed : 400, openEasing : 'ease-in-out', closeSpeed : 350, closeEasing : 'ease-in-out' }, //       delay : 0, //       randomAngle : false, // callback- onLoad : function() { return false; }, onBeforeOpen : function( pileName ) { return false; }, onAfterOpen : function( pileName, totalItems ) { return false; }, onBeforeClose : function( pileName ) { return false; }, onAfterClose : function( pileName, totalItems ) { return false; } }; 

शैलियाँ प्लगइन के साथ जाती हैं, लेकिन उन्हें फिर से परिभाषित किया जा सकता है। उदाहरणों में विवरण।

स्टैक प्रभाव छवियों की एक हार्ड-कोडित संख्या (दो निश्चित कोण द्वारा घुमाए गए, एक आधार पर) द्वारा बनाया गया है। यदि आप इसे बदलना चाहते हैं, तो प्लगइन में संबंधित कोड इस तरह दिखता है:

 for( var i = 0, len = p.elements.length; i < len; ++i ) { var $el = $( p.elements[i].el ), styleCSS = { transform : 'rotate(0deg)' }; this._applyInitialTransition( $el ); if( i === len - 2 ) { styleCSS = { transform : 'rotate(' + this.options.pileAngles + 'deg)' }; } else if( i === len - 3 ) { styleCSS = { transform : 'rotate(-' + this.options.pileAngles + 'deg)' }; } else if( i !== len - 1 ) { var extraStyle = { visibility : 'hidden' }; $el.css( extraStyle ).data( 'extraStyle', extraStyle ); } ... 

इसमें, सेटिंग्स में परिभाषित डिग्री की संख्या से एक घुमाव अंतिम दो तत्वों पर लागू होता है, और बाकी बस छिपे हुए होते हैं। "कोडित" छवियों की वांछित संख्या निर्धारित करने के लिए इस कोड को बदलना बहुत आसान है।

Drupal Application

उपयोगकर्ता द्वारा क्रमित किया गया प्लगइन और व्यू मॉड्यूल के एकीकरण के साथ Drupal के लिए एक मॉड्यूल विकसित कर रहा है।

संदर्भ

GitHub पर परियोजना ।
काम के उदाहरण ।

लेख tympanus.net पर आधारित है