ಆವೃತ್ತಿ 2.x – Gridzy.Gallery

ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಅನುವಾದಿಸಲಾಗಿದೆ. ಏನಾದರೂ ಸ್ಪಷ್ಟವಾಗಿಲ್ಲದಿದ್ದರೆ, ದಯವಿಟ್ಟು ಇಂಗ್ಲಿಷ್ ದಸ್ತಾವೇಜನ್ನು ನೋಡಿ.

ಮೂಲ ಬಳಕೆ

ಗ್ರಿಡ್ಜಿ ಫೈಲ್‌ಗಳನ್ನು ನಿಮ್ಮ ಸರ್ವರ್‌ಗೆ ಅಪ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಅವುಗಳನ್ನು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಸೇರಿಸಿ (ಸಾಮಾನ್ಯವಾಗಿ ಹೆಡ್ ವಿಭಾಗದಲ್ಲಿ):

<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`		ಚಿತ್ರಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಲು ಯಾವ ರೂಪದ ಅಂಶಗಳನ್ನು ಬಳಸಬಹುದು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. HTML ಫಾರ್ಮ್ ಅಂಶಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡುವ ಯಾವುದೇ CSS ಸೆಲೆಕ್ಟರ್ ಅನ್ನು ಇಲ್ಲಿ ಮೌಲ್ಯವಾಗಿ ಬಳಸಬಹುದು. ಫಿಲ್ಟರ್‌ಗಳನ್ನು ಪರಿಶೀಲಿಸಿ
`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 ಅನ್ನು ಪರಿಶೀಲಿಸಿ.

ಲಾಕ್ಷಣಿಕ HTML

ಗ್ರಿಡ್ಜಿಯ ಸರಳವಾದ 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 ರಚನೆಯನ್ನು ಬಳಸಬಹುದು. ಪರಿಗಣಿಸಲು ಕೆಲವೇ ಅಂಶಗಳಿವೆ:

ಕಂಟೇನರ್ ಅಂಶದ ಪ್ರತಿ ಮಗು ಗ್ರಿಡ್ನಲ್ಲಿ ಒಂದು ಐಟಂ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.
ಕಂಟೇನರ್ ಎಲಿಮೆಂಟ್ ಮತ್ತು ಅದರ ಮಕ್ಕಳು ಎರಡೂ ಯಾವುದೇ ಟ್ಯಾಗ್ ಪ್ರಕಾರವಾಗಿರಬಹುದು, ಉದಾಹರಣೆಗೆ 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 ರಚನೆಯ ಅಗತ್ಯವಿದೆ. ಅದರ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿದುಕೊಳ್ಳಲು, ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ಚರ್ಮಗಳನ್ನು ನೋಡಿ.

ಶೀರ್ಷಿಕೆಗಳು ಮತ್ತು ಚರ್ಮಗಳು

ನಿಮ್ಮ ಗ್ಯಾಲರಿಗೆ ಶೀರ್ಷಿಕೆಗಳನ್ನು ಸೇರಿಸಲು ನೀವು ಬಯಸಿದರೆ, ನೀವು ನೋಟವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬೇಕು. ಆದ್ದರಿಂದ, ಕೆಲವು ಪೂರ್ವನಿರ್ಧರಿತ ಚರ್ಮಗಳು ಲಭ್ಯವಿದೆ. ಪ್ರತಿಯೊಂದು ಚರ್ಮವು CSS ಫೈಲ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ನೀವು ಮುಖ್ಯ ಗ್ರಿಡ್ಜಿ ಫೈಲ್‌ಗಳಿಗೆ ಹೆಚ್ಚುವರಿಯಾಗಿ ಈ ಫೈಲ್ ಅನ್ನು ಸೇರಿಸುವ ಅಗತ್ಯವಿದೆ (ಸಾಮಾನ್ಯವಾಗಿ ಹೆಡ್ ವಿಭಾಗದಲ್ಲಿ):

<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 ರಚನೆಯ ಬಗ್ಗೆ ಆಶ್ಚರ್ಯ ಪಡುತ್ತಿದ್ದರೆ, ಸೆಮ್ಯಾಂಟಿಕ್ 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 ಫೈಲ್ ಅಗತ್ಯವಿರುತ್ತದೆ, ಆದರೆ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಅಗತ್ಯವಿರುವ ಹೆಚ್ಚುವರಿ ಸ್ಕಿನ್‌ಗಳಿವೆ:

<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 ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಬೇಕಾಗುತ್ತದೆ:

<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 ಸಾಮಾನ್ಯವಾಗಿ ಸಿಎಸ್‌ಎಸ್ ಫೈಲ್‌ನಲ್ಲಿ ಉತ್ತಮ ಅಡಿಪಾಯ ಮತ್ತು ಉತ್ತಮ ದಾಖಲಾತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ:

/** 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 ಕಾಣುವಿರಿ. ಗ್ರಿಡ್ಜಿ ಈ ವರ್ಗವನ್ನು ಮುಖ್ಯ ಕಂಟೇನರ್ ಅಂಶದ ಎಲ್ಲಾ ನೇರ ಮಕ್ಕಳಿಗೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಸುತ್ತದೆ. ಆದ್ದರಿಂದ, ನಿಮ್ಮ ಗ್ಯಾಲರಿಯ ಐಟಂಗಳನ್ನು ಶೈಲಿ ಮಾಡಲು ನೀವು ಈ ವರ್ಗವನ್ನು ಬಳಸಬಹುದು.

ಮುಖ್ಯವಾದ ವಿಷಯಗಳನ್ನು ಮನಸ್ಸಿನಲ್ಲಿಟ್ಟುಕೊಳ್ಳಿ

ಐಟಂ ವಿಷಯಗಳು ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಪಂದಿಸುವಂತಿರಬೇಕು. ಅಂಶದ ಗಾತ್ರವು ಖಂಡಿತವಾಗಿಯೂ ಬದಲಾಗುತ್ತದೆ ಎಂದು ಪರಿಗಣಿಸಿ. ಪಿಕ್ಸೆಲ್ ಮೌಲ್ಯಗಳ ಬದಲಿಗೆ ಶೇಕಡಾವಾರು ಮೌಲ್ಯಗಳನ್ನು ಬಳಸಿ. ಮತ್ತು ಗ್ರಿಡ್ಜಿ ಲೇಔಟ್ ಆಯ್ಕೆಯನ್ನು ನೋಡೋಣ autoFontSize , ಇದು ಫಾಂಟ್-ಗಾತ್ರವನ್ನು ಐಟಂ ಬಾಕ್ಸ್ ಗಾತ್ರಕ್ಕೆ ಬಂಧಿಸುತ್ತದೆ.
ಪ್ರತಿಯೊಂದು ಐಟಂ ಚೆನ್ನಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಆಕಾರ ಅನುಪಾತವನ್ನು ಹೊಂದಿರಬೇಕು. ಐಟಂನ ಆಕಾರ ಅನುಪಾತವು ಎಂದಿಗೂ ಬದಲಾಗುವುದಿಲ್ಲ ಮತ್ತು ಗ್ರಿಡ್ ಅನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಇದು ಅಗತ್ಯವಾಗಿರುತ್ತದೆ. ಆದ್ದರಿಂದ ಒಂದು ಐಟಂ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಉತ್ತಮವಾಗಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಆಕಾರ ಅನುಪಾತವನ್ನು ಹೊಂದಿಲ್ಲದಿದ್ದರೆ, ಅದನ್ನು ಹಸ್ತಚಾಲಿತವಾಗಿ ಪೂರ್ವನಿರ್ಧರಿಸಿ (ಉದಾ css ಮೂಲಕ).

ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ಗ್ರಿಡ್ಜಿಯನ್ನು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ಐಟಂಗಳ ವಿಷಯವನ್ನು ಶೈಲಿ ಮಾಡುವುದು ಸುಲಭವಾಗಬಹುದು. ಇದಕ್ಕಾಗಿ ತಾತ್ಕಾಲಿಕವಾಗಿ ಕ್ಲಾಸ್ gridzy ಅಥವಾ ಗ್ರಿಡ್ಜಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಅನ್ನು ತೆಗೆದುಹಾಕಿ.

ಅಷ್ಟೇ! ನಿಮ್ಮ ಸ್ವಂತ ಚರ್ಮವನ್ನು ನಿರ್ಮಿಸಲು ನೀವು ಬೇಕಾಗಿರುವುದು ಅಷ್ಟೆ. ಹೆಚ್ಚಿನ ಪೂರ್ವನಿರ್ಧರಿತ ಚರ್ಮಗಳು ಇದಕ್ಕಿಂತ ಹೆಚ್ಚಿನದನ್ನು ಬಳಸುವುದಿಲ್ಲ.

ಆದರೆ ನೀವು ಇಷ್ಟಪಟ್ಟರೆ ಇನ್ನೂ ಹೆಚ್ಚು ಇರಬಹುದು ...

ಸುಧಾರಿತ ಚರ್ಮಗಳು

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`	ಗ್ರಿಡ್‌ನಲ್ಲಿ ಏನಾದರೂ ಬದಲಾದ ತಕ್ಷಣ ಹೊಂದಿಸಲಾಗುವುದು, ಆದರೆ ಐಟಂ ಸ್ವತಃ ಹಾಗೆಯೇ ಗೋಚರಿಸುತ್ತದೆ. ಬದಲಾವಣೆಯ ಅನಿಮೇಷನ್ ಮುಗಿದ ತಕ್ಷಣ ತೆಗೆದುಹಾಕಲಾಗುತ್ತದೆ.

ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ಪ್ರಕ್ರಿಯೆ ಸೂಚಕ ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳು ಕಾಣಿಸಿಕೊಳ್ಳುವ ಮತ್ತು ಕಣ್ಮರೆಯಾಗುವ ಚಿತ್ರಗಳನ್ನು ಗ್ರಿಡ್ಜಿ ಮುಖ್ಯ CSS ಫೈಲ್‌ನಿಂದ ಪೂರ್ವನಿರ್ಧರಿತಗೊಳಿಸಲಾಗಿದೆ.

ಈ ಮೇಲೆ ತಿಳಿಸಿದ CSS ತರಗತಿಗಳೊಂದಿಗೆ ನೀವು ನಿಮ್ಮ ಸ್ವಂತ ಪ್ರಕ್ರಿಯೆ ಸೂಚಕ ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಶೈಲಿ ಮಾಡಬಹುದು. ನೀವು ಅತಿಕ್ರಮಿಸಬೇಕಾದದ್ದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಗ್ರಿಡ್ಜಿ ಮುಖ್ಯ 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 ಅಂಶಕ್ಕೆ ಹಾಕಿ
(ಅಥವಾ ಯಾವುದೇ ಇತರ ಅಂಶಕ್ಕೆ - ಹೆಚ್ಚಿನದಕ್ಕಾಗಿ ಲಾಕ್ಷಣಿಕ 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>

ಚಿತ್ರಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಸಮಯ ತೆಗೆದುಕೊಂಡರೆ ಅದರ ನಂತರ ನೀವು ಪ್ರಕ್ರಿಯೆ ಸೂಚಕಗಳನ್ನು ನೋಡಬೇಕು.

ಶೋಧಕಗಳು

ಗ್ರಿಡ್ಜಿಯಲ್ಲಿನ ಫಿಲ್ಟರ್‌ಗಳು ಬಹಳ ಸರಳ ಆದರೆ ಶಕ್ತಿಯುತವಾಗಿವೆ. ನಿಮಗೆ ಯಾವ ರೀತಿಯ ಫಿಲ್ಟರ್ ಬೇಕಿದ್ದರೂ, ಅದು ಅರಿತುಕೊಳ್ಳುವ ಸಾಧ್ಯತೆಯಿದೆ. ನಿಮಗೆ ಬೇಕಾಗಿರುವುದು, ಸ್ವಲ್ಪ 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. ಮೊದಲಿಗೆ ನಮಗೆ ಗ್ರಿಡ್ಜಿಯ ಸಾಮಾನ್ಯ 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 ಕಂಟೇನರ್‌ನಲ್ಲಿ ಸುತ್ತಿಕೊಳ್ಳುತ್ತೇವೆ ಮತ್ತು 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 ಅನ್ನು ಪರಿಶೀಲಿಸಿ.

API

Gridzy ತನ್ನದೇ ಆದ API ಅನ್ನು ಹೊಂದಿದ್ದರೂ, DOM ಅನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುವ ಮೂಲಕ ಹೆಚ್ಚಿನ ಕೆಲಸಗಳನ್ನು ಅದಿಲ್ಲದೆ ಮಾಡಬಹುದು. ಗ್ರಿಡ್ಜಿ ಅದನ್ನು ಗಮನಿಸುತ್ತಾರೆ ಮತ್ತು ಗ್ರಿಡ್ ಅನ್ನು ಸರಿಹೊಂದಿಸುತ್ತಾರೆ. ಆದರೆ ಅತ್ಯಂತ ಶಕ್ತಿಯುತ API ಸಹ ಇದೆ ...

DOM ಅನ್ನು ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸುವುದು

ಎಲ್ಲಾ ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾಡೆಲ್ (DOM) ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ಗಳಿಗಾಗಿ ನಮಗೆ ಮೊದಲು ಕಂಟೇನರ್ ಅಂಶದ ಅಗತ್ಯವಿದೆ:

// get the container element
var gridzyElement = document.querySelector('.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 ವೆಬ್ ಡಾಕ್ಸ್‌ನಲ್ಲಿ ಕಾಣಬಹುದು. DOM ಗೆ ಒಂದು ಪರಿಚಯವೂ ಲಭ್ಯವಿದೆ.

ಸ್ವಾಮ್ಯದ API

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

ಫಿಲ್ಟರ್ ಅನ್ನು ಅನ್ವಯಿಸಿ

ಫಿಲ್ಟರ್ ಅನ್ನು ಅನ್ವಯಿಸುವುದು ಯಾವುದೇ ಮಾನ್ಯವಾದ CSS ಸೆಲೆಕ್ಟರ್ ಆಗಿರುವ ಆಯ್ಕೆಯ filter ಹೊಂದಿಸುತ್ತಿದೆ:

// 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 ಕಾಲ್‌ಬ್ಯಾಕ್ ಕಾರ್ಯಗಳಿಗಾಗಿ ಕೆಲವು ಆಯ್ಕೆಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ಅವುಗಳನ್ನು ಸ್ವಾಮ್ಯದ API ಮೂಲಕ ಮಾತ್ರ ಹೊಂದಿಸಬಹುದು, ಆದರೆ ಇತರ ಆಯ್ಕೆಗಳಂತೆ:

// 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 ರಿಂದ

ನೀವು ಸಾಮಾನ್ಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಈವೆಂಟ್‌ಗಳಂತೆಯೇ ಗ್ರಿಡ್ಜಿ ಈವೆಂಟ್‌ಗಳನ್ನು ಬಳಸಬಹುದು:

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 ಗ್ರಿಡ್ಜಿ ನಿದರ್ಶನವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಐಟಂ ಅಂಶಗಳ ಮೇಲೆ ನಡೆದ ಘಟನೆಗಳು:

	ವಿವರಣೆ
`gridzyItemBeforeInit`	ಐಟಂ ಆರಂಭಿಸುವ ಮೊದಲು ಬೆಂಕಿ.
`gridzyItemInit`	ಐಟಂ ಪ್ರಾರಂಭದ ನಂತರ ಬೆಂಕಿ.
`gridzyItemLoading`	ಐಟಂ ಲೋಡ್ ಆಗಲು ಪ್ರಾರಂಭಿಸಿದಾಗ ಬೆಂಕಿ ಹೊತ್ತಿಕೊಳ್ಳುತ್ತದೆ.
`gridzyItemReady`	ಗ್ರಿಡ್ ಲೆಕ್ಕಾಚಾರಕ್ಕೆ ಐಟಂ ಸಿದ್ಧವಾದಾಗ ಫೈರ್ ಆಗುತ್ತದೆ. ಆದ್ದರಿಂದ ಆಕಾರ ಅನುಪಾತವು ತಿಳಿದಿದೆ, ಆದರೆ ಚಿತ್ರವು ಇನ್ನೂ ಲೋಡ್ ಆಗುತ್ತಿರಬಹುದು.
`gridzyItemComplete`	ಐಟಂ ಚಿತ್ರವನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಮಾಡಿದಾಗ ಫೈರ್ ಆಗುತ್ತದೆ.

event.target ಆಯಾ ಐಟಂ ಅಂಶವನ್ನು ಒದಗಿಸುತ್ತದೆ.
event.detail.instance ಗ್ರಿಡ್ಜಿ ನಿದರ್ಶನವನ್ನು ಒದಗಿಸುತ್ತದೆ.

API - ಜಾಗತಿಕ

ಗ್ರಿಡ್ಜಿ ನಿದರ್ಶನಗಳಿಂದ ಸ್ವತಂತ್ರವಾಗಿರುವ ಕೆಲವು ಕಾರ್ಯಗಳಿವೆ. ಆದ್ದರಿಂದ ನಾವು ಮೊದಲು ನಿದರ್ಶನವನ್ನು ಪಡೆಯುವ ಅಗತ್ಯವಿಲ್ಲ.

ಡೀಫಾಲ್ಟ್ ಆಯ್ಕೆಯನ್ನು ಪಡೆಯಿರಿ

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

ಡೀಫಾಲ್ಟ್ ಆಯ್ಕೆಗಳನ್ನು ಹೊಂದಿಸಿ

ಇದು ಈಗಾಗಲೇ ಪ್ರಾರಂಭಿಸಿದ ಎಲ್ಲಾ ಗ್ರಿಡ್ಜಿ ನಿದರ್ಶನಗಳ ಆಯ್ಕೆಗಳನ್ನು ಹೊಂದಿಸುವುದಿಲ್ಲ, ಆದರೆ ಹೊಸ ನಿದರ್ಶನಗಳಿಗೆ ಆಧಾರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ನಿದರ್ಶನದ ಆಯ್ಕೆಯನ್ನು 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` ಸ್ವಾಮ್ಯದ API ಮೂಲಕ ಮಾತ್ರ ಆಯ್ಕೆಗಳನ್ನು ಹೊಂದಿಸಬಹುದು. `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` ಗುಣಲಕ್ಷಣಗಳ ಬದಲಾವಣೆಗಳನ್ನು ಪತ್ತೆ ಮಾಡುತ್ತದೆ. ರಿಯಾಕ್ಟ್ ಅಥವಾ ಅಂತಹುದೇ ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಬಳಸಿದಾಗ ಸಂಬಂಧಿಸಿದೆ. `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();

ವರ್ಡ್ಪ್ರೆಸ್ ಪ್ಲಗಿನ್

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿ

ಸೇವೆ