संस्करण 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` मार्गेण स्वयमेव सेट् भवति (अग्रे विकल्पं पश्यन्तु) । Filters इति पश्यन्तु
`filterControls`		बिम्बानां छाननाय केषां रूपतत्त्वानां उपयोगः कर्तुं शक्यते इति निर्धारयति । कोऽपि CSS चयनकर्ता, यः HTML रूपतत्त्वानि चिनोति, सः अत्र मूल्यरूपेण उपयोक्तुं शक्यते । Filters इति पश्यन्तु
`autoConsiderScrollBars`	`true`	यदि स्क्रॉल-पट्टिकाः दृश्यन्ते अथवा अन्तर्धानं भवन्ति तर्हि उपलब्धविस्तारस्य पूर्वानुमानं कर्तुं । यावत् एतत् स्वचालनं समस्यां न जनयति तावत् `true` त्यक्तुं सर्वदा अनुशंसितम् ।

Justified लेआउट विकल्प

	पूर्वनिर्धारितं मूल्यम्	वर्णनम्‌
`autoFontSize`	`false`	मूलपेटिकायाः आकारस्य आधारेण प्रत्येकस्य पेटीयाः font-size गुणं स्वयमेव अद्यतनं करोति । पूर्वनिर्धारितरूपेण font-size गुणः स्पष्टतया न सेट् भवति ।
`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`	मूलपेटिकायाः आकारस्य आधारेण प्रत्येकस्य पेटीयाः font-size गुणं स्वयमेव अद्यतनं करोति । पूर्वनिर्धारितरूपेण font-size गुणः स्पष्टतया न सेट् भवति ।
`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 पश्यन्तु ।

शब्दार्थ एचटीएमएल

Gridzy इत्यस्य सरलतमं 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 संरचनानां उपयोगं कर्तुं शक्नोति । तत्र केवलं कतिचन बिन्दवः विचारणीयाः सन्ति- १.

पात्रतत्त्वस्य प्रत्येकं बालकं जालपुटे एकं द्रव्यं प्रतिनिधियति ।
container element अपि तस्य बालकाः च कोऽपि टैग् प्रकारः भवितुम् अर्हति, यथा ul तथा li (मात्रं ब्राउजर् पूर्वनिर्धारितं पुनः सेट् कर्तुं विचारयन्तु) ।
यदि img तत्वं स्वयं प्रत्यक्षं बालकं नास्ति तर्हि तस्य gridzyImage वर्गस्य आवश्यकता भवति ।

अतः इदमपि कार्यरतं HTML संरचना अस्ति :

<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>

विशेषतः यदि भवान् कैप्शनं योजयितुम् इच्छति तर्हि उन्नत HTML संरचना आवश्यकी । तस्य विषये अधिकं ज्ञातुं Captions & Skins इति पश्यन्तु ।

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 zoom कार्यक्षमता न समाविष्टा लाइव पूर्वावलोकन	`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 IE मध्ये कार्यं न करोति लाइव पूर्वावलोकन	`gridzySkinBlur` `gridzySkinBlurLight`(2.6.0 संस्करणात् अप्रवर्तितम्)
gridzySkinCard लाइव पूर्वावलोकन	`gridzySkinCard` `gridzySkinCardLight`(2.6.0 संस्करणात् अप्रवर्तितम्)

त्वचा विकल्प

2.6.0 संस्करणात् अन्तर्निर्मित-स्किन्स् विन्यस्तुं विकल्पाः सन्ति । विशिष्ट त्वचायाः आधारेण भवान् पृष्ठभूमिवर्णं, पाठवर्णं, पाठछाया च सेट् कर्तुं शक्नोति । भवद्भिः केवलं CSS custom properties इत्यस्य उपयोगः कर्तव्यः यथा भवन्तः अत्र द्रष्टुं शक्नुवन्ति:

<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 पाठ-छाया मूल्यं अनुमन्यते

सर्वाणि पूर्वनिर्धारितस्किन्स् केवलं सरलपाठकॅप्शन्स् समर्थयन्ति । भवन्तः स्वस्य एव अधिकजटिलत्वक् निर्मातुं शक्नुवन्ति। कृपया Style Gridzy इत्येतत् अवलोकयन्तु .

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

यदि पूर्वनिर्धारितं त्वचा भवतः आवश्यकतानुसारं न भवति तर्हि भवन्तः स्वस्य त्वक् शैलीं कर्तुं शक्नुवन्ति ।

सर्वाधिकसुलभः उपायः प्रथमं विद्यमानस्य त्वचायाः प्रतिलिपिं कृत्वा स्वस्य आवश्यकतानुसारं अनुकूलनं करणीयम् । पूर्वनिर्धारितं त्वचा 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 layout विकल्पं autoFontSize अवलोकयन्तु, यत् font-size इत्येतत् item box size इत्यस्य उपरि बन्धयति ।
प्रत्येकं द्रव्यस्य सुनिर्दिष्टः आस्पेक्ट् रेश्यो भवितुमर्हति । मदस्य आस्पेक्ट् रेश्यो कदापि न परिवर्तते तथा च जालस्य गणनाय आवश्यकम् अस्ति । अतः यदि कस्यचित् द्रव्यस्य स्वयमेव सुनिर्दिष्टः आस्पेक्ट् रेश्यो नास्ति तर्हि तत् मैन्युअल् रूपेण (उदा. css मार्गेण) पूर्वनिर्धारितं कुर्वन्तु ।

केषुचित् सन्दर्भेषु Gridzy इत्यस्य आरम्भात् पूर्वं द्रव्याणां सामग्रीं शैलीकरणं सुकरं भवितुम् अर्हति । अस्य कृते केवलं gridzy वर्गं अथवा Gridzy javascript सञ्चिकां अस्थायीरूपेण निष्कासयन्तु ।

तत् एव ! तदेव भवतः स्वस्य एव त्वचां निर्मातुं आवश्यकम्। अधिकांशः पूर्वनिर्धारितत्वक् एतस्मात् अधिकं न उपयुङ्क्ते ।

परन्तु अधिकं भवितुम् अर्हति यदि भवन्तः इच्छन्ति ...

उन्नत त्वचा

Gridzy केवलं gridzyItem इत्यस्मात् अधिकानि CSS वर्गाणि उपयुङ्क्ते । तेषु अधिकांशः स्वयमेव सेट् भविष्यति तथा च भवान् तान् स्टाइलिंग् कृते अपि उपयोक्तुं शक्नोति।

मुख्यपात्रवर्गाः

वर्गनाम वर्णनम्‌

gridzy
मैन्युअल् रूपेण सेट् कर्तुं Gridzy स्वयमेव अस्मिन् वर्गेण सह तत्त्वानि अन्विष्य तान् आरभते ।

gridzyAnimated यदि विकल्पः animate true अस्ति तर्हि स्वयमेव सेट् भविष्यति . यदि एषः वर्गः मैन्युअल् रूपेण सेट् भवति तर्हि animate विकल्पः स्वयमेव true अपि प्राप्स्यति (यदि स्पष्टतया false इति सेट् भवति तर्हि व्यतिरिक्तम्) ।

वर्गनाम	वर्णनम्‌
`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 सञ्चिकां द्रष्टुं साहसं कुर्वन्तु, भवद्भिः किं अधिलिखितव्यं भविष्यति इति अवगन्तुम् । न भयम्, सर्वं तत्र सुदस्तावेजितम् अस्ति।

लोडिंग् अनुकूलितं कुर्वन्तु

यदि भवान् अनेकानि चित्राणि उपयुङ्क्ते तर्हि Gridzy इत्यस्य जालस्य शीघ्रं निर्माणे सहायतां कर्तुं सद्विचारः भवितुम् अर्हति ।

जम्पिंग इमेज् निवारयन्तु

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

एतत् व्यवहारं निवारयितुं केवलं सर्वेषां 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>

एतेषां पदानां अनन्तरं चित्राणि दृश्यस्थानस्य समीपे वा अन्तः वा स्थित्वा एव लोड् भविष्यन्ति ।

प्रक्रिया सूचकः

प्रक्रियासूचकः लघु एनिमेटेड् चिह्नं भवति यत् चित्रस्य लोड् करणसमये दृश्यते । यदि भवान् captions & skins इत्यस्य उपयोगं करोति तर्हि प्रक्रियासूचकः स्वयमेव दर्शितः भविष्यति । अन्यथा भवतः केचन समायोजनानि आवश्यकानि सन्ति:

प्रत्येकं img तत्वं div एलिमेण्ट् मध्ये स्थापयन्तु
(अथवा अन्यस्मिन् कस्मिन् अपि तत्त्वे – अधिकार्थं शब्दार्थात्मकं HTML पश्यन्तु)
प्रत्येकं 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>

तदनन्तरं भवन्तः प्रक्रियासूचकाः द्रष्टव्याः यदि चित्राणि लोड् कर्तुं समयं लभन्ते ।

फ़िल्टर

Gridzy इत्यस्मिन् फ़िल्टर्स् बहु सरलाः परन्तु शक्तिशालिनः सन्ति । भवतः किमपि प्रकारस्य फ़िल्टरस्य आवश्यकता अस्ति चेदपि, अत्यन्तं सम्भाव्यते यत् एतत् साक्षात्करणीयम् अस्ति। भवद्भ्यः केवलं, किञ्चित् 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 संरचना आवश्यकं भवति तथा च सर्वेषां gallery items कृते class names सेट् कुर्वन्तु येन वयं तान् पश्चात् filter कर्तुं शक्नुमः

<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 container मध्ये encapsulate कृत्वा Gridzy gallery मध्ये बाइन्ड् कुर्मः, 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 चयनकस्य माध्यमेन बटन्-चयनं सुलभं कर्तुं कार्यं करोति ।

तत् एव !

यदि भवान् JavaScript समाधानं प्राधान्यं ददाति तर्हि API पश्यन्तु ।

एपिआइ

यद्यपि Gridzy इत्यस्य स्वकीयः API अस्ति तथापि अधिकांशं कार्यं तस्य विना कर्तुं शक्यते, केवलं DOM इत्यस्य परिवर्तनेन । ग्रिड्जी तत् अवलोकयिष्यति, जालं समायोजयिष्यति च । परन्तु अतीव शक्तिशाली एपिआइ अपि अस्ति ...

DOM इत्यस्य हेरफेरः

सर्वेषां Document Object Model (DOM) परिवर्तनानां कृते प्रथमं अस्माकं container element इत्यस्य आवश्यकता वर्तते:

// 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 इत्यत्र प्राप्नुवन्ति । DOM इत्यस्य परिचयः अपि उपलभ्यते ।

स्वामित्व एपिआइ

API इत्यस्य उपयोगाय प्रथमं Gridzy instance इत्यस्य आवश्यकता वर्तते, यत् Gridzy container element इत्यनेन सह bind अस्ति:

// 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'
});

Callback Functions योजयन्तु

संस्करण 2.4.0 तः क्षीणम्
तस्य स्थाने आधुनिकं अधिकं लचीलं च Events इत्यस्य उपयोगं कुर्वन्तु। विस्तरेण अग्रिमः विभागः पश्यन्तु ।

Gridzy.js 2 callback functions कृते केचन विकल्पाः समर्थयति । ते केवलं स्वामित्व-एपिआइ-माध्यमेन सेट् कर्तुं शक्यन्ते, परन्तु अन्येषां विकल्पानां इव:

// 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`~~	~~Callback function यत् रेण्डरिंग् इत्यस्मात् पूर्वं प्रत्यक्षतया आह्वानं भवति ।~~
~~`onRender`~~	~~Callback function यत् रेण्डरिंग् करणानन्तरं प्रत्यक्षतया आह्वयते ।~~

Events इत्यस्य उपयोगं कुर्वन्तु

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.
});

केचन घटनाः Gridzy पात्रतत्त्वे प्रज्वलिताः भवन्ति अन्ये च घटनाः पात्रतत्त्वस्य अन्तः व्यक्तिगतवस्तुतत्त्वेषु प्रज्वलिताः भवन्ति ।

ग्रिड्जी पात्रतत्त्वे प्रज्वलिताः घटनाः : १.

	वर्णनम्‌
`gridzyBeforeInit`	गैलरी आरम्भीकरणात् पूर्वं अग्निः ।
`gridzyInit`	गैलरी आरम्भीकरणानन्तरं अग्निः।
`gridzyBeforeOptionsChanged`	विकल्पान् सेट् कर्तुं पूर्वं अग्निम् अयच्छति।
`gridzyOptionsChanged`	विकल्पान् सेट् कृत्वा अग्निम् अयच्छति।
`gridzyBeforeRender`	प्रतिपादनात् पूर्वं अग्नयः ।
`gridzyRender`	प्रतिपादनानन्तरं अग्नयः ।

यदि भवान् अत्र किमपि आयोजनं त्यजति तर्हि कृपया समर्थनानुरोधं प्रेषयतु .

event.target Gridzy पात्रतत्त्वं प्रदाति ।
event.detail.instance Gridzy उदाहरणं प्रदाति ।

मदतत्त्वेषु प्रज्वलिताः घटनाः : १.

	वर्णनम्‌
`gridzyItemBeforeInit`	मद आरम्भीकरणात् पूर्वं अग्निम् अयच्छति ।
`gridzyItemInit`	मद आरम्भीकरणानन्तरं अग्निम् अयच्छति।
`gridzyItemLoading`	यदा द्रव्यं लोड् कर्तुं आरभते तदा अग्निम् अयच्छति।
`gridzyItemReady`	यदा द्रव्यं जालगणनायै सज्जं भवति तदा अग्निम् अयच्छति । अतः आस्पेक्ट् रेश्यो ज्ञायते, परन्तु इमेज् अद्यापि लोड् भवति स्यात् ।
`gridzyItemComplete`	यदा मदप्रतिबिम्बं पूर्णतया लोड् भवति तदा अग्निम् अयच्छति ।

यदि भवान् अत्र किमपि आयोजनं त्यजति तर्हि कृपया समर्थनानुरोधं प्रेषयतु .

event.target तत्सम्बद्धं मदतत्त्वं प्रदाति ।
event.detail.instance Gridzy उदाहरणं प्रदाति ।

एपिआइ – वैश्विक

केचन कार्याणि सन्ति ये Gridzy instances इत्यस्मात् स्वतन्त्राः सन्ति । अतः अस्माकं पूर्वं उदाहरणं प्राप्तुं आवश्यकता नास्ति।

पूर्वनिर्धारितविकल्पं प्राप्नुत

// 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 इत्यस्य सर्वे automatisms सक्रियाः सन्ति तावत् अधोलिखितानां पद्धतीनां आवश्यकता नास्ति । परन्तु अधिकपरम्परागतरूपेण ग्रिड्जी इत्यस्य उपयोगाय स्वचालनानि निष्क्रियं कर्तुं शक्यन्ते:

// 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` उत्परिवर्तनपर्यवेक्षक २.५.० संस्करणात् आरभ्य	`true`	सर्वेषां चित्राणां `src` विशेषतानां परिवर्तनं पश्यति । React अथवा तत्सदृशपुस्तकालयैः सह प्रयोगे प्रासंगिकः । `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` के माध्यमे सेट् कर्तुं शक्यते
`autoRenderOnResize` ResizeObserver इति २.६.० संस्करणात् आरभ्य	`true`	तत्त्वविस्तारस्य परिवर्तनं पश्यति । प्रतिक्रियाशील डिजाइनस्य विषये प्रासंगिकम्। (संस्करणस्य २.६.० पूर्वं विण्डो-आकार-परिवर्तन-इवेण्ट्-श्रोता उपयुज्यते स्म) `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();

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

जावास्क्रिप्ट पुस्तकालय

सेवा

संस्करणम् २.x