ስሪት 2.x – Gridzy.Gallery

ድህረ ገጹ በራስ-ሰር ተተርጉሟል። የሆነ ነገር ግልጽ ካልሆነ፣ እባክዎን የእንግሊዝኛውን ሰነድ ይመልከቱ።

መሰረታዊ አጠቃቀም

የ Gridzy ፋይሎችን ወደ አገልጋይዎ ይስቀሉ እና ወደ ድር ጣቢያዎ ያክሏቸው (ብዙውን ጊዜ በዋናው ክፍል)።

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

የኤችቲኤምኤል ኮድ ያክሉ (በአካል ክፍል ውስጥ በማንኛውም ቦታ)

<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ን ለማዋቀር ቀላሉ መንገድ የኤችቲኤምኤል ባህሪያትን መጠቀም ብቻ ነው። የአማራጭ ስሞችን በ 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 መራጭ እዚህ እንደ ዋጋ ሊያገለግል ይችላል። ማጣሪያዎችን ይመልከቱ
`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`.

ተጨማሪ የላቁ አማራጮች

ለበለጠ የላቁ አማራጮች ኤፒአይን ይመልከቱ።

የፍቺ HTML

በጣም ቀላሉ የ 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 በጣም ተለዋዋጭ ነው እና ማንኛውንም ሌላ የኤችቲኤምኤል መዋቅር መጠቀም ይችላሉ። ሊታሰብባቸው የሚገቡ ጥቂት ነጥቦች ብቻ አሉ፡-

የእቃ መያዣው አካል እያንዳንዱ ልጅ በፍርግርግ ውስጥ አንድ ንጥል ነገርን ይወክላል።
ሁለቱም የመያዣው አካል እና ልጆቹ እንደ 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>

በተለይ መግለጫ ጽሑፎችን ማከል ከፈለጉ የላቀ የኤችቲኤምኤል መዋቅር ያስፈልግዎታል። ስለእሱ የበለጠ ለማወቅ፣ መግለጫ ጽሑፎችን እና ቆዳዎችን ይመልከቱ።

መግለጫ ጽሑፎች እና ቆዳዎች

የመግለጫ ፅሁፎችን ወደ ጋለሪዎ ማከል ከፈለጉ፣ መልክውን መግለጽ ያስፈልግዎታል። ስለዚህ, አንዳንድ አስቀድሞ የተገለጹ ቆዳዎች ይገኛሉ. የሲኤስኤስ ፋይል የያዘ እያንዳንዱ ቆዳ። ይህንን ፋይል ከዋናው የ 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>

ስለ ኤችቲኤምኤል መዋቅር እያሰቡ ከሆነ፣ ሴማንቲክ ኤችቲኤምኤልን ይመልከቱ።

ለመግለጫ ፅሁፉ ማንኛውንም አይነት መለያ መጠቀም ትችላላችሁ፣ የክፍል 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 ጀምሮ ተቋርጧል)

ከላይ ያሉት ሁሉም ቆዳዎች የሲኤስኤስ ፋይል ብቻ ያስፈልጋቸዋል፣ ነገር ግን የጃቫ ስክሪፕት ፋይል የሚያስፈልጋቸው ተጨማሪ ቆዳዎችም አሉ።

<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)`	ማንኛውንም የሲኤስኤስ ቀለም ዋጋ ይፈቅዳል
`--text-shadow`	`none`	ማንኛውንም የ CSS ጽሑፍ-ጥላ እሴት ይፈቅዳል

gridzySkinFullOverlay

ተለዋዋጭ	ነባሪ እሴት	መረጃ
`--background`	`rgba(0, 0, 0, .7)`	ማንኛውንም የ CSS የጀርባ እሴት ይፈቅዳል
`--color`	`rgb(255, 255, 255)`	ማንኛውንም የሲኤስኤስ ቀለም ዋጋ ይፈቅዳል
`--text-shadow`	`none`	ማንኛውንም የ CSS ጽሑፍ-ጥላ እሴት ይፈቅዳል

gridzySkinLift

ተለዋዋጭ	ነባሪ እሴት	መረጃ
`--background`	`rgba(0, 0, 0, .7)`	ማንኛውንም የ CSS የጀርባ እሴት ይፈቅዳል
`--color`	`rgb(255, 255, 255)`	ማንኛውንም የሲኤስኤስ ቀለም ዋጋ ይፈቅዳል
`--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)`	ማንኛውንም የሲኤስኤስ ቀለም ዋጋ ይፈቅዳል

ይህ ቆዳ አይደግፍም --text-shadow

gridzySkinBlur

ተለዋዋጭ	ነባሪ እሴት	መረጃ
`--background`	`rgba(0, 0, 0, .7)`	ማንኛውንም የ CSS የጀርባ እሴት ይፈቅዳል
`--color`	`rgb(255, 255, 255)`	ማንኛውንም የሲኤስኤስ ቀለም ዋጋ ይፈቅዳል
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	ማንኛውንም የ CSS ጽሑፍ-ጥላ እሴት ይፈቅዳል

gridzySkinCard

ተለዋዋጭ	ነባሪ እሴት	መረጃ
`--background`	`rgba(0, 0, 0, 1)`	ማንኛውንም የ CSS የጀርባ እሴት ይፈቅዳል
`--color`	`rgb(255, 255, 255)`	ማንኛውንም የሲኤስኤስ ቀለም ዋጋ ይፈቅዳል
`--text-shadow`	`none`	ማንኛውንም የ CSS ጽሑፍ-ጥላ እሴት ይፈቅዳል

ሁሉም አስቀድሞ የተገለጹ ቆዳዎች ቀላል የጽሑፍ መግለጫዎችን ብቻ ይደግፋሉ። የራስዎን እና የበለጠ ውስብስብ ቆዳዎችን መፍጠር ይችላሉ. እባኮትን ስታይል Gridzy ን ይመልከቱ።

ቅጥ 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;
}

በሲኤስኤስ ፋይል ውስጥ ክፍሎችን ያገኛሉ gridzySkinBlank , gridzyImage እና gridzyCaption . Gridzy ራሱ እነዚህን ክፍሎች አያስፈልገውም። እነሱ ለቅጥ አሰራር ብቻ ነው የሚያገለግሉት እና ከፈለጉ ማስወገድ ወይም እንደገና መሰየም ይችላሉ።

በተጨማሪም የሲኤስኤስ ክፍል gridzyItem ያገኛሉ። Gridzy ይህን ክፍል በራስ-ሰር ለሁሉም የዋናው መያዣ አካል በቀጥታ ያዘጋጃል። ስለዚህ፣ የማዕከለ-ስዕላትዎን እቃዎች ለመቅረጽ ይህንን ክፍል መጠቀም ይችላሉ።

አእምሮ ጠቃሚ ነገሮች

የንጥሉ ይዘት ሙሉ በሙሉ ምላሽ ሰጪ መሆን አለበት. የኤለመንቱ መጠን በእርግጠኝነት እንደሚለወጥ ግምት ውስጥ ያስገቡ። ከፒክሰል ዋጋዎች ይልቅ የመቶኛ እሴቶችን ተጠቀም። እና የ Gridzy አቀማመጥ አማራጭን ይመልከቱ autoFontSize , ይህም የቅርጸ-ቁምፊውን መጠን ከእቃው ሳጥን መጠን ጋር ያቆራኛል.
እያንዳንዱ ንጥል በደንብ የተገለጸ ምጥጥን ሊኖረው ይገባል. የንጥሉ ምጥጥነ ገጽታ በፍፁም አይቀየርም እና ፍርግርግ ለማስላት ያስፈልጋል። ስለዚህ አንድ ንጥል በራስ-ሰር በደንብ የተገለጸ ምጥጥን ከሌለው እራስዎ አስቀድመው ይግለጹ (ለምሳሌ በ css)።

በአንዳንድ አጋጣሚዎች Gridzy ከመጀመሩ በፊት የእቃዎቹን ይዘት ቅጥ ማድረግ ቀላል ሊሆን ይችላል። ለዚህም የክፍል gridzy ወይም የGridzy javascript ፋይልን ለጊዜው ያስወግዱ።

ያ ነው! የራስዎን ቆዳ ለመገንባት የሚያስፈልግዎ ያ ብቻ ነው። አብዛኛዎቹ አስቀድሞ የተገለጹ ቆዳዎች ከዚህ የበለጠ አይጠቀሙም።

ግን ከወደዱ የበለጠ ሊኖር ይችላል…

የላቀ ቆዳዎች

Gridzy gridzyItem ብቻ ሳይሆን ብዙ የሲኤስኤስ ክፍሎችን ይጠቀማል። አብዛኛዎቹ በራስ ሰር ይቀናበራሉ እና እርስዎም ለቅጥ ስራ ሊጠቀሙባቸው ይችላሉ።

ዋና የመያዣ ክፍሎች

የክፍል ስም	መግለጫ
`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 ፋይል አስቀድሞ የተገለጹ ናቸው።

በእነዚህ ከላይ በተጠቀሱት የሲኤስኤስ ክፍሎች የእራስዎን የሂደት አመልካች እና እነማዎችን ቅጥ ማድረግ ይችላሉ። ምን መሻር እንዳለቦት ለመረዳት የ 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>

ከዚያ በኋላ Gridzy የምስሎቹን ትክክለኛ መጠን ማወቅ ሳያስፈልገው ወዲያውኑ ፍርግርግ ማስላት ይችላል።

ሰነፍ በመጫን ላይ

በሚታየው መመልከቻ ውስጥ ያሉትን ምስሎች ብቻ ለመጫን የሚከተሉትን ደረጃዎች ይከተሉ።

ከላይ እንደተገለፀው 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 ይመልከቱ)
ክፍል gridzyImage ወደ እያንዳንዱ img አባል ያክሉ

<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 ውስጥ ያሉ ማጣሪያዎች በጣም ቀላል ግን ኃይለኛ ናቸው። ምንም አይነት ማጣሪያ ቢያስፈልግ, ሊታወቅ የሚችልበት ዕድል በጣም ሰፊ ነው. የሚያስፈልግህ ትንሽ ሲኤስኤስ እና ጥቂት የኤችቲኤምኤል ቅርጽ አካላት ብቻ ነው…

ተግባራዊ ምሳሌ ይኸውና፡-

<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. በመጀመሪያ የተለመደውን የግሪድዚ ኤችቲኤምኤል መዋቅር እንፈልጋለን እና ሁሉንም የጋለሪ እቃዎች የክፍል ስሞችን አዘጋጅተናል ስለዚህም በኋላ ለማጣራት

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

ከአዝራሮቹ ይልቅ፣ እንደ አመልካች ሳጥኖች፣ የሬዲዮ አዝራሮች፣ መስኮች ምረጥ እና የመሳሰሉትን ሌሎች የቅጽ ክፍሎችን መጠቀም ይችላሉ።

እንደሚመለከቱት, የአዝራሮቹ እሴቶች የተለመዱ የሲኤስኤስ መምረጫዎች ናቸው. ልክ እንደጨረስን, በእንደዚህ አይነት አዝራር ላይ ጠቅ ሲደረግ ከሲኤስኤስ መራጭ ጋር የሚዛመዱ ምስሎችን ያሳያል. በቴክኒክ በቀላሉ filter አማራጩን ለዚህ እሴት ያዘጋጃል።

እንዲሁም በጣም ውስብስብ መራጮችን መጠቀም ይችላሉ. ለምሳሌ :not(.animals) እንዲሁ አይሰራም, እንዲሁም .animals.people እና .animals, .people .

3. በመጨረሻም filterControls አማራጩን በማዘጋጀት ቁልፎቹን div ኮንቴይነር ውስጥ እንሸፍናቸዋለን እና ከግሪድዚ ጋለሪ ጋር እናያቸዋለን።

<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 ኮንቴይነሩ አዝራሮቹን በሲኤስኤስ መራጭ በኩል ለመምረጥ ቀላል ለማድረግ ብቻ ያገለግላል።

ያ ነው!

የጃቫስክሪፕት መፍትሄን ከመረጡ ኤፒአይን ይመልከቱ።

ኤፒአይ

ምንም እንኳን ግሪዲ የራሱ ኤፒአይ ቢኖረውም ፣ DOMን በመቆጣጠር አብዛኛው ነገር ያለ እሱ ሊከናወን ይችላል። Gridzy ያስተውለዋል እና ፍርግርግ ያስተካክላል. ግን በጣም ኃይለኛ ኤፒአይም አለ…

DOMን ማስተዳደር

ለሁሉም የሰነድ ነገር ሞዴል (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ን ስለመቆጣጠር በኤምዲኤን ድር ሰነዶች ላይ ማግኘት ይችላሉ። የ DOM መግቢያም አለ።

የባለቤትነት ኤፒአይ

ኤፒአይን ለመጠቀም መጀመሪያ የ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 ለመልሶ ጥሪ ተግባራት አንዳንድ አማራጮችን ይደግፋል። ሊዋቀሩ የሚችሉት በባለቤትነት በኤፒአይ ብቻ ነው፣ ግን ልክ እንደሌሎች አማራጮች፡-

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

አንዳንድ ክስተቶች በግሪድዚ ኮንቴይነር ኤለመንቱ ላይ ይቃጠላሉ እና ሌሎች ክስተቶች በእቃ መያዢያው ክፍል ውስጥ ባሉ የንጥል ንጥረ ነገሮች ላይ ይቃጠላሉ።

በ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 ምሳሌዎች ነጻ የሆኑ አንዳንድ ተግባራት አሉ። ስለዚህ ከዚህ በፊት ምሳሌ ማግኘት አያስፈልገንም።

ነባሪ አማራጭን ያግኙ

// 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` ኦብዘርቨርን መጠን ቀይር ከስሪት 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'
});

ምሳሌውን አጥፉ

በግምት፣ Gridzyን የማስጀመር ተቃራኒ ነው።

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

የዎርድፕረስ ፕለጊን።

ጃቫ ስክሪፕት ቤተ መጻሕፍት

አገልግሎት