🍦 🛁 🛍️ फोटो फ्रेम 👩🏼‍🎨 😤 🐙

लगभग छह महीने पहले, मैंने वेबसाइटों पर दीर्घाओं के लिए एक सरल जेकर प्लगइन लिखा था। उन्होंने इसे फोटो फ्रेम कहा और इसे इंटरनेट पर पोस्ट किया। अगली तस्वीर को क्रॉसफ़ेड पर क्लिक करके दिखाया गया था, पीछे की ओर बदलाव के साथ क्लिक - वह सब।

इन महीनों के लिए Photorama परिपक्व हो गया है, एक लोगो के साथ एक वेबसाइट मिली है और मुझे लगता है, अब आप इसके बारे में Habré पर लिख सकते हैं।

0.1 वें संस्करण पर मैं आर्टेम लेबेदेव की यात्रा में "दीर्घाओं" से प्रेरित था। और मैंने कुछ ऐसा ही करने का फैसला किया, पृष्ठ पर एक विदेशी "फ्लैश" की तरह नहीं। कर दिया। प्लगइन का उपयोग करना शुरू हो गया, शिकायतें और सुझाव भेजना। इसने मुझे स्क्रिप्ट पर काम करने से नहीं रोका।

0.5 वें संस्करण में, मैंने एक सरल लेबेडेव क्लिक से दूर जाने और फोटो फ्रेम को दीर्घाओं की ओर मोड़ने का फैसला किया (देखें ओरियन आर्ट और केएम / एच देखें )। ब्यूरो का अनुभव फोटो फ्रेम के व्यवहार और डिजाइन की सभी बारीकियों में परिलक्षित होता है।

दिखावट

छवियों और उनके थंबनेल से ध्यान हटाने के लिए अतिरिक्त कुछ नहीं:

प्रबंध

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

यदि आप थंबनेल पर क्लिक करते हैं, तो PhotoFrame माउस या उंगली की गति को कम करने के लिए कर्सर के नीचे अगले एक को बदलेगा। टेप को स्वयं किनारे पर स्थानांतरित किया जा सकता है और पूर्वावलोकन के पड़ोसी सेट देख सकते हैं।

भौतिक विज्ञान

फोटो फ्रेम में यथार्थवादी भौतिकी है। आप किस गति के साथ तस्वीरें और पूर्वावलोकन फेंकते हैं, उसी के साथ वे जाते हैं। आभासी लोचदार बैंड किनारों के साथ खींचे जाते हैं। टेप के किनारे पर न केवल माउस (उंगली) द्वारा स्थानांतरित किया जाता है, बल्कि जड़त्वीय फेंक के अंत में भी।

संबंध

परिदृश्य यह है: कनेक्ट करें ताजा jquery.js, दो फोटो फ्रेम फाइलें - fotorama.css और fotorama.js, एक ब्लॉक में चित्र लगाएं, निर्माण $(%block-selector%).fotorama() साथ इस ब्लॉक पर फोटो फ्रेम शुरू करें $(%block-selector%).fotorama() :

 <script src="jquery-1.7.min.js" type="text/javascript"></script> <link href="fotorama.css" type="text/css" rel="stylesheet"> <script src="fotorama.js" type="text/javascript"></script> <div id="fotorama"> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> </div> <script type="text/javascript"> $(function() { $('#fotorama').fotorama(); }); </script>

स्वचालित रूप से टर्निंग ब्लॉक के लिए एक .fotorama_auto वर्ग भी है।

समायोजन

उपस्थिति को जल्दी से बदलने के लिए, सीएसएस में जाना आसान नहीं है, लेकिन नए मूल्यों को सीधे आरंभीकरण पर निर्दिष्ट करना है - पृष्ठभूमि का रंग, तीर और "सक्रिय" फ्रेम, थंबनेल का आकार, उनके बीच इंडेंट।

आप टेप पूर्वावलोकन निकाल सकते हैं:

 $('#fotorama').fotorama({thumbsPreview: false});

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

एपीआई

एक छोटे लेकिन गर्वित एपीआई में 3 घटक होते हैं। कॉलबैक फ़्रेम परिवर्तन पर कहा जाता है:

 $('#fotorama').({ onShowImg: function(data){ alert('Photo #'+(data.index+1)+' is coming!'); } });

और दो घटनाएँ, जिन्हें खींचकर, आप अपने स्वयं के कार्यों के साथ फोटो फ़्रेम को नियंत्रित कर सकते हैं और कहते हैं, एक स्लाइड शो (देखें) देखें:

 var i = 0; i++; $('#fotorama').trigger('showimg', i);

या पूर्ण स्क्रीन मोड:

 $('#fotorama').trigger('rescale', [$(window).width(), $(window).height()]);

एचटीएमएल

किसी भी मनमाने ढंग से HTML को छवियों के ऊपर रखा जा सकता है:

आपको इनलाइन ब्लॉक के लिए शैलियों को कॉन्फ़िगर करने की आवश्यकता है, कोड उदाहरण देखें ।

डाउनलोड करें और त्रुटियों

यदि आप अलग-अलग पूर्वावलोकन फ़ाइलों को निर्दिष्ट करते हैं, तो बड़ी फ़ोटो को आवश्यकतानुसार लोड किया जाएगा। जब पूर्वावलोकन तैयार नहीं होते हैं, तो वे स्वचालित रूप से उत्पन्न होते हैं, लेकिन इसके लिए सभी फ़ोटो तुरंत लोड किए जाते हैं।

हालांकि फोटो लोड नहीं हुआ है, प्रीलोडर घूमता है, और वर्तमान पूर्वावलोकन के चारों ओर फ्रेम रुक-रुक कर आता है:

टूटी हुई तस्वीर को एक विस्तृत पूर्वावलोकन द्वारा बदल दिया गया है:

और अगर पूर्वावलोकन जगह में नहीं है, तो इस तरह से करें:

प्रौद्योगिकी के

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

इस मामले में, प्राचीन ब्राउज़र में सब कुछ ठीक काम करता है, यहां तक कि IE6 में भी:

गिरावट इस प्रकार है: कोई डेटा नहीं है: url - हम इलिप्सिस से प्रीलोडर करते हैं, सीएसएस एनिमेशन के लिए कोई समर्थन नहीं है - हम जावास्क्रिप्ट के साथ चेतन करते हैं, कोई कैनवास नहीं है - हम सामान्य तस्वीर को संपीड़ित करते हैं, कोई छाया नहीं है - ठीक है, ठीक है।

हैंडहेल्ड डिवाइसों में स्वीकार्य प्रदर्शन के लिए, विभिन्न तरीकों का उपयोग किया जाता है, जैसे कि टाइमआउट द्वारा कतारों में छवियों को लोड करना और ड्रॉ करना, फ़्रेम को हटाना जो वर्तमान में डोम से आवश्यक नहीं हैं, रिकॉल से बचने के लिए छवि विशेषताओं को कैशिंग करना आदि।

<Noscript>

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

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

फोटो फ्रेम के साथ कुछ पृष्ठ:

टाइगर कैलेंडर के निर्माण के बारे में तान्या मिस्युटिना की कहानी,
एंड्री शितोव द्वारा इल्या बिरमन और बार्सिलोना द्वारा लंदन (फोटो फ्रेम ढूंढना आसान नहीं है),
Tridiafilm.ru ,
डेनिस तलाल के प्रतीक ,
मैं और मेरे ब्लॉग पर ४०४ ।

यदि फोटो फ्रेम 2 साल पहले था, तो मुख्य ओरियन आर्ट इसके बिना नहीं होगा।

विकास और लाइसेंस

प्लगइन पर काम जीथब पर काम करता है ।

यदि आपको व्यक्तिगत गैर-वाणिज्यिक उद्देश्यों के लिए इसका उपयोग करने की अनुमति देने और किसी तरह फोटो फ्रेम का उल्लेख करने की आवश्यकता नहीं है। कॉर्पोरेट और / या वाणिज्यिक उद्देश्यों के लिए उपयोग पर मेरे साथ चर्चा की जानी चाहिए।

फोटो फ्रेम आपको कितना नुकसान पहुंचाता है, इसके लिए कोई जिम्मेदार नहीं है। डर और जोखिम!

भविष्य

बॉक्स के ठीक बाहर फुल-स्क्रीन मोड, माउस व्हील का नियंत्रण, ट्रैकपैड पर इशारे, अधिक अनुकूलन और कोड संरचना।

फोटो फ्रेम