मुखपृष्ठ » यूआई / UX » Google छवियों की तरह थंबनेल का विस्तार कैसे करें

    Google छवियों की तरह थंबनेल का विस्तार कैसे करें

    Google छवियाँ एक अद्वितीय UI चलाती हैं कई अलग-अलग वेबसाइटों से थंबनेल पूर्वावलोकन. इनमें से किसी भी थंबनेल पर क्लिक करने से स्क्रीन अधिक विवरण और एक बड़ी तस्वीर के साथ फैल जाती है.

    यह सबसे अच्छी छवि गैलरी सुविधाओं में से एक है जिसका मैंने उपयोग किया है और अब, आप इसे Gridder.js के साथ क्लोन कर सकते हैं.

    यह मुफ्त jQuery प्लगइन इस प्रभाव से मेल खाने वाले प्लगइन का निर्माण करके Google के अविश्वसनीय UX के नक्शेकदम पर चलता है। आप ऐसा कर सकते हैं किसी भी फोटो गैलरी को Google Images-style गैलरी में बदल दें सभी समान एनिमेशन और प्रदर्शन सुविधाओं के साथ.

    मैं इस प्लगइन के साथ आने वाले उपयोग की गति और आसानी से सुखद आश्चर्यचकित हूं। बस किसी भी थंबनेल पर क्लिक करें तुरंत एक बड़ा शॉट प्रदर्शित करता है और एनिमेशन सुपर साफ हैं.

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

    उसके ऊपर, आप कर सकते हैं अजाक्स के माध्यम से भी सामग्री खींचो. यह आपको देता है गतिशील थंबनेल बनाएँ वह अन्य वेबसाइटों से या एपीआई के माध्यम से सामग्री खींचती है.

    प्रत्येक क्लिक घटना एक कॉलबैक विधि प्रदान करता है, तो आप Gridder के साथ अन्य प्लगइन्स या जावास्क्रिप्ट फ़ंक्शंस भी चला सकते हैं। इतने सारे विकल्पों के साथ, यह व्यावहारिक रूप से पूरे ग्रिड ढांचे की तरह लगता है!

    ग्रिडर के बाद से jQuery पर चलता है, यह निर्भरता के रूप में नवीनतम संस्करण की आवश्यकता है। लेकिन, आपको केवल (Gridder.js फ़ाइल के साथ) की आवश्यकता है, और HTML की कुछ पंक्तियों के साथ, आप अपना ग्रिड आसानी से चला सकते हैं.

    आपको इसके लिए GitHub पेज देखना चाहिए पूर्ण सेटअप निर्देश लेकिन यहाँ ए त्वरित पूर्वावलोकन HTML कैसा दिखता है:

      
    सामग्री यहाँ जाती है ...

    सभी सामग्री जावास्क्रिप्ट के माध्यम से खींचा जाता है, तो आप बहुत कुछ भी आप चाहते हैं लोड कर सकते हैं.

    यह विकल्पों के साथ एक अविश्वसनीय रूप से बहुमुखी प्लगइन है एनिमेशन गति, सहजता, बंद बटन शैली और स्क्रॉल ऑफ़सेट स्थिति बदलें जब उपयोगकर्ता किसी नए थंबनेल पर क्लिक करता है.

    नौसिखिया और प्रो डेवलपर्स समान रूप से इस प्लगइन में बहुत अधिक मूल्य पाएंगे। फिर भी, यदि आप अभी भी सुनिश्चित नहीं हैं कि यह आपके लिए है तो आप लाइव ग्राइडर डेमो पेज पर एक नज़र डालें और चारों ओर खेलें.