आवृत्ती 2.x – Gridzy.Gallery

संकेतथळ आपोआप अणकारीत जाला. कितेंय स्पश्ट ना जाल्यार उपकार करून इंग्लीश दस्तावेजीकरणाचेर एक नदर मारात.

मुळावो वापर

Gridzy फायली तुमच्या सर्वराचेर अपलोड करात आनी तुमच्या संकेतथळार जोडात (सादारणपणान मुखेल विभागांत):

<link rel="stylesheet" href="gridzy/gridzy.min.css" />
<script src="gridzy/gridzy.min.js"></script>

HTML कोड जोडात (बॉडी विभागांत खंयच्याय सुवातेर):

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

तें जालें! हें एक पुरायपणान कार्यक्षम उदाहरण. कसलेंच अतिरिक्त आरंभ करपाची गरज ना.

संरचना करप

Gridzy संरचीत करपाचो सगळ्यांत सोपो मार्ग म्हणल्यार, फकत HTML गुणधर्म वापरप. तुमकां फकत पर्याय नांवांचो उपसर्ग data-gridzy- चो वापर करचो पडटलो. तर, spaceBetween पर्याय सेट करपाक, फकत data-gridzy-spaceBetween गुणधर्म जोडात.

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

मुखेल पर्याय

	मुलभूत मोल	वर्णन
`animate`	`true`	ग्रिड बदलता तेन्ना (देखीक, ब्राउझर विंडोचो आकार बदलतना वा फिल्टर सेट करतना) एनिमेशन वापरपाक जाय काय ना तें थारायता.
`layout`	`justified`	वापरिल्ली मांडावळ व्याख्या करता. Gridzy.js 2 दोन वेगवेगळ्या मांडावळीक तेंको दिता `justified` आनी `waterfall` . तातूंतल्या दरेकाक आपले अतिरिक्त पर्याय मापदंड आसात, जे तुमकां ह्या कोश्टक सकयल मेळूं येतात.
`filter`	`*`	खंयच्यो प्रतिमा दाखोवच्यो हें थारायता. खंयचोय CSS-निवडपी हांगा मोल म्हणून वापरूं येता. चड करून `filterControls` वरवीं आपोआप सेट करतात (फुडलो पर्याय पळयात). फिल्टर पळयात
`filterControls`		प्रतिमा गाळपाखातीर खंयचे फॉर्म घटक वापरूं येतात तें थारायता. खंयचोय CSS निवडपी, जो HTML फॉर्म घटक निवडटा, हांगा मोल म्हणून वापरूं येता. फिल्टर पळयात
`autoConsiderScrollBars`	`true`	स्क्रोल बार दिसल्यार वा ना जाल्यार उपलब्ध रुंदायेचो अदमास करपाक. ह्या स्वयंचलीतपणाक लागून समस्या निर्माण जायना जाल्यार तें `true` सोडपाची सदांच शिफारस करतात.

Justified मांडावळ पर्याय

	मुलभूत मोल	वर्णन
`autoFontSize`	`false`	मूळ बॉक्स आकाराचेर आदारीत दरेक बॉक्साच्या फॉन्ट-आकार गुणधर्म आपोआप अद्ययावत करता. पूर्वनिर्धारीतपणान फॉन्ट-आकार गुणधर्म स्पश्टपणान सेट केल्लो ना.
`desiredHeight`	`190`	घटक ओळींची इत्सा आशिल्ली उंचाय व्याख्या करता. उपलब्ध रुंदायेचेर आनी ओळींतल्या घटकांचेर आदारून प्रत्यक्ष उंचाय मेजतले.
`hideOnMissingImage`	`true`	लोड करूंक मेळूंक नाशिल्लीं प्रतिमा आशिल्लीं पेटी लिपयता.
`spaceBetween`	`4`	घटकांमदलें अंतर पिक्सेलांत व्याख्या करता.
`lastRowAlign` आवृत्ती 2.3.0 सावन	`justified`	निमाणे ओळीची वागणूक व्याख्या करता. परवानगी दिल्लें मोल `left` , `center` , `right` आनी `justified` .
`singleRowAlign` आवृत्ती 2.3.0 सावन	`justified`	फकत एकूच ओळ आसल्यार वर्तनाची व्याख्या करता. परवानगी दिल्लें मोल `left` , `center` , `right` आनी `justified` .
~~`fillLastRow`~~ ~~आवृत्ती 2.1.0 सावन~~	~~`true`~~	आवृत्ती 2.4.0 सावन काडून उडयलां ( आवृत्ती 2.3.0 सावन नाका जालां ) निमाणी ओळ सदांच पुरायपणान भरिल्ली आसतली अशी प्रतिमा मांडटा. तुमी प्रतिमा गतिशीलपणान जोडपाची येवजण आसल्यार, हें निश्क्रीय करप ही एक बरी कल्पना आसूं येता. एकेच ओळीचेर कसलोच परिणाम जायना (पळयात `fillSingleRow` ).
`fillSingleRow` आवृत्ती 2.1.0 सावन	~~`true`~~	आवृत्ती 2.4.0 सावन काडून उडयलां ( आवृत्ती 2.3.0 सावन नाका जालां ) एकूच ओळ आसल्यार ती प्रतिमांची मांडावळ करता की ओळ सदांच पुरायपणान भरता. जर अशें जावंक शकता की तुमचे कडेन गॅलरींत फकत एक वा दोन प्रतिमा आसात, जाल्यार हें निश्क्रीय करप ही बरी कल्पना आसूं येता.

Waterfall मांडावळ पर्याय

	मुलभूत मोल	वर्णन
`autoFontSize`	`false`	मूळ बॉक्स आकाराचेर आदारीत दरेक बॉक्साच्या फॉन्ट-आकार गुणधर्म आपोआप अद्ययावत करता. पूर्वनिर्धारीतपणान फॉन्ट-आकार गुणधर्म स्पश्टपणान सेट केल्लो ना.
`desiredWidth`	`250`	स्तंभांची जाय आशिल्ली रुंदाय व्याख्या करता. उपलब्ध रुंदायेचेर आनी स्तंभांच्या संख्येचेर आदारून प्रत्यक्ष रुंदायेची गणना जातली.
`hideOnMissingImage`	`true`	लोड करूंक मेळूंक नाशिल्लीं प्रतिमा आशिल्लीं पेटी लिपयता.
`horizontalOrder`	`false`	घटक दर एका स्तंभांत दावे कडल्यान उजवे कडेन खरपणान एक घटक दवरतात, मागीर खंयच्या स्तंभांत चड सुवात आसा त्या स्वतंत्रपणान सगळ्यांत डाव्या स्तंभांत परतून सुरू जाता अशी व्याख्या करता. पूर्वनिर्धारीतपणान घटक सदांच सगळ्यांत ल्हान उंचाय आशिल्ल्या स्तंभांत दवरतले.
`spaceBetween`	`4`	घटकांमदलें अंतर पिक्सेलांत व्याख्या करता.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

चड प्रगत पर्याय

चड प्रगत पर्यायां खातीर, API पळयात.

अर्थीक एचटीएमएल

ग्रिडझीची सगळ्यांत सोपी एचटीएमएल रचणूक अशी आसा:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
</div>

पूण ग्रिझी खूब लवचीक आसा आनी तुमी चड करून हेर खंयचीय एचटीएमएल रचणूक वापरूं येता. फकत कांय मुद्दे विचारांत घेवपासारके आसात: १.

कंटेनर घटकाचें दरेक भुरगें जाळींतल्या एका वस्तूचें प्रतिनिधित्व करता.
कंटेनर घटक आनी ताचीं भुरगीं दोनूय खंयचोय टॅग प्रकार आसूं येतात, जशे की ul आनी li (फक्त ब्राउझर मुलभूत रीसेट करपाचो विचार करात).
जर img घटक स्वता प्रत्यक्ष भुरगो ना जाल्यार, ताका gridzyImage वर्ग जाय.

म्हणल्यार हीय एक काम करपी एचटीएमएल रचणूक आसा:

<ul class="gridzy">
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    </span>
  </li>
  <li>
    <span>
      <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    </span>
  </li>
</ul>

खास करून तुमकां कॅप्शन जोडपाचे आसल्यार, तुमकां प्रगत एचटीएमएल रचणूक जाय. ताचे विशीं चड जाणून घेवपाक, पळयात Captions & Skins .

कॅप्शन्स आनी स्किन

तुमकां तुमच्या गॅलरींत कॅप्शन जोडपाचे आसल्यार, तुमकां दिसप व्याख्या करपाक जाय. देखून कांय पूर्वनिर्धारीत कात उपलब्ध आसात. दरेक स्किन CSS फायल आशिल्ली. तुमकां मुखेल Gridzy फायलीं भायर ही फायल जोडची पडटली (सादारणपणान मुखेल विभागांत):

<link rel="stylesheet" href="gridzy/skins/gridzySkinClassic/style.min.css" />

ते भायर तुमकां एक प्रगत HTML रचणूक जाय:

<div class="gridzy gridzySkinClassic">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/640?random=3" alt="yet another random image" />
    <figcaption class="gridzyCaption">yet another caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=4" alt="a random image again" />
    <figcaption class="gridzyCaption">a caption text again</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=5" alt="one last random image" />
    <figcaption class="gridzyCaption">one last caption text</figcaption>
  </figure>
</div>

तुमकां HTML रचणुके विशीं विचार आसल्यार, Semantic HTML चेर एक नदर मारात.

कॅप्शनाक तुमी खंयच्याय प्रकारचो टॅग वापरूं येता, फकत तातूंत gridzyCaption वर्ग आसा हाची खात्री करात. img घटकाक gridzyImage वर्ग जाय.

वयलें उदाहरण तुमकां कात दाखयता gridzySkinClassic . वेगळो वापरपाक, फकत कातीचें नांव हातूंतल्या एका नांवान बदलात:

समाविष्ट केल्लीं कातडीं

	उपलब्ध आशिल्ले वर्ग
gridzySkinBlank हें नांव स्वताची कात तयार करपाक एक बरो सुरवातीचो बिंदू लायव्ह पूर्वावलोकन	`gridzySkinBlank`
gridzySkinClassic लायव्ह पूर्वावलोकन	`gridzySkinClassic` `gridzySkinClassicLight`(आवृत्ती 2.6.0 सावन नाका जालां)
gridzySkinFullOverlay लायव्ह पूर्वावलोकन	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(आवृत्ती 2.6.0 सावन नाका जालां)
gridzySkinLift लायव्ह पूर्वावलोकन	`gridzySkinLift` `gridzySkinLiftLight`(आवृत्ती 2.6.0 सावन नाका जालां)
gridzySkinMagnifier झूम कार्यक्षमताय समाविष्ट करूंक ना लायव्ह पूर्वावलोकन	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(आवृत्ती 2.6.0 सावन नाका जालां)

वयल्या सगळ्या स्किनांक फकत CSS फायल जाय, पूण अतिरिक्त स्किन आसात जांकां JavaScript फायलय जाय:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>

	उपलब्ध आशिल्ले वर्ग
gridzySkinBlur आयईंत काम करीना लायव्ह पूर्वावलोकन	`gridzySkinBlur` `gridzySkinBlurLight`(आवृत्ती 2.6.0 सावन नाका जालां)
gridzySkinCard लायव्ह पूर्वावलोकन	`gridzySkinCard` `gridzySkinCardLight`(आवृत्ती 2.6.0 सावन नाका जालां)

कातीचे पर्याय

आवृत्ती 2.6.0 सावन बिल्ट-इन स्किन संरचीत करपाचे पर्याय आसात. विशिश्ट कातीचेर आदारून तुमी पार्श्वभूंय रंग, मजकूर रंग आनी मजकूर सावळी सेट करूंक शकतात. तुमकां फकत CSS सानुकूल गुणधर्म वापरचे पडटले जशें तुमकां हांगा पळोवंक मेळटा:

<div class="gridzy gridzySkinClassic" style="--background: rgba(0, 80, 117, .8); --color: rgb(238, 238, 238); ">
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/640/480?random=1" alt="a random image" />
    <figcaption class="gridzyCaption">a caption text</figcaption>
  </figure>
  <figure>
    <img class="gridzyImage" src="https://loremflickr.com/480/640?random=2" alt="another random image" />
    <figcaption class="gridzyCaption">another caption text</figcaption>
  </figure>

  ...

</div>

दरेक काती खातीर समर्थीत चड-उणें आनी मुलभूत मोलां पळयात हांगा:

gridzySkinClassic

चडांत चड आसता	मुलभूत मोल	म्हायती
`--background`	`rgba(0, 0, 0, .7)`	खंयच्याय CSS पार्श्वभूंय मोलाक परवानगी दिता
`--color`	`rgb(255, 255, 255)`	खंयच्याय CSS रंग मोलाक परवानगी दिता
`--text-shadow`	`none`	खंयच्याय CSS मजकूर-सावळी मोलाक परवानगी दिता

gridzySkinFullOverlay

चडांत चड आसता	मुलभूत मोल	म्हायती
`--background`	`rgba(0, 0, 0, .7)`	खंयच्याय CSS पार्श्वभूंय मोलाक परवानगी दिता
`--color`	`rgb(255, 255, 255)`	खंयच्याय CSS रंग मोलाक परवानगी दिता
`--text-shadow`	`none`	खंयच्याय CSS मजकूर-सावळी मोलाक परवानगी दिता

gridzySkinLift

चडांत चड आसता	मुलभूत मोल	म्हायती
`--background`	`rgba(0, 0, 0, .7)`	खंयच्याय CSS पार्श्वभूंय मोलाक परवानगी दिता
`--color`	`rgb(255, 255, 255)`	खंयच्याय CSS रंग मोलाक परवानगी दिता
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	खंयच्याय CSS मजकूर-सावळी मोलाक परवानगी दिता

gridzySkinMagnifier

चडांत चड आसता	मुलभूत मोल	म्हायती
`--background`	`rgba(0, 0, 0, .7)`	खंयच्याय CSS पार्श्वभूंय मोलाक परवानगी दिता
`--color`	`rgb(255, 255, 255)`	खंयच्याय CSS रंग मोलाक परवानगी दिता

ही स्किन --text-shadow हांकां तेंको दिना

gridzySkinBlur

चडांत चड आसता	मुलभूत मोल	म्हायती
`--background`	`rgba(0, 0, 0, .7)`	खंयच्याय CSS पार्श्वभूंय मोलाक परवानगी दिता
`--color`	`rgb(255, 255, 255)`	खंयच्याय CSS रंग मोलाक परवानगी दिता
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	खंयच्याय CSS मजकूर-सावळी मोलाक परवानगी दिता

gridzySkinCard

चडांत चड आसता	मुलभूत मोल	म्हायती
`--background`	`rgba(0, 0, 0, 1)`	खंयच्याय CSS पार्श्वभूंय मोलाक परवानगी दिता
`--color`	`rgb(255, 255, 255)`	खंयच्याय CSS रंग मोलाक परवानगी दिता
`--text-shadow`	`none`	खंयच्याय CSS मजकूर-सावळी मोलाक परवानगी दिता

सगळ्यो पूर्वनिर्धारीत स्किन फकत साद्या मजकूर कॅप्शनांक तेंको दितात. तुमी तुमचीं स्वताचीं आनी चड गुंतागुंतीचीं कात तयार करूंक शकतात. कृपया स्टाइल ग्रिड्झीचेर एक नदर मारात .

शैली ग्रिड्झी

जर खंयचीच पूर्वनिर्धारीत कात तुमच्या गरजे प्रमाण ना जाल्यार तुमी तुमची स्वताची कात स्टायल करूंक शकतात.

सगळ्यांत सोपो मार्ग म्हणल्यार पयलीं सद्याचे कातीची नकल करप आनी ती तुमच्या स्वताच्या गरजे प्रमाणें जुळोवप. पूर्वनिर्धारीत स्किन gridzySkinBlank चड करून CSS फायलीन बरी बुन्याद तशेंच बरी दस्तावेजीकरण दितली:

/** SKIN Blank **/

/* all gallery items (direct children of the main container element) */
.gridzySkinBlank > .gridzyItem {
  overflow: hidden;
}

/* all gallery images (predefined in Gridzy's main CSS file, but can be overridden) */
.gridzySkinBlank .gridzyImage {
}

/* all gallery captions (just create your very own style) */
.gridzySkinBlank .gridzyCaption {
  margin: 0;
  padding: .5em;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  transition: opacity .5s;
  overflow: auto;
  background: rgba(0, 0, 0, .7);
  color: rgb(255, 255, 255);
}

.gridzySkinBlank > .gridzyItem:hover .gridzyCaption {
  opacity: 1;
}

CSS फायलीन तुमकां gridzySkinBlank , gridzyImage आनी gridzyCaption हे वर्ग मेळटले. ग्रिड्झीकच ह्या वर्गांची गरज ना. ते फकत स्टायलिंग खातीर वापरतात आनी देखून तुमकां आवडल्यार तीं काडून उडोवंक वा नांव बदलूंक शकतात.

ते भायर तुमकां CSS वर्ग gridzyItem मेळटलो. Gridzy हो वर्ग आपोआप मुखेल कंटेनर घटकाच्या सगळ्या थेट भुरग्यांक सेट करता. देखून, तुमच्या गॅलरीच्या आयटमांक स्टायल करपाक तुमी ह्या वर्गाचो वापर करूंक शकतात.

मन म्हत्वाचीं गजाली

आयटमाची आशय पुरायपणान प्रतिसाद दिवपी आसूंक जाय. घटकाचो आकार नक्कीच बदलतलो अशें समजून घेयात. पिक्सेल मोलां बदला टक्केवारी मोलां वापरात. आनी Gridzy मांडावळ पर्याय autoFontSize , जो फॉन्ट-आकार आयटम बॉक्स आकाराचेर बांदता ताचेर एक नदर मारात.
दरेक वस्तूचें आस्पॅक्ट रेशियो बरोच व्याख्या केल्लो आसूंक जाय. वस्तूच्या आस्पॅक्ट रेशियोंत केन्नाच बदल जावचो ना आनी जाळी मेजपाक ताची गरज आसा. देखून आयटमांत आपोआप बरो व्याख्या केल्लो आस्पॅक्ट रेशियो ना जाल्यार, ती हाताळणीन पूर्वनिर्धारीत करात (देखीक css वरवीं).

कांय प्रकरणांनी, Gridzy आरंभ करचे पयलीं वस्तूंच्या आशयाची शैली करप सोंपें आसूं येता. फकत gridzy वर्ग वा Gridzy जावास्क्रिप्ट फायल हाचे खातीर तात्पुरती काडून उडोवची.

तें जालें! तुमचीच कात तयार करपाक फकत इतलेंच जाय. चडशीं पूर्वनिर्धारीत कातीं हाचे परस चड वापरनात.

पूण तुमकां आवडल्यार आनीकय आसूं येता ...

प्रगत कात

Gridzy फकत gridzyItem परस चड CSS वर्ग वापरता. चडशे आपोआप सेट जातले आनी तुमी स्टायलिंग खातीरय वापरूं येतात.

मुखेल कंटेनर वर्ग

वर्गाचें नांव	वर्णन
`gridzy` हाताळणीन सेट करपाक	Gridzy आपोआप ह्या वर्गा वांगडा घटक सोदता आनी तांकां आरंभ करता.
`gridzyAnimated`	पर्याय `animate` `true` आसल्यार आपोआप सेट जातलो . हो वर्ग हाताळणीन सेट केल्यार, `animate` पर्याय आपसूकच `true` जातलो (तो स्पश्टपणान `false` सेट केल्लो आसल्यार सोडल्यार ).

आयटम क्लासेस

वर्गाचें नांव	वर्णन
`gridzyItem`	आयटम आरंभ करपाची प्रक्रिया सुरू जातकच सेट जातली. केन्नाच काडून उडोवचे नात.
`gridzyItemInitializing`	आयटम आरंभ करपाची प्रक्रिया सुरू जातकच सेट जातली. आयटम पुरायपणान आरंभ जातकच `gridzyItemReady` कडल्यान बदलतले. म्हणल्यार प्रतिमा पुरायपणान लोड जाल्यात असो न्हय (पळयात `gridzyItemLoading` ), पूण आयटम दिसपाक तयार आसा.
`gridzyItemReady`	आयटम पुरायपणान आरंभ जातकच `gridzyItemInitializing` बदलतले. केन्नाच काडून उडोवचे नात. म्हणल्यार प्रतिमा पुरायपणान लोड जाल्यात असो न्हय (पळयात `gridzyItemComplete` ), पूण आयटम दिसपाक तयार आसा.
`gridzyItemLoading`	आयटम आरंभ करपाची प्रक्रिया सुरू जातकच सेट जातली. आस्पाव आशिल्लीं प्रतिमा (सादारणपणान फकत एक) पुरायपणान लोड जातकच `gridzyItemComplete` कडल्यान बदलतले.
`gridzyItemComplete`	आस्पाव आशिल्लीं प्रतिमा (सादारणपणान फकत एक) पुरायपणान लोड जातकच `gridzyItemLoading` बदलतले. केन्नाच काडून उडोवचे नात.
`gridzyItemInitialToVisible`	आयटम पयलेच खेपे दिसपाक लागले बरोबर सेट जातले. वस्त पुरायपणान दिसतले बरोबर काडून उडयतले.
`gridzyItemVisible`	आयटम पुरायपणान दिसतले बरोबर सेट जातले. वस्त ना जावपाक लागले बरोबर काडून उडयतले.
`gridzyItemVisibleToHidden`	आयटम ना जावपाक लागले बरोबर सेट जातले. वस्त पुरायपणान लिपले बरोबर काडून उडयतले.
`gridzyItemHidden`	आयटम पुरायपणान लिपले बरोबर सेट जातले. आयटम दिसपाक लागले बरोबर काडून उडयतले.
`gridzyItemHiddenToVisible`	आयटम दिसपाक लागले बरोबर सेट जातले (पयलेच खेपे दिसप सोडून – `gridzyItemInitialToVisible` वर्ग पळयात ). वस्त पुरायपणान दिसतले बरोबर काडून उडयतले.
`gridzyItemVisibleToVisible`	ग्रिडांत कितेंय बदलले बरोबर सेट जातले, पूण आयटम स्वता आशिल्ली आनी दिसताली उरतली. बदल एनिमेशन सोंपता म्हणसर काडून उडयतले.

पूर्वनिर्धारीतपणान प्रक्रिया निर्देशक आनी दिसपी आनी ना जावपी प्रतिमांखातीर एनिमेशनां Gridzy मुखेल CSS फायलीन पूर्वनिर्धारीत केल्यात.

ह्या वयर सांगिल्ल्या CSS वर्गां वरवीं तुमी तुमचो स्वताचो प्रक्रिया निर्देशक आनी एनिमेशन स्टायल करूंक शकतात. Gridzy मुखेल CSS फायलीन पळोवपाचें धाडस करात, तुमकां कितें ओव्हररायड करचें पडटलें तें समजून घेवपाक. भंय ना, सगळें थंय बरे तरेन दस्तावेजीत केलां.

लोडिंग ऑप्टिमायझ करचें

तुमी जायत्यो प्रतिमा वापरल्यार, ग्रिडझीक ग्रिड बेगीन तयार करपाक मदत करप ही एक बरी कल्पना आसूं येता.

उडी मारपी प्रतिमा आडावप

ग्रिडजीक ग्रिड मेजपाक सगळ्या प्रतिमांचे आस्पॅक्ट रेशियोची पुराय गरज आसता. कांय प्रतिमा तयार जाल्यार कांय प्रतिमा तयार नात जाल्यार ह्या तथ्यांक लागून घटक उडी मारतात. जितले चड प्रतिमा आसतात तितलेच हो परिणाम चड त्रासदायक आसूं येता.

ही वागणूक आडावपाखातीर, फकत सगळ्या img घटकांखातीर width आनी height गुणधर्म सेट करात. दरेक वैयक्तीक प्रतिमेखातीर योग्य मोलां सेट करप म्हत्वाचें, नाजाल्यार प्रतिमा विकृत जातल्यो. योग्य मोलां म्हळ्यार त्या त्या प्रतिमेची मूळ रुंदाय आनी उंचाय:

<div class="gridzy">
  <img src="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img src="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img src="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img src="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img src="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

उपरांत ग्रिडझीक प्रतिमांचे प्रत्यक्ष आकार कळपाची गरज नासतना रोखडीच जाळी मेजूं येता.

आळशी लोडिंग

फकत दृश्य पोर्टांत आशिल्लीं प्रतिमा लोड करपाक, फकत ह्यो पावलां पाळचीं:

वयर वर्णीत केल्ल्या प्रमाणें width आनी height गुणधर्म घालात (सारकी मोलां वापरपाची खात्री करात)
सकयल दाखयल्ले प्रमाण सगळे src गुणधर्म data-gridzylazysrc कडेन बदलात (तुमचे कडेन srcset गुणधर्मय आसल्यार, तांकां data-gridzylazysrcset कडेन बदलात ).

<div class="gridzy">
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=1" width="640" height="480" alt="a random image" />
  <img data-gridzylazysrc="https://loremflickr.com/480/640?random=2" width="480" height="640" alt="another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/640?random=3" width="640" height="640" alt="yet another random image" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=4" width="640" height="480" alt="a random image again" />
  <img data-gridzylazysrc="https://loremflickr.com/640/480?random=5" width="640" height="480" alt="one last random image" />
</div>

ह्या पांवड्या उपरांत प्रतिमा व्यूपोर्टा लागीं वा भितर आसतनाच लोड जातल्यो.

प्रक्रिया निर्देशक

प्रक्रिया निर्देशक म्हळ्यार प्रतिमा लोड करतना दिसपी ल्हान एनिमेटेड चिन्न. तुमी कॅप्शन्स & स्किन वापरतात जाल्यार, प्रक्रिया निर्देशक आपोआप दाखयतले. नाजाल्यार तुमकां कांय समायोजन करपाची गरज आसा:

दरेक img घटक div घटकांत घालचो
(वा हेर खंयच्याय घटकांत – चड म्हायती खातीर अर्थीक एचटीएमएल पळयात)
दर एका img घटकाक gridzyImage वर्ग जोडात

<div class="gridzy">
  <div><img src="https://loremflickr.com/640/480?random=1" class="gridzyImage" alt="a random image" /></div>
  <div><img src="https://loremflickr.com/480/640?random=2" class="gridzyImage" alt="another random image" /></div>
  <div><img src="https://loremflickr.com/640/640?random=3" class="gridzyImage" alt="yet another random image" /></div>
  <div><img src="https://loremflickr.com/640/480?random=4" class="gridzyImage" alt="a random image again" /></div>
  <div><img src="https://loremflickr.com/640/480?random=5" class="gridzyImage" alt="one last random image" /></div>
</div>

ते उपरांत प्रतिमा लोड जावपाक वेळ लागल्यार तुमकां प्रक्रिया निर्देशक पळोवंक जाय.

फिल्टर करतात

ग्रिडझींतले फिल्टर सामके सादे पूण बळिश्ट आसात. तुमकां खंयच्याय प्रकारचें फिल्टर जाय आसलें तरी तें साकार करपासारकें आसपाची खूब शक्यताय आसा. तुमकां फकत जाय, थोडें CSS आनी थोडे HTML फॉर्म घटक ...

हांगा एक कार्यात्मक उदाहरण आसा:

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

पावलां पावलांनी बांदूंया

1. पयलीं आमकां Gridzy ची सदची HTML संरचना जाय आनी सगळ्या गॅलरी आयटमां खातीर वर्ग नांवां सेट करचीं म्हणजे आमी उपरांत तीं फिल्टर करूंक शकतले

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

ह्या उदाहरणांत आमी दर एका घटका खातीर फकत एक वर्ग वापरतात. पूण तुमी एकाच घटकाखातीर जायते वर्गय सेट करूंक शकतात, जर तो घटक एका परस चड फिल्टरांतल्यान सोदपाक मेळपाक जाय.

2. मागीर आमी कांय बटणां जोडटात जाचे वरवीं आमी मागीर फिल्टर बदलूंक शकतात

<button value="*">All</button>
<button value=".animals">Animals</button>
<button value=".architecture">Architecture</button>
<button value=".people">People</button>

<div class="gridzy">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

बटणां बदला, तुमी हेर फॉर्म घटक जशे की चेकबॉक्स, रेडिओ बटण, निवड क्षेत्रां आनी हेर वापरूं येताले.

तुमकां दिसता तशें, बटणांचीं मोलां सदचे CSS निवडपी आसात. आमी सोंपयतकच, अशा बटणाचेर क्लिक केल्यार त्या CSS निवडकाक जुळपी प्रतिमा दाखयतले. तंत्रीक नदरेन तो फकत filter पर्याय ह्या मोलाचेर सेट करता.

तुमी खूब चड गुंतागुंतीचे निवडपीय वापरूं येतात. देखीक :not(.animals) लेगीत काम करतले, तशेंच .animals.people आनी .animals, .people .

3. निमाणें, आमी बटणां div कंटेनरांत कॅप्सूल करतात आनी तांकां Gridzy गॅलरीक बांदतात, filterControls पर्याय सेट करून:

<div id="myFilterControls">
  <button value="*">All</button>
  <button value=".animals">Animals</button>
  <button value=".architecture">Architecture</button>
  <button value=".people">People</button>
</div>

<div class="gridzy" data-gridzy-filterControls="#myFilterControls button">
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=1" alt="a random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=1" alt="a random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=1" alt="a random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=2" alt="another random animal image" />
  <img class="architecture" src="https://loremflickr.com/640/480/arch?random=2" alt="another random architecture image" />
  <img class="people" src="https://loremflickr.com/640/480/people?random=2" alt="another random people image" />
  <img class="animals" src="https://loremflickr.com/640/480/animals?random=3" alt="yet another random animal image" />
</div>

तुमकां दिसता तशें, आमी filterControls पर्यायाखातीर CSS निवडपीय वापरतात. id गुणधर्म आशिल्लो div कंटेनर फकत त्या CSS निवडका वरवीं बटणां निवडप सोंपें करपाचें काम करता.

तें जालें!

तुमकां जावास्क्रिप्ट उपाय पसंत आसल्यार, API पळयात.

एपीआय

Gridzy कडेन स्वताचो API आसलो तरी चडशीं गजाली ताचे बगर करूं येतात, फकत DOM कडेन बदल करून. ग्रिडझीक तें लक्षांत येतलें आनी ग्रिड समायोजीत करतलो. पूण एक सामको बळिश्ट एपीआयय आसा ...

डीओएमांत हाताळणी करप

सगळ्या Document Object Model (DOM) मॅनिपुलेशनां खातीर आमकां पयलीं कंटेनर घटक जाय:

// get the container element
var gridzyElement = document.querySelector('.gridzy');

प्रतिमा जोडात

तुमी तो कंटेनर घटकांत जोडचे पयलीं नवो बाल घटक पुरायपणान तयार करप आनी भरप म्हत्वाचें. नाजाल्यार Gridzy योग्य परिमाण सोदून काडूंक शकना.

// create a new img element
var newImage = document.createElement('img');

// add src attribute (!! before you add it to the container element !!)
newImage.src = 'https://loremflickr.com/640/480';

// add it as last element to the container element
gridzyElement.appendChild(newImage);

// or as first element (or anywhere in between)
gridzyElement.insertBefore(newImage, gridzyElement.firstChild);

प्रतिमा काडून उडोवप

// remove the first image
gridzyElement.removeChild(gridzyElement.firstElementChild);

पर्याय बदलात

// change the spaceBetween option to a specific value
gridzyElement.setAttribute('data-gridzy-spaceBetween', '10');

// change the layout option to a specific value
gridzyElement.setAttribute('data-gridzy-layout', 'waterfall');

// reset the spaceBetween option to its default value
gridzyElement.removeAttribute('data-gridzy-spaceBetween');

DOM हाताळपा विशीं चड तुमकां MDN web docs हांगा मेळूं येता . तशेंच डीओएमची वळख उपलब्ध आसा.

मालकी एपीआय

API वापरपाक, आमकां पयलीं Gridzy दृष्टांत जाय, जो Gridzy कंटेनर घटकाक बांदला:

// get the Gridzy instance
var gridzyInstance = document.querySelector('.gridzy').gridzy;

पर्याय मेळोवचो

// get the value of a single option
var currentLayout = gridzyInstance.getOption('layout');

सगळे पर्याय मेळोवचे

// get all option values as an object
var currentOptions = gridzyInstance.getOptions();

पर्याय सेट करात

// set specific option values
gridzyInstance.setOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

// or reset options to their default values
gridzyInstance.setOptions({
  spaceBetween: null,
  layout: null
});

फिल्टर लागू करचें

फिल्टर लागू करप म्हणल्यार फकत पर्याय filter सेट करप जें खंयचोय वैध CSS निवडपी आसूं येता:

// set the filter to match items with class "animals"
gridzyInstance.setOptions({
  filter: '.animals'
});

// reset the filter to match all items again
gridzyInstance.setOptions({
  filter: '*'
});

// set the filter to match items without class "animals"
gridzyInstance.setOptions({
  filter: ':not(.animals)'
});

// set the filter to match items with class "animals" or "people"
gridzyInstance.setOptions({
  filter: '.animals, .people'
});

// set the filter to match items that have both classes, "animals" and "people"
gridzyInstance.setOptions({
  filter: '.animals.people'
});

कॉलबॅक कार्यां जोडचीं

आवृत्ती 2.4.0 सावन ना
ताचे बदला आधुनीक आनी चड लवचीक इव्हेंट वापरात. तपशीलां खातीर फुडलो विभाग पळयात.

Gridzy.js 2 कॉलबॅक कार्यांखातीर कांय पर्यायांक तेंको दिता. ते फकत मालकीच्या एपीआय वरवीं सेट करूंक शकतात, पूण हेर पर्यायां प्रमाण:

// same as set other options
gridzyInstance.setOptions({
  onOptionsChanged: function() {
    // will be executed each time the options have changed.
  },
  onBeforeOptionsChanged: function() {
    // will be executed, before new options take effect.
  }
});

	~~वर्णन~~
~~`onBeforeOptionsChanged`~~	~~पर्याय सेट करचे पयलीं थेट आवाहन केल्लें कॉलबॅक फंक्शन.~~
~~`onOptionsChanged`~~	~~पर्याय सेट केल्या उपरांत थेट आवाहन केल्लें कॉलबॅक फंक्शन.~~
~~`onBeforeRender`~~	~~रेंडर करचे पयलीं थेट आवाहन केल्लें कॉलबॅक फंक्शन.~~
~~`onRender`~~	~~रेंडर केल्या उपरांत थेट आवाहन केल्लें कॉलबॅक फंक्शन.~~

इव्हेंट वापरात

आवृत्ती 2.4.0 सावन

तुमी Gridzy घडणुको सदच्या जावास्क्रिप्ट घडणुकां प्रमाणच वापरूं येतात:

document.addEventListener('gridzyOptionsChanged', function(event) {
    // will be executed each time the options have changed.
});

document.addEventListener('gridzyBeforeOptionsChanged', function(event) {
    // will be executed, before new options take effect.
});

कांय घडणुको ग्रिडझी कंटेनर घटकाचेर आनी हेर घडणुको कंटेनर घटका भितरल्या वैयक्तीक आयटम घटकांचेर फायर करतात.

ग्रिडझी कंटेनर घटकाचेर फायर केल्लीं घडणुको:

	वर्णन
`gridzyBeforeInit`	गॅलरी आरंभ करचे पयलीं फायर जाता.
`gridzyInit`	गॅलरी आरंभ केल्या उपरांत फायर जाता.
`gridzyBeforeOptionsChanged`	पर्याय सेट करचे पयलीं फायर करता.
`gridzyOptionsChanged`	पर्याय सेट केल्या उपरांत फायर जाता.
`gridzyBeforeRender`	रेंडर करचे पयलीं उजो लायता.
`gridzyRender`	रेंडर केल्या उपरांत उजो लागता.

तुमकां हांगा खंयचीय कार्यावळी चुकली जाल्यार, उपकार करून आदार विनंती धाडात .

event.target Gridzy कंटेनर घटक पुरवण करता.
event.detail.instance Gridzy दृष्टांत पुरवण करता.

आयटम घटकांचेर फायर केल्लीं घडणुको: १.

	वर्णन
`gridzyItemBeforeInit`	आयटम आरंभ करचे पयलीं फायर करता.
`gridzyItemInit`	आयटम आरंभ केल्या उपरांत फायर जाता.
`gridzyItemLoading`	आयटम लोड जावपाक लागता तेन्ना फायर जाता.
`gridzyItemReady`	जेन्ना आयटम ग्रिड गणने खातीर तयार जाता तेन्ना फायर करता. म्हणल्यार आस्पॅक्ट रेशियो खबर आसा, पूण प्रतिमा अजूनय लोड जावंक शकता.
`gridzyItemComplete`	आयटम प्रतिमा पुरायपणान लोड जातकच फायर जाता.

तुमकां हांगा खंयचीय कार्यावळी चुकली जाल्यार, उपकार करून आदार विनंती धाडात .

event.target त्या त्या आयटम घटक पुरवण करता.
event.detail.instance Gridzy दृष्टांत पुरवण करता.

एपीआय – जागतीक

कांय फंक्शनां आसात जीं ग्रिझी दृष्टांतां पासून स्वतंत्र आसात. देखून आमकां आदीं एक दृष्टांत मेळपाची गरज ना.

मुलभूत पर्याय मेळोवचो

// get the default value of a single option
var defaultLayout = Gridzy.getDefaultOption('layout');

सगळे मुलभूत पर्याय मेळोवचे

// get all default option values as an object, including the default layout options of the default layout
var defaultOptions = Gridzy.getDefaultOptions();

// or get all default option values, including the default layout options of a specific layout
var defaultOptions = Gridzy.getDefaultOptions('waterfall');

मुलभूत पर्याय सेट करात

हाका लागून पयलींच आरंभ केल्ल्या सगळ्या Gridzy दृष्टांतांचे पर्याय सेट करूंक नात, पूण नव्या दृष्टांतांक आदार व्याख्या करता. पूण, सद्याच्या दृष्टांताचो पर्याय null मोला वरवीं रीसेट जातलो जाल्यार, तो नवे मुलभूत मोल वापरतलो.

// set default option values
Gridzy.setDefaultOptions({
  spaceBetween: 10,
  layout: 'waterfall'
});

तुमी हाचो वापर जागतीक रितीन पर्याय सेट करपाक करूंक शकतात, जर तुमी DOM तयार जावचे पयलीं ताका कॉल केल्यार. देखून तुमकां आतां पर्याय गुणधर्म म्हणून सेट करपाची गरज नासली.

स्वयंचलीतताय

जो मेरेन Gridzy.js 2 चे सगळे ऑटोमेटिझम सक्रिय आसात, तो मेरेन सकयल दिल्ल्या पद्दतींची गरज ना. पूण ग्रिडझी चड पारंपारीक पद्दतीन वापरपाखातीर ऑटोमेटिझम बंद करूं येतात:

// disable automatic initializations
Gridzy.setDefaultOptions({
  autoInitOnDomReady: false,
  autoInitOnDomMutation: false
});

// or switch off all mutation observers
Gridzy.setDefaultOptions({
  autoInitOnDomMutation: false,
  autoSyncChildListMutation: false,
  autoSyncAttributesMutation: false,
  autoSyncChildClassMutation: false,
  autoSyncImageMutation: false
});

ह्या कांय पर्यायांक data-gridzy- गुणधर्मां वरवीं वा setOptions() वरवीं सेट करूंक मेळना, कारण तार्कीक कारणांक लागून:

	मुलभूत मोल	वर्णन
`autoInitOnDomReady`	`true`	पान लोडिंगाचेर `gridzy` वर्ग आशिल्ले घटक सोदून काडटा आनी तांकां आरंभ करता. `Gridzy.setDefaultOptions()` वरवीं सेट करपाक मेळटा.
`autoInitOnDomMutation` उत्परिवर्तननिरिक्षक	`true`	DOM त दिसले बरोबर वर्ग `gridzy` आशिल्ले नवे घटक सोदून काडटा आनी तांकां आरंभ करता. (देखीक पान संक्रमण वापरपाचेर) `Gridzy.setDefaultOptions()` वरवीं सेट करपाक मेळटा.
`autoSyncChildListMutation` उत्परिवर्तननिरीक्षक	`true`	बाल घटक (प्रतिमा) जोडल्यात वा काडल्यात काय ना तें सोदून काडटा, आनी ग्रिड आपोआप अद्ययावत करता. `data-grizy-` वरवीं सेट करपाक येता- , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	`data-gridzy-` गुणधर्म सादारणपणान वापरतात काय ना हाची व्याख्या करता. जर हें `false` आसल्यार पर्याय फकत मालकी एपीआय वरवीं सेट करूंक शकतात. `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` वरवीं सेट करपाक मेळटा.
`autoSyncAttributesMutation` उत्परिवर्तननिरिक्षक	`true`	`data-gridzy-` गुणधर्मांतले बदल सोदून काडटा, आनी ग्रिड आपोआप अद्ययावत करता. तशेंच `gridzyAnimated` वर्ग जोडला वा काडून उडयला आनी `style` गुणधर्मांत बदल जाल्यार सोदून काडटा. `useOptionAttributes` `false` आसल्यार, तो फकत `style` गुणधर्म बदल सोदून काडटा. `data-grizy-` वरवीं सेट करपाक येता- , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` उत्परिवर्तननिरिक्षक	`true`	सगळ्या बाल घटकांच्या (प्रतिमा) `class` गुणधर्मांतले बदल सोदून काडटा. फिल्टर संबंदी संबंदीत. `data-grizy-` वरवीं सेट करपाक येता- , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` उत्परिवर्तननिरिक्षक आवृत्ती 2.5.0 सावन	`true`	सगळ्या प्रतिमांच्या `src` गुणधर्मांतले बदल सोदून काडटा. React वा तत्सम लायब्ररी वांगडा वापरतना संबंदीत. `data-grizy-` वरवीं सेट करपाक येता- , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver हें यंत्र आवृत्ती 2.6.0 सावन	`true`	घटक रुंदायेंत बदल सोदून काडटा. प्रतिसाद दिवपी डिझायन संबंदी संबंदीत. (आवृत्ती 2.6.0 पयलीं एक विंडो आकार बदलपी इव्हेंट आयकपी वापरताले) `data-grizy-` वरवीं सेट करपाक येता- , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

हाताळणी करून आरंभ करचें

// initialize a new Gridzy instance
var gridzyInstance = new Gridzy(document.querySelector('.gridzy'), {
  spaceBetween: 10,
  layout: 'waterfall'
});

दृष्टांत नश्ट करप

अदमासाक म्हणल्यार ग्रिड्झीक आरंभ करपाच्या उरफाटें.

gridzyInstance.destroy();
gridzyInstance = null;

बाल वळेरी हाताळणीन समक्रमीत करात

// after child elements (images) are added to or removed from the DOM.
gridzyInstance.syncChildList();

एकच भुरगो घटक हाताळणीन समक्रमीत करचो

चड करून गरज नासता, फकत खूब क्वचितच प्रकरणां सोडल्यार.

// after child elements (images) are added to the DOM and only one of them should be synced to Gridzy.
gridzyInstance.syncChild(childElement);

गुणधर्म हाताळणीन समक्रमीत करात

हाचेखातीर useOptionAttributes पर्याय true आसपाक जाय हें लक्षांत दवरात.

// after data-gridzy- attributes have changed
gridzyInstance.syncAttributes();

फोर्स रेंडरींग करप

चड करून गरज ना, जरी सगळे ऑटोमेटिझम बंद आसले तरी

gridzyInstance.render();

वर्डप्रेस प्लगइन

जावास्क्रिप्ट लायब्ररी

सेवा