स्केलेबल चित्र प्रदर्शित करें

एचटीएमएल छवि पृष्ठों का पारंपरिक काम इन पृष्ठों के बजाय छवियों को खोलना है। यह एक ही साइट पर इस असुविधा को रोकने का समय है। लिंक अच्छे हैं, लेकिन सुविधाजनक ब्राउज़िंग बेहतर है।

सुविधाजनक दृश्य क्या है? विभिन्न लाइटबॉक्स के एक उदाहरण से पता चला कि दस्तावेज़ को हटाने के बिना किसी दस्तावेज़ के अंदर छद्म दृश्य विंडो को खोलना बेहतर है। लेकिन लेखों को पढ़ते समय, यह दृष्टिकोण बहुत सुविधाजनक नहीं है। हम दस्तावेज़ का संदर्भ नहीं देखते हैं। यह पता चला है कि या तो एक तस्वीर या एक दस्तावेज दिखाई दे रहा है। यह बेहतर है अगर चित्र पाठ को बंद नहीं करता है, जैसा कि यह व्यवस्थित है, उदाहरण के लिए, डोलचन एक्सटेंशन टूल्स स्क्रिप्ट ( यहां सुझाव दिया गया है ), जहां चित्रों को देखने से "इमेजबोर्ड" देखने की समग्र कार्यक्षमता का एक छोटा सा हिस्सा लगता है - लगभग लेखों की एक ही पाठ-चित्र धाराएं। हम अपनी खुद की कुछ चीज़ों को जोड़ते हुए इमेज मैनेजमेंट कंट्रोल करेंगे।

संक्षेप में: परिणाम के रूप में क्या हुआ

साइट पृष्ठों पर चित्र देखने के लिए स्क्रिप्ट :

• पृष्ठ को फिर से लोड किए बिना और एक नए टैब में नहीं - पृष्ठ के केंद्र में एक पतली फ्रेम में;
• प्रारंभिक पैमाना खिड़की से 100% या सीमित है;
• माउस व्हील द्वारा स्केलिंग के साथ;
• आसपास के दस्तावेज़ को छायांकन के बिना;
• खिड़की की जगह पर खींचें और ड्रॉप के साथ;
• फ़ायरफ़ॉक्स / क्रोम / ओपेरा के लिए समर्थन।

कार्यान्वयन - 1 साइट के लिए उपयोगकर्ता स्क्रिप्ट।
जो तस्वीरें दिखती हैं:

• पूर्ण छवि के लिंक द्वारा प्रतिनिधित्व किया गया;
• जबरदस्ती नीचे की ओर (एक कॉलम में फिट नहीं);
• 100% के पैमाने पर रखा जाता है, लेकिन वृद्धि के साथ देखा जा सकता है (शुरुआत में 200% या खिड़की के भीतर);
• 22 पिक्सेल से अधिक का आकार है।

इसके अलावा:

• यदि आप Ctrl दबाए रखते हैं, या मध्य माउस बटन पर क्लिक करते हैं, तो आप एक नए टैब में आकृति के लिंक का अनुसरण कर सकते हैं;
• तस्वीरों के लिए 5 में से 1 सर्च इंजन - Google, Tineye, Yandex और कुछ अन्य को खोजें (इस मेनू को देखने के लिए क्लिक पर Shift)।

सेटिंग्स (सेटिंग्स मेनू में परिवर्तन):

• स्क्रिप्ट डिफ़ॉल्ट रूप से सक्षम है;
• छवियों का लिंक प्रीलोडिंग अक्षम है (अत्यधिक ट्रैफ़िक को रोकना);
• 200% के प्रारंभिक पैमाने में अविवाहित चित्रों को देखना डिफ़ॉल्ट रूप से सक्षम है।

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

कारण (बेहतर जीवन की खोज)

HTML में छवियों के साथ टैग की उपस्थिति के कई उदाहरण हैं, जब एक बेहतर देखने का दृष्टिकोण वांछित है। उदाहरणों पर विचार करें और नियमों को देखें कि चित्रों को देखने के साथ सबसे अच्छा कैसे व्यवहार करें।

1) लिंक। पेज पर एक लिंक है जो एक्सटेंशन jpg, jpeg, gif, png के साथ स्टैटिक इमेज की ओर ले जाता है।
उदाहरण : एक तस्वीर का लिंक (यादृच्छिक रूप से कर्सर पैटर्न के प्रकार)।
उदाहरण 2 : बड़ी तस्वीर के लिए लिंक: आलेख "संख्याओं में Android" से Android (300 K) के बारे में जानकारी ।
समाधान : लिंक के बगल में कम आकार में छवि (इसे डाउनलोड करते हुए) प्रदर्शित करें। देखने के लिए क्लिक करें

यदि हम चित्र को पूर्ण आकार में देखने के लिए आगे बढ़ते हैं, तो चित्र खिड़की के केंद्र में दिखाई देता है, जो चौड़ाई या ऊंचाई में अधिकतम स्थान रखता है। माउस व्हील का उपयोग करके, हम इसे स्केल करते हैं, और खींचकर - हम इसे स्थानांतरित करते हैं। स्रोत छवि पर क्लिक करके या देखे जाने वाले पर क्लिक करके, दृश्य बंद करें। दूसरे पूर्वावलोकन पर क्लिक करके - एक और तस्वीर देखने के लिए जाएं।

2) मिनी पूर्वावलोकन। पृष्ठ में एक थंबनेल है जिसमें एक लिंक दिखाया गया है (आमतौर पर) बढ़े हुए मूल।
एक उदाहरण :

<a href="http://img593.imageshack.us/img593/426/snaphanofooter2.png" title="-    "> <img src="http://img805.imageshack.us/img805/2466/snaphanofooter2pre.png"/> </a> 

समाधान : अपने आकार का पता लगाने के लिए एक छिपे हुए ब्लॉक में मूल प्रदर्शित करें। लिंक पर क्लिक करके - देखें।

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

3) चौड़ाई की सीमा। पृष्ठ पर, सुंदर डिजाइन के कारण, चित्र टेक्स्ट कॉलम की चौड़ाई के लिए संकुचित होते हैं। मैं पूरी चौड़ाई देखना चाहता हूं, लेकिन इसके लिए आपको ब्राउज़र विंडो का विस्तार करना होगा।
उदाहरण : चौड़ी तस्वीर (204 K)

समाधान : हम चित्र को एक विशेष कर्सर के साथ चिह्नित करते हैं, उदाहरण के लिए, "चाल" । इसलिए, इस पर क्लिक करके, हम अधिकतम दृश्य पर जाएंगे।

4) अगर हम एक ऐसी तस्वीर देखते हैं जो पाठ में पूरी तरह फिट बैठती है तो क्या करें?
उदाहरण : छोटी तस्वीर:

समाधान : 2 विकल्प हैं: या तो कुछ भी न करें (" घड़ी दोगुनी छवि " सेटिंग अक्षम है), या इसे 2x बढ़े हुए दृश्य में दिखाएं और इसे एक विशेष कर्सर के साथ चिह्नित करें (उदाहरण के लिए, "ने-आकार" - या )।
( विंडोज़ में अन्य सिस्टम में ब्राउज़र सिस्टम कर्सर के प्रकार, माउस कर्सर को कैसे बदलना है ।)

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

अधिक विस्तृत नियम २

(२. अ) चित्र के लिंक के नीचे कई चित्र। एक स्थिर छवि का लिंक है, जो फ़ाइल एक्सटेंशन द्वारा निर्धारित किया गया है, और इसके अंदर विभिन्न, संभवतः जटिल HTML सामग्री है।
समाधान :
*) यदि लिंक के अंदर कोई छवि टैग नहीं हैं, तो शीर्ष पर डाउनलोड की गई छवि की एक छोटी प्रति (200 से अधिक 200 पिक्सेल नहीं) डालें।
*) यदि आसपास टैग के साथ केवल 1 चित्र है, और संभवतः पाठ के साथ है, तो हम मानते हैं कि यह एक छोटे से चित्र के रूप में एक क्लासिक पूर्वावलोकन है जिसमें एक बड़े के साथ एक लिंक है।
*) यदि लिंक में एक अधिक जटिल आंतरिक संरचना (1 से अधिक IMG टैग) है, तो लिंक के लिए और अलग से एक अलग पूर्वावलोकन बनाया गया है - लिंक के अंदर, इसके चित्रों को देखकर। (यह मामला दुर्लभ है, लेकिन इसे एल्गोरिथ्म में ध्यान में रखने की आवश्यकता है। वे उदाहरण के लिए, चित्रों से एक यौगिक शब्द बना सकते हैं और एक लिंक डाल सकते हैं।)
यदि आपको एक बड़ी तस्वीर मिलती है - खिड़की की चौड़ाई का 50% से अधिक, दृश्य को 100% पर प्रदर्शित करने के लिए कर्सर रखें। हम इसे 200% की वृद्धि के साथ देखते हैं यदि छवि चौड़ाई खिड़की की चौड़ाई के 50% से कम है। इमेज पर क्लिक करने से लिंक खुल जाता है।

उदाहरण : एक कठिन मामला: शाप देने वाले: बाहर - शाप देने वालों के साथ एक टेबल का लिंक, और छोटी तस्वीरों के अंदर:
ई-आकार: , nw-resize: , Crosshair:

 <a href="http://edc.tversu.ru/elib/inf/0008/dhtml/figs/dht2_1103.gif"> e-resize: <img src="http://css2.itsoft.ru/interface/cursor/cursor-eresize.gif"/>, nw-resize: <img src="http://css2.itsoft.ru/interface/cursor/cursor-nwresize.gif"/>, crosshair: <img src="http://css2.itsoft.ru/interface/cursor/cursor-crosshair.gif"/> </a> 

एल्गोरिथ्म

नियमों से एक एल्गोरिथ्म निम्नानुसार है। सबसे पहले, हम HTML (या DOM) क्षेत्र पर जाते हैं, छवियों के लिंक की तलाश करते हैं। पाए जाने के बाद, हम अंदर IMG टैग की संख्या की जाँच करते हैं। यदि 0 - एक अलग से उत्पन्न छवि पर क्लिक करके लिंक को देखना। यदि केवल एक है, तो हम IMG पर क्लिक करके लिंक देखने की व्यवस्था करते हैं, और विशेषता वर्ग "अपना स्वयं का दृश्य न जोड़ें" (_noAddOwnView) IMG वर्ग में जोड़ा जाता है। यदि एक से अधिक IMG टैग हैं - लिंक को अलग से देखना, जैसा कि 0 IMG टैग के मामले में है, और प्रत्येक IMG को अलग से भी देखा जाता है (लेकिन उन्हें दूसरे पास में देखने के लिए तैयार किया जाएगा)।

तत्वों का दूसरा पास आईएमजी की तलाश में है। सभी के पास _noAddOwnView देखने के लिए तैयार नहीं हैं (एक अदृश्य DIV उनके सामने एक अदृश्य चित्र संलग्न है - एक IMG अपने वास्तविक आकार को मापने के लिए ले जाता है)। एक ही दृश्य सभी _noAddOwnView में जोड़ा जाता है, लेकिन तस्वीर को मूल लिंक के पते से बदल दिया जाता है (लिंक पहले स्तर का माता-पिता हो सकता है, लेकिन पुराना)। 1 पास पर बनाई गई सभी पूर्वावलोकन छवियां प्रभावित नहीं होती हैं (_noAddOwnView वर्ग द्वारा समाप्त की जाती हैं)।

विशेष सुविधा संवर्द्धन

सेवा चित्रों और लिंक के अंदर के बाकी हिस्सों को एक लिंक द्वारा तैयार किया गया है। लेकिन चित्रों पर क्लिक को रोकने के लिए अवरोधन () , यानी लिंक काम नहीं करते हैं। लिंक का सामान्य व्यवहार करना दिलचस्प होगा यदि हम बटन पर क्लिक करने से पहले Ctrl कुंजी दबाकर एक नए टैब में चित्र देखना चाहते हैं (जैसा कि फ़ायरफ़ॉक्स और क्रोम में एक नया टैब में लिंक खोलने के लिए सामान्य है)। इसलिए, Ctrl दबाने से सभी दृश्य क्रियाएं रद्द हो जाती हैं ताकि लिंक एक नए टैब में खुल जाए।

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

छोटी तस्वीरों को भी (23x23 पिक्सेल से कम), कभी-कभी आधिकारिक लोगों के रूप में उपयोग किया जाता है, जैसे: पूर्वावलोकन के साथ प्रदान नहीं किए जाते हैं।

कार्यान्वयन

ये सभी देखने के विकल्प हैब्रेज के स्क्रिप्ट संस्करण 0.901 (दिनांक 21 जनवरी, 2013) के साथ संभव है।

इस प्रकार, उपयोगकर्ता स्क्रिप्ट के उपयोगकर्ताओं ने 1 से 1 के पैमाने पर या कम आकार में छवियों को देखने के झटकों से खुद को मुक्त कर लिया, जो सामूहिक ब्लॉगों में बहुत समृद्ध है। आप चित्र दृश्य विधा में पृष्ठ स्क्रॉल करके पृष्ठ के किसी अन्य भाग, चित्र को भी स्थानांतरित कर सकते हैं।

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

हमें आपको फिर से चेतावनी देनी चाहिए: सेटिंग " लोड इमेज लिंक्स " से ट्रैफ़िक बढ़ता है। यह असीमित टैरिफ योजनाओं पर इसे शामिल करने के लिए समझ में आता है। स्क्रिप्ट को ट्रैफ़िक की बेहोश खपत के लिए ज़िम्मेदार होने से रोकने के लिए, इस चेतावनी के उपयोगकर्ता द्वारा एक पुष्टिकरण जोड़ा गया है: ' छवियों को डाउनलोड करें' सेटिंग चालू है, लेकिन पुष्टि नहीं की गई है। क्या आप ड्रॉइंग के लोडिंग के कारण ट्रैफ़िक में वृद्धि से सहमत हैं? '। आपको एक बार सहमत होने की आवश्यकता है जो सेटिंग्स में याद किया जाएगा।

जीवन की इस छुट्टी के उदाहरणों को देखने के लिए, स्क्रिप्ट स्थापित करने के बाद, ऐसे पृष्ठों पर जाएँ। (हम हाल के दिनों के दिलचस्प लेखों का चयन करेंगे।) और सब कुछ देखने के लिए, " लोड लिंक-पिक्चर्स " सेटिंग को चालू करें (उपयोगकर्ता सेटिंग्स मेनू में दाईं ओर या "हैक्सैक्स पर स्क्रिप्ट लोगो पर क्लिक करें) और फिर सूची में चेकबॉक्स चुनें - सहेजें - पृष्ठ को फिर से लोड करें )।

* " सबसे नीचे जिज्ञासा " - अधिकांश भाग के लिए मंगल की तस्वीरों में 1100px की चौड़ाई होती है - संकीर्ण खिड़कियों पर वे स्तंभ की चौड़ाई में शैलियों के साथ दबाए जाते हैं। क्लिक करें - और सभी सम्मेलनों को हटा दिया जाता है। टिप्पणियों में बड़ी तस्वीरें हैं, जो पैमाने पर देखने के लिए भी उपलब्ध हैं।

स्केल का प्रतिशत टेक्स्ट टूलटिप में दिखाया गया है, और जब यह 88-113% की सीमा के भीतर आता है तो इसे 100% (या 200%, दृश्य के प्रकार के आधार पर) पर सेट किया जाता है।

* " अद्भुत मंगल " - कुछ सुंदर बड़े और 2 बहुत बड़े (उनके लिंक द्वारा) चित्र।

* " हर दिन जब डीडीओएस की तरह। सबसे बड़ी चीनी साइटें " - वहां, "83%" संख्याओं के तहत पहली और दूसरी तस्वीरों के बीच, एक इन्फोग्राफिक है - 4000 पिक्सल ऊंचे बड़े जेपीजी, कम रूप में 200px पर कब्जा। " अपलोड इमेज लिंक " सेटिंग के बिना, यह मौजूद नहीं है, लेकिन लिंक का उपयोग सामान्य देखने के लिए किया जाता है।

* habrahabr.ru/feed/new या किसी अन्य टेप को " फोर्स्ड कैट " की सेटिंग के साथ। कम छवियों को 100% की दर से देखा जाता है, और यदि वे 200 से 120 से कम हैं, तो 200% की दर से।

* जॉन कॉनवे द्वारा खेल "लाइफ" में " जावास्क्रिप्ट और कैनवास " - 1300 पिक्सल के पूर्वावलोकन के साथ पहली बड़ी तस्वीर पृष्ठ के अंदर पूरी तरह से दिखाई देती है, और बाकी छोटे को "x2" मोड (उनके आकार का 200%) में देखा जाता है।

*) और, उदाहरण के लिए, विभिन्न आकारों और पारदर्शिता की डिग्री के चित्रों की एक श्रृंखला के साथ लेख " कैटलन नंबर "।

यदि " चित्र देखें " सेटिंग सक्षम है ( केंद्र विंडो में ), तो पृष्ठ पर सभी चित्र अब पृष्ठ को प्रतिस्थापित नहीं करते हैं, जैसा कि साइट पर प्रथागत है, और एक नई विंडो में भी नहीं खुलता है, जैसा कि इतने लंबे समय (4 महीने पहले) नहीं किया गया था। HabrAjax में वापस), लेकिन वे खिड़की के फ्रेम में अंकित अधिकतम आकार की छवि के रूप में खोले जाते हैं और इसके सापेक्ष केंद्रित होते हैं। यदि यह खिड़की से छोटा है, तो चित्र केंद्रित है। उसी समय, छायांकन पृष्ठ को पढ़ने में हस्तक्षेप नहीं करता है - लाइटबॉक्स जैसी लिपियों के विपरीत, कोई छायांकन नहीं है।

उदाहरण 1 : iOS पर हैबर दर्शक के बारे में एक लेख से एक बड़े स्क्रीनशॉट को देखने का स्क्रीनशॉट । पूर्वावलोकन छवि पर कर्सर "ne-resize" है, और पूर्वावलोकन पूर्ण छवि के आकार को इंगित करता है।

उदाहरण 2 : एक मजबूर थंबनेल दृश्य का स्क्रीनशॉट दिखा रहा है कि स्केल टूलटिप में प्रदर्शित है।

आप पृष्ठ को पढ़ने के लिए तस्वीर को स्थानांतरित कर सकते हैं, और इसके पैमाने को बदलने के लिए माउस व्हील का उपयोग कर सकते हैं। बंद करने के लिए क्लिक करें। मूल छवि पर क्लिक करके - भी।

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

उपेक्षित नहीं टिप्पणी शाखाओं के इन्फोग्राफिक्स से छवियों को देख रहा है - टिप्पणी पेड़ का हाल ही में प्रयोगात्मक दृश्य। शाखाओं के पास छोटे नारंगी-पीले आयतों के रूप में चित्रों के प्रतीक चिह्नित हैं। आइकन पर मँडरा कर आप चित्र और छोटे पूर्वावलोकन (यदि आप " लिंक-चित्र लोड करते हैं ") का नाम देख सकते हैं, और क्लिक करके - आप पूरी तस्वीर देख सकते हैं। इस प्रकार, देखने की खिड़की के माध्यम से स्क्रॉल किए बिना, आप जल्दी से मूल्यांकन कर सकते हैं कि कौन से चित्र लंबे टिप्पणी के पेड़ में स्केच किए गए हैं, कभी-कभी एक दर्जन या अधिक ब्राउज़र विंडो लंबे होते हैं।

उदाहरण 3 : एक लेख जिसमें टिप्पणियों में कई चित्र हैं: " कमरे की रोशनी के रूप में एलईडी पट्टी ।" यहां तक ​​कि एक तस्वीर, जिसे एक लिंक के रूप में प्रस्तुत किया गया है, एक समान लिंक मैट्रिक्स में "नारंगी जलाया" आयत जैसा दिखता है। उन छवियों को लोड नहीं किया जा सकता है (नीचे पंक्ति में ड्रॉपबॉक्स से किसी की तस्वीर) का पूर्वावलोकन नहीं किया गया है।


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

कोड

इस कार्यक्षमता के सभी कोड, उपयोग की गई प्रक्रियाओं की गिनती नहीं करते हैं , शुद्ध नाम जेएस में फ़ंक्शन नाम addFullImg, handlImgViews के तहत HabrAjax उपयोगकर्ता स्क्रिप्ट में लिखे गए हैं और लगभग 200 लाइनों पर कब्जा कर रहे हैं।

बेसिक एल्गोरिदम को डॉचन लिपि से लिया गया था, लेकिन 6-7 बुनियादी कार्यों से 2 में बदलकर, उनके आवेदन को दृढ़ता से बदल दिया गया था, और मूल के बजाय हमारी स्वयं की उपयोगिताओं (पुस्तकालय कार्यों) का भी उपयोग किया गया था। इससे कोड को बेहतर बनाने में मदद मिली, हालांकि मूल एक को पूरी तरह से संसाधित करने का कोई काम नहीं था - कुछ "उपयोगिताओं" को उनके मूल रूप ( $ पीडी, $ ऑफसेट ) में लिया गया था।

उनका उपयोग आपकी छवि दर्शक (LGPL v3) बनाने के लिए किया जा सकता है। लेकिन वहाँ भी ऐसा कोई कार्य नहीं था (छवि को देखने के लिए प्लग-इन बनाने के लिए), इसलिए गितुब पर अलग से कोई कोड नहीं रखा गया है। हालाँकि, छवि देखने के कार्यों को कॉपी करके और अपनी खुद की वेबसाइट के लिए टैग सेट करके, यह डॉचन से कॉपी करने के समान ही उचित है। फ़ीचर - ये स्क्रिप्ट IE8 और लोअर को सपोर्ट नहीं करते हैं। समर्थन के लिए, आपको क्रॉस-ब्राउज़र अतिरिक्त बनाने की आवश्यकता है, उदाहरण के लिए, चयनकर्ताओं के लिए jQuery $ () फ़ंक्शन का उपयोग करें।