સંસ્કરણ 2.x – Gridzy.Gallery

વેબસાઇટ આપોઆપ અનુવાદિત કરવામાં આવી છે. જો કંઈક સ્પષ્ટ ન હોય, તો કૃપા કરીને અંગ્રેજી દસ્તાવેજીકરણ પર એક નજર નાખો.

મૂળભૂત ઉપયોગ

તમારા સર્વર પર Gridzy ફાઇલો અપલોડ કરો અને તેને તમારી વેબસાઇટ પર ઉમેરો (સામાન્ય રીતે હેડ વિભાગમાં):

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

HTML કોડ ઉમેરો (બોડી વિભાગમાં ગમે ત્યાં):

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

બસ! તે સંપૂર્ણ કાર્યાત્મક ઉદાહરણ છે. કોઈ વધારાની શરૂઆતની જરૂર નથી.

રૂપરેખાંકન

Gridzy રૂપરેખાંકિત કરવાનો સૌથી સહેલો રસ્તો છે, ફક્ત HTML લક્ષણોનો ઉપયોગ કરવો. તમારે માત્ર data-gridzy- સાથે વિકલ્પ નામો ઉપસર્ગ કરવાની જરૂર છે. તેથી, spaceBetween વિકલ્પ સેટ કરવા માટે, ફક્ત data-gridzy-spaceBetween વિશેષતા ઉમેરો.

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

મુખ્ય વિકલ્પો

	ડિફૉલ્ટ મૂલ્ય	વર્ણન
`animate`	`true`	જ્યારે ગ્રીડ બદલાય ત્યારે એનિમેશનનો ઉપયોગ થવો જોઈએ કે કેમ તે નક્કી કરે છે (ઉદાહરણ તરીકે, બ્રાઉઝર વિન્ડોનું માપ બદલતી વખતે અથવા ફિલ્ટર સેટ કરતી વખતે).
`layout`	`justified`	વપરાયેલ લેઆઉટ વ્યાખ્યાયિત કરે છે. Gridzy.js 2 બે અલગ અલગ લેઆઉટ `justified` અને `waterfall` સપોર્ટ કરે છે. તેમાંના દરેક પાસે તેના પોતાના વધારાના વિકલ્પ પરિમાણો છે, જે તમે આ કોષ્ટકની નીચે શોધી શકો છો.
`filter`	`*`	કઈ ઈમેજ બતાવવી જોઈએ તે નક્કી કરે છે. કોઈપણ CSS-સિલેક્ટરને અહીં મૂલ્ય તરીકે વાપરી શકાય છે. સામાન્ય રીતે `filterControls` દ્વારા આપમેળે સેટ થાય છે (આગલો વિકલ્પ જુઓ). ફિલ્ટર્સ તપાસો
`filterControls`		છબીઓને ફિલ્ટર કરવા માટે કયા ફોર્મ ઘટકોનો ઉપયોગ કરી શકાય તે નક્કી કરે છે. કોઈપણ CSS પસંદગીકાર, જે HTML ફોર્મ ઘટકોને પસંદ કરે છે, તેનો ઉપયોગ અહીં મૂલ્ય તરીકે થઈ શકે છે. ફિલ્ટર્સ તપાસો
`autoConsiderScrollBars`	`true`	ઉપલબ્ધ પહોળાઈની આગાહી કરવા માટે જો સ્ક્રોલ બાર દેખાય અથવા અદૃશ્ય થઈ જાય. જ્યાં સુધી આ સ્વચાલિતતા સમસ્યાઓનું કારણ ન બને ત્યાં સુધી તેને હંમેશા `true` પર છોડી દેવાની ભલામણ કરવામાં આવે છે.

Justified લેઆઉટ વિકલ્પો

	ડિફૉલ્ટ મૂલ્ય	વર્ણન
`autoFontSize`	`false`	મૂળ બૉક્સના કદના આધારે દરેક બૉક્સની ફોન્ટ-સાઇઝ પ્રોપર્ટી ઑટોમૅટિક રીતે અપડેટ કરે છે. મૂળભૂત રીતે ફોન્ટ-સાઇઝ ગુણધર્મ સ્પષ્ટ રીતે સેટ કરેલ નથી.
`desiredHeight`	`190`	ઘટક પંક્તિઓની ઇચ્છિત ઊંચાઈ વ્યાખ્યાયિત કરે છે. ઉપલબ્ધ પહોળાઈ અને પંક્તિમાંના ઘટકોના આધારે વાસ્તવિક ઊંચાઈની ગણતરી કરવામાં આવશે.
`hideOnMissingImage`	`true`	બોક્સને છુપાવે છે જેમાં એવી છબીઓ હોય છે જે લોડ કરી શકાતી નથી.
`spaceBetween`	`4`	પિક્સેલમાં તત્વો વચ્ચેનું અંતર વ્યાખ્યાયિત કરે છે.
`lastRowAlign` આવૃત્તિ 2.3.0 થી	`justified`	છેલ્લી પંક્તિના વર્તનને વ્યાખ્યાયિત કરે છે. મંજૂર મૂલ્યો `left` , `center` , `right` અને `justified` છે.
`singleRowAlign` આવૃત્તિ 2.3.0 થી	`justified`	જો માત્ર એક જ પંક્તિ હોય તો વર્તનને વ્યાખ્યાયિત કરે છે. મંજૂર મૂલ્યો `left` , `center` , `right` અને `justified` છે.
~~`fillLastRow`~~ ~~આવૃત્તિ 2.1.0 થી~~	~~`true`~~	આવૃત્તિ 2.4.0 થી દૂર કરેલ ( સંસ્કરણ 2.3.0 થી નાપસંદ કરેલ) છબીઓને ગોઠવે છે જેથી છેલ્લી પંક્તિ હંમેશા સંપૂર્ણપણે ભરાઈ જાય. જો તમે ગતિશીલ રીતે છબીઓને જોડવાની યોજના ઘડી રહ્યા હો, તો આને નિષ્ક્રિય કરવાનો સારો વિચાર હોઈ શકે છે. એક પંક્તિઓ પર કોઈ અસર થતી નથી (જુઓ `fillSingleRow` ).
`fillSingleRow` આવૃત્તિ 2.1.0 થી	~~`true`~~	આવૃત્તિ 2.4.0 થી દૂર કરેલ ( સંસ્કરણ 2.3.0 થી નાપસંદ કરેલ) જો ત્યાં માત્ર એક જ પંક્તિ હોય, તો તે છબીઓને ગોઠવે છે જેથી પંક્તિ હંમેશા સંપૂર્ણપણે ભરાઈ જાય. જો એવું બની શકે કે તમારી પાસે ગેલેરીમાં માત્ર એક કે બે ઈમેજ છે, તો આને નિષ્ક્રિય કરવાનો સારો વિચાર હોઈ શકે છે.

Waterfall લેઆઉટ વિકલ્પો

	ડિફૉલ્ટ મૂલ્ય	વર્ણન
`autoFontSize`	`false`	મૂળ બૉક્સના કદના આધારે દરેક બૉક્સની ફોન્ટ-સાઇઝ પ્રોપર્ટી ઑટોમૅટિક રીતે અપડેટ કરે છે. મૂળભૂત રીતે ફોન્ટ-સાઇઝ ગુણધર્મ સ્પષ્ટ રીતે સેટ કરેલ નથી.
`desiredWidth`	`250`	કૉલમ્સની ઇચ્છિત પહોળાઈ વ્યાખ્યાયિત કરે છે. ઉપલબ્ધ પહોળાઈ અને કૉલમની સંખ્યાના આધારે વાસ્તવિક પહોળાઈની ગણતરી કરવામાં આવશે.
`hideOnMissingImage`	`true`	બોક્સને છુપાવે છે જેમાં એવી છબીઓ હોય છે જે લોડ કરી શકાતી નથી.
`horizontalOrder`	`false`	વ્યાખ્યાયિત કરે છે કે તત્વોને ડાબેથી જમણે દરેક કૉલમમાં સખત રીતે એક ઘટક મૂકવામાં આવે છે, પછી સૌથી વધુ ડાબી કૉલમ સ્વતંત્રમાં ફરી શરૂ થાય છે જેમાં કૉલમ વધુ સ્થાન ધરાવે છે. મૂળભૂત રીતે તત્વો હંમેશા સૌથી નાની ઊંચાઈ સાથે કૉલમમાં મૂકવામાં આવશે.
`spaceBetween`	`4`	પિક્સેલમાં તત્વો વચ્ચેનું અંતર વ્યાખ્યાયિત કરે છે.
`singleRowAlign` since version 2.7.0	`justified`	Defines the behavior when not all columns can be filled due to too few images. Allowed values are `left`, `center`, `right` and `justified`.

વધુ અદ્યતન વિકલ્પો

વધુ અદ્યતન વિકલ્પો માટે, API ને તપાસો.

સિમેન્ટીક 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 ખૂબ જ લવચીક છે અને તમે લગભગ કોઈપણ અન્ય 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 ફાઇલની જરૂર છે, પરંતુ ત્યાં વધારાની સ્કિન છે જેને 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 કસ્ટમ પ્રોપર્ટીઝનો ઉપયોગ કરવો પડશે કારણ કે તમે અહીં જોઈ શકો છો:

<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 ટેક્સ્ટ-શેડો મૂલ્યને મંજૂરી આપે છે

બધી પૂર્વવ્યાખ્યાયિત સ્કિન્સ ફક્ત સરળ ટેક્સ્ટ કૅપ્શન્સને સપોર્ટ કરે છે. તમે તમારી પોતાની અને વધુ જટિલ સ્કિન્સ બનાવી શકો છો. કૃપા કરીને સ્ટાઇલ ગ્રિડઝી પર એક નજર નાખો.

શૈલી 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 વર્ગો મળશે. Gridzy પોતે આ વર્ગો જરૂર નથી. તેનો ઉપયોગ ફક્ત સ્ટાઇલ માટે થાય છે અને તેથી જો તમે ઇચ્છો તો તમે તેને દૂર અથવા નામ બદલી શકો છો.

વધુમાં તમને CSS વર્ગ gridzyItem મળશે. Gridzy આ વર્ગને મુખ્ય કન્ટેનર તત્વના તમામ સીધા બાળકો માટે આપમેળે સેટ કરે છે. તેથી, તમે તમારી ગેલેરીની વસ્તુઓને સ્ટાઇલ કરવા માટે આ વર્ગનો ઉપયોગ કરી શકો છો.

મન મહત્વની બાબતો

આઇટમની સામગ્રી સંપૂર્ણપણે જવાબદાર હોવી જોઈએ. ધ્યાનમાં લો કે તત્વનું કદ ચોક્કસપણે બદલાશે. પિક્સેલ મૂલ્યોને બદલે ટકાવારી મૂલ્યોનો ઉપયોગ કરો. અને Gridzy લેઆઉટ વિકલ્પ autoFontSize પર એક નજર નાખો, જે ફોન્ટ-સાઇઝને આઇટમ બોક્સના કદ સાથે જોડે છે.
દરેક આઇટમમાં સારી રીતે વ્યાખ્યાયિત પાસા રેશિયો હોવો જોઈએ. આઇટમનો સાપેક્ષ ગુણોત્તર ક્યારેય બદલાશે નહીં અને ગ્રીડની ગણતરી કરવા માટે જરૂરી છે. તેથી જો કોઈ વસ્તુમાં આપમેળે સારી રીતે વ્યાખ્યાયિત પાસા રેશિયો ન હોય, તો તેને મેન્યુઅલી પૂર્વવ્યાખ્યાયિત કરો (દા.ત. css દ્વારા).

કેટલાક કિસ્સાઓમાં, ગ્રિડ્ઝી શરૂ થાય તે પહેલાં આઇટમ્સની સામગ્રીને સ્ટાઇલ કરવી સરળ બની શકે છે. આ માટે ફક્ત ક્લાસ gridzy અથવા ગ્રીડઝી જાવાસ્ક્રિપ્ટ ફાઇલને અસ્થાયી રૂપે દૂર કરો.

બસ! તમારી પોતાની ત્વચા બનાવવા માટે તમારે આટલું જ કરવાની જરૂર છે. મોટાભાગની પૂર્વવ્યાખ્યાયિત સ્કિન્સ આનાથી વધુ ઉપયોગ કરતી નથી.

પરંતુ જો તમને ગમે તો વધુ હોઈ શકે છે ...

અદ્યતન સ્કિન્સ

Gridzy માત્ર gridzyItem કરતાં વધુ CSS વર્ગોનો ઉપયોગ કરે છે. તેમાંના મોટા ભાગના આપોઆપ સેટ થઈ જશે અને તમે તેનો ઉપયોગ સ્ટાઇલ માટે પણ કરી શકો છો.

મુખ્ય કન્ટેનર વર્ગો

વર્ગનું નામ	વર્ણન
`gridzy` જાતે સેટ કરવા માટે	Gridzy આપોઆપ આ વર્ગ સાથે તત્વો શોધે છે અને તેમને પ્રારંભ કરે છે.
`gridzyAnimated`	જો વિકલ્પ `animate` `true` હોય તો આપમેળે સેટ થઈ જશે. જો આ વર્ગ મેન્યુઅલી સેટ કરેલ હોય, તો `animate` વિકલ્પ આપમેળે પણ `true` થઈ જશે (સિવાય કે તે સ્પષ્ટપણે `false` પર સેટ કરેલ હોય).

આઇટમ વર્ગો

વર્ગનું નામ	વર્ણન
`gridzyItem`	આઇટમ પ્રારંભ કરવાની પ્રક્રિયા શરૂ કરે કે તરત જ સેટ કરવામાં આવશે. ક્યારેય દૂર કરવામાં આવશે નહીં.
`gridzyItemInitializing`	આઇટમ પ્રારંભ કરવાની પ્રક્રિયા શરૂ કરે કે તરત જ સેટ કરવામાં આવશે. આઇટમ સંપૂર્ણ રીતે શરૂ થતાંની સાથે જ તેને `gridzyItemReady` દ્વારા બદલવામાં આવશે. તેનો અર્થ એ નથી કે છબીઓ સંપૂર્ણ રીતે લોડ થયેલ છે ( `gridzyItemLoading` જુઓ), પરંતુ આઇટમ દૃશ્યમાન થવા માટે તૈયાર છે.
`gridzyItemReady`	આઇટમ સંપૂર્ણ રીતે શરૂ થાય કે તરત જ `gridzyItemInitializing` બદલશે. ક્યારેય દૂર કરવામાં આવશે નહીં. એનો અર્થ એ નથી કે છબીઓ સંપૂર્ણપણે લોડ થઈ ગઈ છે ( `gridzyItemComplete` જુઓ), પરંતુ આઇટમ દૃશ્યમાન થવા માટે તૈયાર છે.
`gridzyItemLoading`	આઇટમ પ્રારંભ કરવાની પ્રક્રિયા શરૂ કરે કે તરત જ સેટ કરવામાં આવશે. સમાવિષ્ટ છબીઓ (સામાન્ય રીતે માત્ર એક જ) સંપૂર્ણપણે લોડ થાય કે તરત જ તેને `gridzyItemComplete` દ્વારા બદલવામાં આવશે.
`gridzyItemComplete`	સમાવિષ્ટ ઈમેજો (સામાન્ય રીતે માત્ર એક જ) સંપૂર્ણ લોડ થાય કે તરત જ `gridzyItemLoading` બદલશે. ક્યારેય દૂર કરવામાં આવશે નહીં.
`gridzyItemInitialToVisible`	આઇટમ પ્રથમ વખત દેખાવાનું શરૂ થાય કે તરત જ સેટ કરવામાં આવશે. આઇટમ સંપૂર્ણપણે દેખાતાની સાથે જ દૂર કરવામાં આવશે.
`gridzyItemVisible`	આઇટમ સંપૂર્ણ રીતે દેખાશે તેટલું જલદી સેટ કરવામાં આવશે. આઇટમ અદૃશ્ય થવાનું શરૂ થતાંની સાથે જ દૂર કરવામાં આવશે.
`gridzyItemVisibleToHidden`	આઇટમ અદૃશ્ય થવાનું શરૂ થતાંની સાથે જ સેટ કરવામાં આવશે. આઇટમ સંપૂર્ણપણે છુપાઈ જાય કે તરત જ દૂર કરવામાં આવશે.
`gridzyItemHidden`	આઇટમ સંપૂર્ણપણે છુપાય તેટલી જલદી સેટ કરવામાં આવશે. આઇટમ દેખાવાનું શરૂ થતાંની સાથે જ દૂર કરવામાં આવશે.
`gridzyItemHiddenToVisible`	આઇટમ દેખાવાનું શરૂ થતાંની સાથે જ સેટ કરવામાં આવશે (પ્રથમ વખત દેખાવા સિવાય – વર્ગ `gridzyItemInitialToVisible` જુઓ). આઇટમ સંપૂર્ણપણે દેખાતાની સાથે જ દૂર કરવામાં આવશે.
`gridzyItemVisibleToVisible`	ગ્રીડમાં કંઈક બદલાતાની સાથે જ સેટ કરવામાં આવશે, પરંતુ આઇટમ પોતે જ હતી અને દૃશ્યમાન રહે છે. ફેરફાર એનિમેશન સમાપ્ત થતાંની સાથે જ દૂર કરવામાં આવશે.

ડિફૉલ્ટ રૂપે પ્રક્રિયા સૂચક અને છબીઓ દેખાવા અને અદ્રશ્ય થવા માટે એનિમેશન ગ્રિડઝી મુખ્ય CSS ફાઇલ દ્વારા પૂર્વવ્યાખ્યાયિત છે.

આ ઉપરોક્ત CSS વર્ગો સાથે તમે તમારા પોતાના પ્રક્રિયા સૂચક અને એનિમેશનને સ્ટાઇલ કરી શકો છો. તમારે શું ઓવરરાઇડ કરવું પડશે તે સમજવા માટે, Gridzy મુખ્ય CSS ફાઇલમાં જોવાની હિંમત કરો. કોઈ ડર નથી, ત્યાં બધું સારી રીતે દસ્તાવેજીકૃત થયેલ છે.

ઑપ્ટિમાઇઝ લોડિંગ

જો તમે ઘણી છબીઓનો ઉપયોગ કરો છો, તો ગ્રિડ્ઝીને ઝડપથી ગ્રીડ બનાવવામાં મદદ કરવી એ સારો વિચાર હોઈ શકે છે.

જમ્પિંગ છબીઓ અટકાવો

ગ્રિડ્ઝીને ગ્રીડની ગણતરી કરવા માટે તમામ છબીઓના પાસા રેશિયોની જરૂર છે. જો કેટલીક છબીઓ તૈયાર હોય અને અન્ય ન હોય તો આ હકીકત જમ્પિંગ તત્વોમાં પરિણમે છે. વધુ છબીઓ છે, વધુ હેરાન આ અસર હોઈ શકે છે.

આ વર્તણૂકને રોકવા માટે, બધા img ઘટકો માટે માત્ર width અને height લક્ષણો સેટ કરો. દરેક વ્યક્તિગત છબી માટે યોગ્ય મૂલ્યો સેટ કરવું મહત્વપૂર્ણ છે, અન્યથા છબીઓ વિકૃત થશે. યોગ્ય મૂલ્યો સંબંધિત છબીની મૂળ પહોળાઈ અને ઊંચાઈ છે:

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

ત્યારપછી ગ્રિડઝી ઈમેજીસના વાસ્તવમાં માપ જાણવાની જરૂર વગર તરત જ ગ્રીડની ગણતરી કરી શકે છે.

સુસ્ત લોડિંગ

દૃશ્યમાન વ્યુપોર્ટમાં હોય તેવી છબીઓ જ લોડ કરવા માટે, ફક્ત આ પગલાં અનુસરો:

ઉપર વર્ણવ્યા મુજબ width અને height લક્ષણો દાખલ કરો (સાચા મૂલ્યોનો ઉપયોગ કરવાની ખાતરી કરો)
નીચે બતાવ્યા પ્રમાણે તમામ src લક્ષણોને data-gridzylazysrc વડે બદલો (જો તમારી પાસે srcset વિશેષતાઓ પણ હોય, તો તેને data-gridzylazysrcset સાથે બદલો).

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

આ પગલાંઓ પછી છબીઓ વ્યુપોર્ટની નજીક અથવા અંદર હોય કે તરત જ લોડ થશે.

પ્રક્રિયા સૂચક

પ્રક્રિયા સૂચક એ નાનું એનિમેટેડ આઇકન છે જે છબી લોડ કરતી વખતે દેખાય છે. જો તમે કૅપ્શન્સ અને સ્કિનનો ઉપયોગ કરો છો, તો પ્રક્રિયા સૂચક આપમેળે બતાવવામાં આવશે. નહિંતર તમારે કેટલાક ગોઠવણોની જરૂર છે:

દરેક img એલિમેન્ટને div એલિમેન્ટમાં મૂકો
(અથવા કોઈપણ અન્ય ઘટકમાં - વધુ માટે સિમેન્ટીક 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 સ્ટ્રક્ચરની જરૂર છે અને બધી ગેલેરી વસ્તુઓ માટે વર્ગના નામો સેટ કરો જેથી અમે તેને પછીથી ફિલ્ટર કરી શકીએ

<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

જો કે ગ્રિડ્ઝી પાસે તેનું પોતાનું API છે, મોટાભાગની વસ્તુઓ તેના વિના કરી શકાય છે, ફક્ત DOM સાથે ચાલાકી કરીને. ગ્રીડઝી તેને નોટિસ કરશે અને ગ્રીડને સમાયોજિત કરશે. પરંતુ ત્યાં એક ખૂબ જ શક્તિશાળી API પણ છે ...

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 ને હેરફેર કરવા વિશે વધુ તમે 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
});

ફિલ્ટર લાગુ કરો

ફિલ્ટર લાગુ કરવું એ ફક્ત વિકલ્પ filter સેટ કરવાનું છે જે કોઈપણ માન્ય CSS પસંદગીકાર હોઈ શકે છે:

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

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

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

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

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

કૉલબેક કાર્યો ઉમેરો

સંસ્કરણ 2.4.0 થી નાપસંદ
તેના બદલે આધુનિક અને વધુ લવચીક ઇવેન્ટ્સનો ઉપયોગ કરો. વિગતો માટે આગળનો વિભાગ જુઓ.

Gridzy.js 2 કૉલબેક કાર્યો માટે કેટલાક વિકલ્પોને સપોર્ટ કરે છે. તેઓ માત્ર માલિકીના 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 થી

તમે સામાન્ય JavaScript ઇવેન્ટ્સની જેમ ગ્રિડઝી ઇવેન્ટ્સનો ઉપયોગ કરી શકો છો:

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

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

કેટલીક ઇવેન્ટ્સ ગ્રિડઝી કન્ટેનર તત્વ પર ફાયર કરવામાં આવે છે અને અન્ય ઇવેન્ટ્સ કન્ટેનર તત્વની અંદર વ્યક્તિગત આઇટમ ઘટકો પર ફાયર કરવામાં આવે છે.

ગ્રિડ્ઝી કન્ટેનર તત્વ પર ફાયરિંગ કરવામાં આવેલી ઇવેન્ટ્સ:

	વર્ણન
`gridzyBeforeInit`	ગેલેરી આરંભ પહેલાં આગ.
`gridzyInit`	ગેલેરી આરંભ પછી આગ.
`gridzyBeforeOptionsChanged`	સેટિંગ વિકલ્પો પહેલાં આગ.
`gridzyOptionsChanged`	વિકલ્પો સેટ કર્યા પછી આગ લાગે છે.
`gridzyBeforeRender`	રેન્ડરિંગ પહેલાં આગ.
`gridzyRender`	રેન્ડરીંગ પછી આગ.

જો તમે અહીં કોઈ ઇવેન્ટ ચૂકી ગયા છો, તો કૃપા કરીને સપોર્ટ વિનંતી મોકલો.

event.target Gridzy કન્ટેનર તત્વ પ્રદાન કરે છે.
event.detail.instance એ Gridzy દાખલો પૂરો પાડે છે.

આઇટમ તત્વો પર ફાયરિંગ ઇવેન્ટ્સ:

	વર્ણન
`gridzyItemBeforeInit`	આઇટમ આરંભ પહેલાં આગ.
`gridzyItemInit`	આઇટમ આરંભ પછી આગ.
`gridzyItemLoading`	જ્યારે આઇટમ લોડ થવાનું શરૂ થાય ત્યારે આગ લાગે છે.
`gridzyItemReady`	જ્યારે આઇટમ ગ્રીડની ગણતરી માટે તૈયાર હોય ત્યારે આગ લાગે છે. તેથી સાપેક્ષ ગુણોત્તર જાણીતું છે, પરંતુ છબી હજી પણ લોડ થઈ શકે છે.
`gridzyItemComplete`	જ્યારે આઇટમ ઇમેજ સંપૂર્ણપણે લોડ થાય ત્યારે ફાયર થાય છે.

જો તમે અહીં કોઈ ઇવેન્ટ ચૂકી ગયા છો, તો કૃપા કરીને સપોર્ટ વિનંતી મોકલો.

event.target સંબંધિત આઇટમ તત્વ પ્રદાન કરે છે.
event.detail.instance એ Gridzy દાખલો પૂરો પાડે છે.

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 ની તમામ સ્વચાલિતતા સક્રિય છે, ત્યાં સુધી નીચેની પદ્ધતિઓની જરૂર નથી. પરંતુ વધુ પરંપરાગત રીતે Gridzy નો ઉપયોગ કરવા માટે ઓટોમેટિઝમ્સને બંધ કરી શકાય છે:

// 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`	વર્ગ `gridzy` સાથેના નવા ઘટકો DOM માં દેખાય કે તરત જ તેઓને શોધે છે અને તેમને પ્રારંભ કરે છે. (દા.ત. પૃષ્ઠ સંક્રમણનો ઉપયોગ કરવા પર) `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` લક્ષણોના ફેરફારોને શોધે છે. React અથવા સમાન લાઇબ્રેરીઓ સાથે ઉપયોગમાં લેવાતી વખતે સંબંધિત. `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` દ્વારા સેટ કરી શકાય છે.
`autoRenderOnResize` ResizeObserver આવૃત્તિ 2.6.0 થી	`true`	તત્વની પહોળાઈના ફેરફારોને શોધે છે. રિસ્પોન્સિવ ડિઝાઇન સંબંધિત સંબંધિત. (વર્ઝન 2.6.0 પહેલા વિન્ડો રીસાઈઝ ઈવેન્ટ લિસનરનો ઉપયોગ થતો હતો) `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()` દ્વારા સેટ કરી શકાય છે.

મેન્યુઅલી પ્રારંભ કરો

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

દાખલાનો નાશ કરો

આશરે જણાવ્યું હતું કે, ગ્રિડ્ઝીને પ્રારંભ કરવાની વિરુદ્ધ.

gridzyInstance.destroy();
gridzyInstance = null;

ચાઇલ્ડ લિસ્ટ મેન્યુઅલી સિંક કરો

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

સિંગલ ચાઇલ્ડ એલિમેન્ટને મેન્યુઅલી સિંક કરો

સામાન્ય રીતે ખૂબ જ દુર્લભ કિસ્સાઓમાં સિવાય, જરૂરી નથી.

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

વિશેષતાઓને મેન્યુઅલી સમન્વયિત કરો

નોંધ કરો કે આ માટે useOptionAttributes વિકલ્પ true હોવો જોઈએ.

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

ફોર્સ રેન્ડરીંગ

સામાન્ય રીતે જરૂરી નથી, પછી ભલે બધી સ્વચાલિતતાઓ બંધ હોય

gridzyInstance.render();

વર્ડપ્રેસ પ્લગઇન

જાવાસ્ક્રિપ્ટ લાઇબ્રેરી

સેવા