Gridzy.Gallery

webÈdè Yorùbá

Ẹya 2.x

Oju opo wẹẹbu naa ti ni itumọ aladaaṣe. Ti nkan ko ba han, jọwọ wo awọn iwe Gẹẹsi.

Ipilẹ Lilo

Ṣe igbasilẹ awọn faili Gridzy si olupin rẹ ki o ṣafikun wọn si oju opo wẹẹbu rẹ (nigbagbogbo ni apakan ori):

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

Ṣafikun koodu HTML (nibikibi ninu apakan ara):

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

O n niyen! Iyẹn jẹ apẹẹrẹ iṣẹ-ṣiṣe ni kikun. Ko si afikun ibẹrẹ ti o nilo.

Iṣeto ni

Ọna to rọọrun lati tunto Gridzy ni, lati lo awọn abuda HTML nikan. O nilo lati ṣaju awọn orukọ aṣayan nikan pẹlu data-gridzy- . Nitorinaa, lati ṣeto spaceBetween aṣayan, kan ṣafikun abuda 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>

Awọn aṣayan akọkọ

Aiyipada IyeApejuwe
animatetrueṢe ipinnu boya awọn ohun idanilaraya yẹ ki o lo nigbati akoj ba yipada (fun apẹẹrẹ, nigba ti n ṣatunṣe ferese aṣawakiri tabi nigba ṣeto àlẹmọ kan).
layoutjustifiedṢe alaye ifilelẹ ti a lo. Gridzy.js 2 ṣe atilẹyin awọn ipilẹ oriṣiriṣi meji justified ati waterfall . Ọkọọkan wọn ni awọn paramita aṣayan afikun tirẹ, eyiti o le rii ni isalẹ tabili yii.
filter*Ṣe ipinnu iru awọn aworan yẹ ki o han. Eyikeyi CSS-oluyan le ṣee lo bi iye nibi. Nigbagbogbo ṣeto laifọwọyi nipasẹ filterControls (wo aṣayan atẹle).
Ṣayẹwo Awọn Ajọ
filterControlsṢe ipinnu iru awọn eroja fọọmu le ṣee lo lati ṣe àlẹmọ awọn aworan. Eyikeyi CSS selector, ti o yan HTML fọọmu eroja, le ṣee lo bi iye nibi.
Ṣayẹwo Awọn Ajọ
autoConsiderScrollBarstrueLati ṣe asọtẹlẹ iwọn to wa ti awọn ọpa yi ba han tabi farasin. O n ṣeduro nigbagbogbo lati fi silẹ ni true ayafi ti adaṣe adaṣe ba fa awọn iṣoro.

Justified Awọn aṣayan Ifilelẹ

Aiyipada IyeApejuwe
autoFontSizefalseṢe imudojuiwọn ohun-ini iwọn fonti ti apoti kọọkan ti o da lori iwọn apoti atilẹba. Nipa aiyipada ohun-ini iwọn fonti ko ṣeto ni gbangba.
desiredHeight190Ṣe alaye iga ti o fẹ ti awọn ori ila ano. Giga gangan yoo ṣe iṣiro da lori iwọn ti o wa ati awọn eroja ti o wa ni ila.
hideOnMissingImagetrueTọju awọn apoti ti o ni awọn aworan ti ko le ṣe kojọpọ ninu.
spaceBetween4Ṣe alaye aaye laarin awọn eroja ni awọn piksẹli.
lastRowAlign
niwon version 2.3.0		justifiedAwọn asọye ihuwasi ti awọn ti o kẹhin kana. Awọn iye ti a gba laaye ni left , center , right ati justified .
singleRowAlign
niwon version 2.3.0		justifiedAsọye ihuwasi ti o ba ti wa ni nikan kan nikan kana. Awọn iye ti a gba laaye ni left , center , right ati justified .
fillLastRow
niwon version 2.1.0		trueKURO lati ẹya 2.4.0 (DEPRECTED lati ẹya 2.3.0 )
Ṣeto awọn aworan ki awọn ti o kẹhin kana ti wa ni nigbagbogbo kún patapata. Ti o ba gbero lati ṣafikun awọn aworan ni agbara, o le jẹ imọran ti o dara lati mu eyi ṣiṣẹ.
Ko ni ipa lori awọn ori ila kan (wo fillSingleRow ).
fillSingleRow
niwon version 2.1.0		trueKURO lati ẹya 2.4.0 (DEPRECTED lati ẹya 2.3.0 )
Ti ila kan ba wa, o ṣeto awọn aworan ki ila naa nigbagbogbo kun patapata. Ti o ba le ṣẹlẹ pe o ni awọn aworan kan tabi meji ninu ibi iṣafihan, o le jẹ imọran ti o dara lati mu eyi ṣiṣẹ.

Waterfall Layout Aw

Aiyipada IyeApejuwe
autoFontSizefalseṢe imudojuiwọn ohun-ini iwọn fonti ti apoti kọọkan ti o da lori iwọn apoti atilẹba. Nipa aiyipada ohun-ini iwọn fonti ko ṣeto ni gbangba.
desiredWidth250Ṣe alaye iwọn ti o fẹ ti awọn ọwọn. Iwọn gangan yoo ṣe iṣiro da lori iwọn ti o wa ati nọmba awọn ọwọn.
hideOnMissingImagetrueTọju awọn apoti ti o ni awọn aworan ti ko le ṣe kojọpọ ninu.
horizontalOrderfalseṢe alaye pe a gbe awọn eroja ti o muna ni abala kọọkan lati osi si otun, lẹhinna bẹrẹ lẹẹkansi ni apa osi julọ ni ominira ninu eyiti iwe jẹ aaye diẹ sii. Nipa aiyipada awọn eroja yoo wa ni nigbagbogbo gbe ni awọn iwe pẹlu awọn kere iga.
spaceBetween4Ṣe alaye aaye laarin awọn eroja ni awọn piksẹli.
singleRowAlign
since version 2.7.0		justifiedDefines the behavior when not all columns can be filled due to too few images. Allowed values are left, center, right and justified.

Diẹ To ti ni ilọsiwaju Aw

Fun awọn aṣayan ilọsiwaju diẹ sii, ṣayẹwo API .

HTML atunmọ

Ilana HTML ti o rọrun julọ ti Gridzy ni eyi:

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

Sibẹsibẹ, Gridzy rọ pupọ ati pe o le lo fere eyikeyi eto HTML miiran. Awọn aaye diẹ ni o wa lati ronu:

  • Kọọkan omo eiyan ano duro ohun kan ninu awọn akoj.
  • Mejeeji ohun elo eiyan ati awọn ọmọ rẹ le jẹ iru tag eyikeyi, gẹgẹbi ul ati li (kan ro lati tun awọn aṣiṣe aṣawakiri pada).
  • Ti nkan img kii ṣe ọmọ taara funrararẹ, o nilo kilasi gridzyImage .

Nitorinaa eyi tun jẹ eto HTML ti n ṣiṣẹ:

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

Paapa ti o ba fẹ ṣafikun awọn akọle, o nilo eto HTML to ti ni ilọsiwaju. Lati kọ ẹkọ diẹ sii nipa rẹ, wo Awọn akọle & Awọn awọ ara .

Awọn akọle & Awọn awọ ara

Ti o ba fẹ ṣafikun awọn akọle si ibi iṣafihan rẹ, o nilo lati ṣalaye irisi naa. Nitorina, diẹ ninu awọn awọ ara ti a ti sọ tẹlẹ wa. Awọ kọọkan ti o ni faili CSS kan. O nilo lati ṣafikun faili yii ni afikun si awọn faili Gridzy akọkọ (nigbagbogbo ni apakan ori):

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

Pẹlupẹlu o nilo eto HTML to ti ni ilọsiwaju:

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

Ti o ba n ṣe iyalẹnu nipa eto HTML, wo HTML Semantic .

Fun akọle o le lo eyikeyi iru tag, kan rii daju pe o ni gridzyCaption kilasi. Ẹya img nilo kilasi gridzyImage .

Apẹẹrẹ ti o wa loke fihan ọ ni awọ gridzySkinClassic . Lati lo ọkan ti o yatọ, kan rọpo orukọ awọ ara pẹlu ọkan ninu iwọnyi:

Awọn awọ ara to wa

Awọn kilasi to wa
gridzySkinBlank
aaye ibẹrẹ ti o dara fun ṣiṣẹda awọ ara ti ara
ifiwe awotẹlẹ		gridzySkinBlank
gridzySkinClassic
ifiwe awotẹlẹ		gridzySkinClassic
gridzySkinClassicLight(DEPRECTED lati ẹya 2.6.0)
gridzySkinFullOverlay
ifiwe awotẹlẹ		gridzySkinFullOverlay
gridzySkinFullOverlayLight(DEPRECTED lati ẹya 2.6.0)
gridzySkinLift
ifiwe awotẹlẹ		gridzySkinLift
gridzySkinLiftLight(DEPRECTED lati ẹya 2.6.0)
gridzySkinMagnifier
iṣẹ sisun ko si
ifiwe awotẹlẹ		gridzySkinMagnifier
gridzySkinMagnifierLight(DEPRECTED lati ẹya 2.6.0)

Gbogbo awọn awọ ara ti o wa loke nilo faili CSS nikan, ṣugbọn awọn awọ ara afikun wa ti o tun nilo faili JavaScript kan:

<link rel="stylesheet" href="gridzy/skins/gridzySkinBlur/style.min.css" />
<script src="gridzy/skins/gridzySkinBlur/script.min.js"></script>
Awọn kilasi to wa
gridzySkinBlur
ko ṣiṣẹ ni IE
ifiwe awotẹlẹ		gridzySkinBlur
gridzySkinBlurLight(DEPRECTED lati ẹya 2.6.0)
gridzySkinCard
ifiwe awotẹlẹ		gridzySkinCard
gridzySkinCardLight(DEPRECTED lati ẹya 2.6.0)

Awọn aṣayan awọ

Lati ẹya 2.6.0 awọn aṣayan wa lati tunto awọn awọ ara ti a ṣe sinu. Da lori awọ ara kan pato o le ṣeto awọ abẹlẹ, awọ ọrọ ati ojiji ọrọ. O kan ni lati lo awọn ohun-ini aṣa CSS bi o ṣe le rii nibi:

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

Ṣayẹwo awọn oniyipada atilẹyin ati awọn iye aiyipada fun awọ kọọkan nibi:

gridzySkinClassic
AyípadàAiyipada IyeAlaye
--backgroundrgba(0, 0, 0, .7)faye gba eyikeyi CSS lẹhin iye
--colorrgb(255, 255, 255)faye gba eyikeyi CSS awọ iye
--text-shadownonefaye gba eyikeyi CSS ọrọ-ojiji iye
gridzySkinFullOverlay
AyípadàAiyipada IyeAlaye
--backgroundrgba(0, 0, 0, .7)faye gba eyikeyi CSS lẹhin iye
--colorrgb(255, 255, 255)faye gba eyikeyi CSS awọ iye
--text-shadownonefaye gba eyikeyi CSS ọrọ-ojiji iye
gridzySkinLift
AyípadàAiyipada IyeAlaye
--backgroundrgba(0, 0, 0, .7)faye gba eyikeyi CSS lẹhin iye
--colorrgb(255, 255, 255)faye gba eyikeyi CSS awọ iye
--text-shadow0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)faye gba eyikeyi CSS ọrọ-ojiji iye
gridzySkinMagnifier
AyípadàAiyipada IyeAlaye
--backgroundrgba(0, 0, 0, .7)faye gba eyikeyi CSS lẹhin iye
--colorrgb(255, 255, 255)faye gba eyikeyi CSS awọ iye

Awọ yii ko ṣe atilẹyin --text-shadow

gridzySkinBlur
AyípadàAiyipada IyeAlaye
--backgroundrgba(0, 0, 0, .7)faye gba eyikeyi CSS lẹhin iye
--colorrgb(255, 255, 255)faye gba eyikeyi CSS awọ iye
--text-shadow0 0 10px rgb(0, 0, 0)faye gba eyikeyi CSS ọrọ-ojiji iye
gridzySkinCard
AyípadàAiyipada IyeAlaye
--backgroundrgba(0, 0, 0, 1)faye gba eyikeyi CSS lẹhin iye
--colorrgb(255, 255, 255)faye gba eyikeyi CSS awọ iye
--text-shadownonefaye gba eyikeyi CSS ọrọ-ojiji iye

Gbogbo awọn awọ ara ti a ti sọ tẹlẹ ṣe atilẹyin awọn akọle ọrọ ti o rọrun nikan. O le ṣẹda ti ara rẹ pupọ ati awọn awọ ara ti o ni idiwọn diẹ sii. Jọwọ wo ara Gridzy .

Gridzy ara

Ti ko ba si awọ ti a ti yan tẹlẹ ti o baamu awọn iwulo rẹ, o le ṣe ara tirẹ.

Ọna to rọọrun ni lati kọkọ daakọ awọ ara ti o wa tẹlẹ ki o ṣe deede si awọn iwulo tirẹ. gridzySkinBlank awọ ara ti a ti sọ tẹlẹ yoo maa pese ipilẹ to dara daradara bi iwe ti o dara ninu faili 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;
}

Ninu faili CSS iwọ yoo rii awọn kilasi gridzySkinBlank , gridzyImage ati gridzyCaption . Gridzy funrararẹ ko nilo awọn kilasi wọnyi. Wọn lo fun iselona nikan ati nitorinaa o le yọkuro tabi fun lorukọ mii ti o ba fẹ.

Ni afikun iwọ yoo rii kilasi CSS gridzyItem . Gridzy ṣeto kilasi yii laifọwọyi si gbogbo awọn ọmọde taara ti eroja eiyan akọkọ. Nitorinaa, o le lo kilasi yii lati ṣe ara awọn nkan ti gallery rẹ.

Okan Pataki Ohun

  1. Awọn akoonu inu ohun kan yẹ ki o jẹ idahun ni kikun. Ro pe iwọn ano yoo dajudaju yipada. Lo awọn iye ipin dipo awọn iye piksẹli. Ati ki o wo aṣayan Ifilelẹ Gridzy autoFontSize , eyiti o so iwọn-kikọ pọ mọ iwọn apoti ohun kan.
  2. Ohun kọọkan yẹ ki o ni ipin abala ti asọye daradara. Ipin abala ohun naa kii yoo yipada ati pe o nilo lati ṣe iṣiro akoj. Nitorinaa ti ohun kan ko ba ni ipin abala asọye daradara, sọ tẹlẹ pẹlu ọwọ (fun apẹẹrẹ nipasẹ css).

Ni awọn igba miiran, o le rọrun lati ṣe ara akoonu awọn ohun kan ṣaaju ki Gridzy ti bẹrẹ. Nìkan yọ gridzy kilasi kuro tabi faili JavaScript Gridzy fun igba diẹ fun eyi.

O n niyen! Iyẹn ni gbogbo ohun ti o nilo lati kọ awọ ara rẹ pupọ. Pupọ julọ awọn awọ ara ti a ti sọ tẹlẹ ko lo diẹ sii pe eyi.

Ṣugbọn o le jẹ diẹ sii ti o ba fẹ…

To ti ni ilọsiwaju Skins

Gridzy nlo awọn kilasi CSS diẹ sii ju gridzyItem nikan lọ. Pupọ ninu wọn yoo ṣeto laifọwọyi ati pe o le lo wọn fun iselona paapaa.

Awọn kilasi Apoti akọkọ

Orukọ KilasiApejuwe
gridzy
lati ṣeto pẹlu ọwọ		Gridzy wa awọn eroja laifọwọyi pẹlu kilasi yii ati bẹrẹ wọn.
gridzyAnimatedYoo ṣeto laifọwọyi ti aṣayan animate ba jẹ true . Ti a ba ṣeto kilasi yii pẹlu ọwọ, animate aṣayan yoo jẹ true laifọwọyi paapaa (ayafi ti o ba ṣeto ni gbangba si false ).

Awọn kilasi Nkan

Orukọ KilasiApejuwe
gridzyItemYoo ṣeto ni kete ti nkan naa ba bẹrẹ ilana ipilẹṣẹ. Yoo ko wa ni kuro.
gridzyItemInitializingYoo ṣeto ni kete ti nkan naa ba bẹrẹ ilana ipilẹṣẹ. Yoo rọpo nipasẹ gridzyItemReady ni kete ti ohun naa ba ti bẹrẹ ni kikun. Eyi tumọ si pe kii ṣe pe awọn aworan ti kojọpọ ni kikun (wo gridzyItemLoading ), ṣugbọn ohun kan ti ṣetan lati han.
gridzyItemReadyYoo rọpo gridzyItemInitializing Bibẹrẹ ni kete ti nkan naa ti wa ni ipilẹṣẹ ni kikun. Yoo ko wa ni kuro. Eyi tumọ si pe kii ṣe pe awọn aworan ti kojọpọ ni kikun (wo gridzyItemComplete ), ṣugbọn ohun kan ti ṣetan lati han.
gridzyItemLoadingYoo ṣeto ni kete ti nkan naa ba bẹrẹ ilana ipilẹṣẹ. Yoo rọpo nipasẹ gridzyItemComplete ni kete ti awọn aworan ti o wa ninu (nigbagbogbo ọkan nikan) ti kojọpọ ni kikun.
gridzyItemCompleteYoo rọpo gridzyItemLoading ni kete ti awọn aworan ti o wa ninu (nigbagbogbo ọkan nikan) ti kojọpọ ni kikun. Yoo ko wa ni kuro.
gridzyItemInitialToVisibleYoo ṣeto ni kete ti ohun naa bẹrẹ lati han ni igba akọkọ. Yoo yọkuro ni kete ti ohun naa ba han patapata.
gridzyItemVisibleYoo ṣeto ni kete ti ohun naa ba han ni kikun. Yoo yọkuro ni kete ti nkan naa ba bẹrẹ si parẹ.
gridzyItemVisibleToHiddenYoo ṣeto ni kete ti ohun naa ba bẹrẹ si parẹ. Yoo yọkuro ni kete ti nkan naa ba ti farapamọ patapata.
gridzyItemHiddenYoo ṣeto ni kete ti ohun naa ba ti farapamọ patapata. Yoo yọkuro ni kete ti ohun naa ba bẹrẹ lati han.
gridzyItemHiddenToVisibleYoo ṣeto ni kete ti ohun naa ba bẹrẹ si han (ayafi ti o han ni igba akọkọ - wo kilasi gridzyItemInitialToVisible ). Yoo yọkuro ni kete ti ohun naa ba han patapata.
gridzyItemVisibleToVisibleYoo wa ni ṣeto bi ni kete bi ohun kan ninu akoj yi pada, ṣugbọn awọn ohun kan ara wà ki o si duro han. Yoo yọkuro ni kete ti ere idaraya iyipada ti pari.

Nipa aiyipada Atọka ilana ati awọn ohun idanilaraya fun ifarahan ati awọn aworan ti o sọnu jẹ asọye tẹlẹ nipasẹ faili CSS akọkọ Gridzy.

Pẹlu awọn kilasi CSS ti a mẹnuba loke o le ṣe ara atọka ilana tirẹ ati awọn ohun idanilaraya. Ṣọra lati wo Gridzy akọkọ faili CSS, lati loye kini iwọ yoo ni lati yipo. Ko si iberu, ohun gbogbo ti wa ni akọsilẹ daradara nibẹ.

Je ki ikojọpọ

Ti o ba lo ọpọlọpọ awọn aworan, o le jẹ imọran to dara lati ṣe iranlọwọ fun Gridzy lati kọ akoj ni iyara.

Dena Fifo Images

Gridzy Egba nilo ipin abala ti gbogbo awọn aworan lati ṣe iṣiro akoj. Awọn abajade otitọ wọnyi ni awọn eroja fo ti diẹ ninu awọn aworan ba ṣetan ati awọn miiran kii ṣe. Awọn aworan diẹ sii wa, diẹ sii didanubi le jẹ ipa yii.

Lati ṣe idiwọ ihuwasi yii, kan ṣeto width ati awọn abuda height fun gbogbo awọn eroja img . O ṣe pataki lati ṣeto awọn iye to tọ fun aworan kọọkan, bibẹẹkọ awọn aworan yoo daru. Awọn iye to pe ni iwọn atilẹba ati giga ti aworan oniwun:

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

Lẹhinna Gridzy le ṣe iṣiro akoj lẹsẹkẹsẹ laisi iwulo lati mọ awọn iwọn gangan ti awọn aworan.

Ikojọpọ Ọlẹ

Lati kojọpọ awọn aworan nikan ti o wa ni oju wiwo ti o han, kan tẹle awọn igbesẹ wọnyi:

  1. Fi width ati awọn abuda height sii bi a ti ṣalaye loke (rii daju pe o lo awọn iye to pe)
  2. Rọpo gbogbo awọn abuda src pẹlu data-gridzylazysrc bi a ṣe han ni isalẹ (ti o ba ni awọn abuda srcset daradara, rọpo wọn pẹlu 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>

Lẹhin awọn igbesẹ wọnyi awọn aworan yoo gbejade ni kete ti wọn ba wa nitosi tabi inu oju wiwo naa.

Atọka ilana

Atọka ilana jẹ aami ere idaraya kekere ti o han lakoko ti aworan n ṣajọpọ. Ti o ba lo awọn akọle & awọn awọ ara , atọka ilana yoo han laifọwọyi. Bibẹẹkọ o nilo diẹ ninu awọn atunṣe:

  1. Fi nkan img kọọkan sinu ipin div
    (tabi sinu eyikeyi nkan miiran – wo HTML atunmọ fun diẹ sii)
  2. Ṣafikun gridzyImage kilasi si ipin img kọọkan
<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>

Lẹhin iyẹn o yẹ ki o wo awọn itọkasi ilana ti awọn aworan ba gba akoko lati fifuye.

Ajọ

Awọn asẹ ni Gridzy rọrun pupọ ṣugbọn lagbara. Laibikita iru àlẹmọ ti o nilo, o ṣee ṣe pupọ pe o ṣee ṣe. Gbogbo ohun ti o nilo ni, CSS diẹ ati awọn eroja fọọmu HTML diẹ…

Eyi ni apẹẹrẹ iṣẹ-ṣiṣe:

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

Jẹ ká Kọ O Igbese nipa Igbesẹ

1. Ni akọkọ a nilo ilana HTML deede ti Gridzy ati ṣeto awọn orukọ kilasi fun gbogbo awọn ohun gallery ki a le ṣe àlẹmọ wọn lẹhinna

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

Ni yi apẹẹrẹ a nikan lo kan kilasi fun kọọkan ano. Ṣugbọn o tun le ṣeto awọn kilasi pupọ fun ipin kan, ti nkan yẹn ba yẹ ki o wa nipasẹ awọn asẹ pupọ.

2. Lẹhinna a ṣafikun diẹ ninu awọn bọtini nipasẹ eyiti a le yi awọn asẹ pada lẹhinna

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

Dipo awọn bọtini, o tun le lo awọn eroja fọọmu miiran bi awọn apoti ayẹwo, awọn bọtini redio, yan awọn aaye ati bẹbẹ lọ.

Bii o ti le rii, awọn iye ti awọn bọtini jẹ awọn yiyan CSS deede. Ni kete ti a ti pari, titẹ lori iru bọtini kan yoo ṣafihan awọn aworan ti o baamu ti oluyan CSS naa. Ni imọ-ẹrọ o rọrun ṣeto aṣayan filter si iye yii.

O tun le lo awọn yiyan eka pupọ diẹ sii. Fun apẹẹrẹ :not(.animals) yoo ṣiṣẹ paapaa, bakanna bi .animals.people ati .animals, .people .

3. Nikẹhin, a ṣafikun awọn bọtini sinu apoti div kan ki o so wọn pọ si ibi aworan Gridzy, nipa tito aṣayan 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>

Bi o ti le rii, a tun lo oluyan CSS kan fun aṣayan filterControls . Apoti div pẹlu ẹya id nikan ṣiṣẹ lati jẹ ki awọn bọtini rọrun lati yan nipasẹ yiyan CSS yẹn.

O n niyen!

Ti o ba fẹ ojutu JavaScript kan, ṣayẹwo API .

API

Botilẹjẹpe Gridzy ni API tirẹ, ọpọlọpọ awọn nkan le ṣee ṣe laisi rẹ, ni irọrun nipasẹ ifọwọyi DOM. Gridzy yoo ṣe akiyesi rẹ ati ṣatunṣe akoj. Ṣugbọn API ti o lagbara pupọ tun wa…

Ifọwọyi DOM

Fun gbogbo awọn ifọwọyi Awoṣe Nkan Iwe-ipamọ (DOM) a nilo akọkọ nkan eiyan:

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

Fi Awọn aworan kun

O ṣe pataki lati kọ ni kikun ati ki o kun eroja ọmọ tuntun ṣaaju ki o to ṣafikun si nkan eiyan. Bibẹẹkọ Gridzy ko le rii awọn iwọn to pe.

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

Yọ Awọn aworan kuro

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

Yi Awọn aṣayan pada

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

Diẹ sii nipa ifọwọyi DOM o le rii ni awọn docs wẹẹbu MDN . Iṣafihan tun wa si DOM ti o wa.

API ohun-ini

Lati lo API, a kọkọ nilo apẹẹrẹ Gridzy, eyiti o so mọ eroja eiyan Gridzy:

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

Gba Aṣayan

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

Gba Gbogbo Awọn aṣayan

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

Ṣeto Awọn aṣayan

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

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

Waye Ajọ

Lilo àlẹmọ kan n ṣeto filter aṣayan ti o le jẹ yiyan CSS eyikeyi ti o wulo:

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

Ṣafikun Awọn iṣẹ Ipepada

DEPRECATED niwon version 2.4.0
Lo awọn iṣẹlẹ igbalode ati irọrun diẹ sii dipo. Wo apakan atẹle fun awọn alaye.

Gridzy.js 2 ṣe atilẹyin awọn aṣayan diẹ fun awọn iṣẹ ipe pada. Wọn le ṣeto nipasẹ API ohun-ini nikan, ṣugbọn gẹgẹ bi awọn aṣayan miiran:

// 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.
  }
});
Apejuwe
onBeforeOptionsChangedIṣẹ ipe pada ti o pe taara ṣaaju eto awọn aṣayan.
onOptionsChangedIṣẹ ipe pada ti o pe taara lẹhin awọn aṣayan eto.
onBeforeRenderIṣẹ ipe pada ti o pe taara ṣaaju ṣiṣe.
onRenderIṣẹ ipe pada ti o pe taara lẹhin ṣiṣe.

Lo Awọn iṣẹlẹ

niwon version 2.4.0

O le lo awọn iṣẹlẹ Gridzy gẹgẹbi awọn iṣẹlẹ JavaScript ti o ṣe deede:

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

Diẹ ninu awọn iṣẹlẹ ti wa ni ina lori eroja eiyan Gridzy ati awọn iṣẹlẹ miiran ti wa ni ina lori awọn eroja ohun elo kọọkan laarin nkan eiyan.

Awọn iṣẹlẹ ti ta lori eroja eiyan Gridzy:

Apejuwe
gridzyBeforeInitIna ṣaaju ipilẹṣẹ gallery.
gridzyInitIna lẹhin ibẹrẹ gallery.
gridzyBeforeOptionsChangedIna ṣaaju ki o to ṣeto awọn aṣayan.
gridzyOptionsChangedIna lẹhin eto awọn aṣayan.
gridzyBeforeRenderIna ṣaaju ṣiṣe.
gridzyRenderIna lẹhin Rendering.
Ti o ba padanu awọn iṣẹlẹ eyikeyi nibi, jọwọ fi ibeere atilẹyin ranṣẹ.

event.target pese Gridzy eiyan ano.
event.detail.instance pese apẹẹrẹ Gridzy.

Awọn iṣẹlẹ ti ta lori awọn eroja nkan:

Apejuwe
gridzyItemBeforeInitIna ṣaaju ipilẹṣẹ ohun kan.
gridzyItemInitIna lẹhin ipilẹṣẹ ohun kan.
gridzyItemLoadingIna nigbati ohun kan bẹrẹ ikojọpọ.
gridzyItemReadyIna nigbati ohun kan ba ṣetan fun iṣiro akoj. Nitorinaa ipin abala ti mọ, ṣugbọn aworan le tun jẹ ikojọpọ.
gridzyItemCompleteIna nigbati aworan ohun kan ti kojọpọ ni kikun.
Ti o ba padanu awọn iṣẹlẹ eyikeyi nibi, jọwọ fi ibeere atilẹyin ranṣẹ.

event.target pese awọn oniwun ohun kan ano.
event.detail.instance pese apẹẹrẹ Gridzy.

API - Agbaye

Awọn iṣẹ kan wa ti o jẹ ominira ti awọn iṣẹlẹ Gridzy. Nitorinaa a ko nilo lati gba apẹẹrẹ ṣaaju.

Gba Aṣayan Aiyipada

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

Gba Gbogbo Awọn aṣayan Aiyipada

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

Ṣeto Awọn aṣayan Aiyipada

Eyi ko ṣeto awọn aṣayan ti gbogbo awọn iṣẹlẹ Gridzy ti ipilẹṣẹ tẹlẹ, ṣugbọn asọye ipilẹ fun awọn iṣẹlẹ tuntun. Sibẹsibẹ, ti aṣayan ti apẹẹrẹ ti o wa tẹlẹ yoo tunto nipasẹ iye null , yoo lo iye aiyipada tuntun.

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

O le lo eyi lati ṣeto awọn aṣayan ni agbaye, ti o ba pe ṣaaju ki DOM ti ṣetan. Nitorinaa iwọ kii yoo nilo lati ṣeto awọn aṣayan bi awọn abuda mọ.

Awọn adaṣe adaṣe

Niwọn igba ti gbogbo awọn adaṣe ti Gridzy.js 2 ṣiṣẹ, ko si iwulo fun awọn ọna isalẹ. Ṣugbọn awọn adaṣe adaṣe le wa ni pipa lati lo Gridzy ni ọna aṣa diẹ sii:

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

Diẹ ninu awọn aṣayan wọnyi ko le šeto nipasẹ data-gridzy- attributes tabi nipasẹ setOptions() , nitori awọn idi ọgbọn:

Aiyipada IyeApejuwe
autoInitOnDomReadytrueṢe awari awọn eroja pẹlu gridzy kilasi lori ikojọpọ oju-iwe ati bẹrẹ wọn.

Ṣeto nipasẹ Gridzy.setDefaultOptions()
autoInitOnDomMutation
Oluwoye iyipada		trueṢe awari awọn eroja tuntun pẹlu gridzy kilasi ni kete ti wọn ba han ninu DOM ati bẹrẹ wọn. (fun apẹẹrẹ ni lilo awọn iyipada oju-iwe)

Ṣeto nipasẹ Gridzy.setDefaultOptions()
autoSyncChildListMutation
Oluwoye iyipada		trueIwari boya omo eroja (awọn aworan) ti wa ni afikun tabi kuro, ati ki o mu akoj laifọwọyi.

Ṣeto nipasẹ data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
useOptionAttributestrueṢe alaye boya awọn abuda data-gridzy- jẹ lilo gbogbogbo tabi rara. Ti eyi ba jẹ awọn aṣayan false le ṣee ṣeto nipasẹ API ohun-ini nikan.

Seto nipasẹ new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncAttributesMutation
Oluwoye iyipada		trueṢe awari awọn iyipada ti data-gridzy- awọn abuda, ati imudojuiwọn akoj laifọwọyi. Tun ṣe iwari ti kilasi gridzyAnimated ti wa ni afikun tabi yọkuro ati ti awọn ayipada abuda style ba waye. Ti o ba ti useOptionAttributes is false , o iwari nikan style awọn ayipada eroja.

Ṣeto nipasẹ data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncChildClassMutation
Oluwoye iyipada		trueṢe awari awọn iyipada ti awọn abuda class ti gbogbo awọn eroja ọmọ (awọn aworan). Ti o yẹ nipa awọn asẹ.

Ṣeto nipasẹ data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoSyncImageMutation
Oluwoye iyipada

niwon version 2.5.0		trueṢe awari awọn iyipada ti awọn abuda src ti gbogbo awọn aworan. Ti o wulo nigba lilo pẹlu React tabi awọn ile-ikawe ti o jọra.

Ṣeto nipasẹ data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()
autoRenderOnResize
ResizeObserver

niwon version 2.6.0		trueṢe awari awọn iyipada ti iwọn ano. Ti o yẹ nipa apẹrẹ idahun. (Ṣaaju ẹya 2.6.0 a ti lo olutẹtisi iṣẹlẹ ti iwọn window kan)

Ṣeto nipasẹ data-grizy- , new Gridzy() , setOptions() , Gridzy.setDefaultOptions()

Bibẹrẹ pẹlu ọwọ

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

Pa Apeere naa run

Ni aijọju sọ, idakeji ti ipilẹṣẹ Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Sync Child Akojọ afọwọṣe

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

Ṣiṣẹpọ Aṣoju Ọmọ Kan Kan Pẹlu Ọwọ

Nigbagbogbo ko nilo, ayafi ni awọn ọran ti o ṣọwọn pupọ.

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

Awọn eroja amuṣiṣẹpọ pẹlu ọwọ

Ṣe akiyesi pe aṣayan useOptionAttributes gbọdọ jẹ true fun eyi.

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

Ipa Rendering

Nigbagbogbo ko nilo, paapaa ti gbogbo awọn adaṣe adaṣe ba wa ni pipa

gridzyInstance.render();