Mtundu wa 2.x - Gridzy.Gallery

Webusayiti yamasuliridwa yokha. Ngati china chake sichikumveka bwino, chonde yang'anani zolemba zachingerezi.

Kugwiritsa Ntchito Kwambiri

Kwezani mafayilo a Gridzy ku seva yanu ndikuwonjezera patsamba lanu (nthawi zambiri pamutu wamutu):

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

Onjezani nambala ya HTML (paliponse pagawo la thupi):

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

Ndichoncho! Ndicho chitsanzo chogwira ntchito mokwanira. Palibe kuyambitsa kwina kofunikira.

Kusintha

Njira yosavuta yosinthira Gridzy ndikungogwiritsa ntchito mawonekedwe a HTML. Mukungoyenera kutchula dzina lachisankho ndi data-gridzy- . Chifukwa chake, kukhazikitsa spaceBetween pa njira, ingowonjezerani mawonekedwe a 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>

Zosankha Zazikulu

	Mtengo Wofikira	Kufotokozera
`animate`	`true`	Imatsimikiza ngati makanema ojambula akuyenera kugwiritsidwa ntchito gridi ikasintha (mwachitsanzo, posintha mazenera asakatuli kapena pokhazikitsa zosefera).
`layout`	`justified`	Imatanthauzira masanjidwe ogwiritsidwa ntchito. Gridzy.js 2 imathandizira masanjidwe awiri osiyana `justified` ndi `waterfall` . Aliyense waiwo ali ndi magawo ake owonjezera, omwe mungapeze pansipa tebulo ili.
`filter`	`*`	Zimasankha zithunzi zomwe ziyenera kuwonetsedwa. Chosankha chilichonse cha CSS chingagwiritsidwe ntchito ngati mtengo pano. Nthawi zambiri zimaziyika zokha kudzera pa `filterControls` (onani njira yotsatira). Onani Zosefera
`filterControls`		Imatsimikiza kuti ndi zinthu ziti zomwe zingagwiritsidwe ntchito kusefa zithunzi. Chosankha chilichonse cha CSS, chomwe chimasankha mawonekedwe a HTML, chingagwiritsidwe ntchito ngati mtengo pano. Onani Zosefera
`autoConsiderScrollBars`	`true`	Kudziwiratu kukula komwe kulipo ngati mipiringidzo ikuwoneka kapena kutha. Nthawi zonse timalimbikitsa kuti tisiye `true` pokhapokha ngati automatism iyi imayambitsa mavuto.

Zosankha za Justified

	Mtengo Wofikira	Kufotokozera
`autoFontSize`	`false`	Imasinthiratu kukula kwa mawonekedwe a bokosi lililonse kutengera kukula kwa bokosi loyambirira. Mwachisawawa, kukula kwa font sikukhazikitsidwa bwino.
`desiredHeight`	`190`	Imatanthawuza kutalika kofunidwa kwa mizere ya zinthu. Kutalika kwenikweni kudzawerengedwa malinga ndi kukula komwe kulipo komanso zinthu zomwe zili pamzerewu.
`hideOnMissingImage`	`true`	Imabisa mabokosi omwe ali ndi zithunzi zomwe sizinathe kukwezedwa.
`spaceBetween`	`4`	Zimatanthawuza mtunda pakati pa zinthu mu ma pixel.
`lastRowAlign` kuyambira mtundu 2.3.0	`justified`	Imatanthauzira machitidwe a mzere womaliza. Makhalidwe ololedwa ndi `left` , `center` , `right` ndi `justified` .
`singleRowAlign` kuyambira mtundu 2.3.0	`justified`	Imatanthauzira khalidwe ngati pali mzere umodzi wokha. Makhalidwe ololedwa ndi `left` , `center` , `right` ndi `justified` .
~~`fillLastRow`~~ ~~kuyambira mtundu 2.1.0~~	~~`true`~~	CHOCHOKEDWA kuyambira mtundu 2.4.0 (KUSINTHA kuyambira mtundu 2.3.0 ) Amakonza zithunzi kuti mzere womaliza ukhale wodzaza nthawi zonse. Ngati mukufuna kuwonjezera zithunzi mwachangu, lingakhale lingaliro labwino kuti mutsegule izi. Zilibe kanthu pamizere imodzi (onani `fillSingleRow` ).
`fillSingleRow` kuyambira mtundu 2.1.0	~~`true`~~	CHOCHOKEDWA kuyambira mtundu 2.4.0 (KUSINTHA kuyambira mtundu 2.3.0 ) Ngati pali mzere umodzi wokha, umakonza zithunzizo kuti mzerewo ukhale wodzaza nthawi zonse. Ngati zingachitike kuti muli ndi chithunzi chimodzi kapena ziwiri zokha mugalari, lingakhale lingaliro labwino kuyimitsa izi.

Zosankha za Waterfall

	Mtengo Wofikira	Kufotokozera
`autoFontSize`	`false`	Imasinthiratu kukula kwa mawonekedwe a bokosi lililonse kutengera kukula kwa bokosi loyambirira. Mwachisawawa, kukula kwa font sikukhazikitsidwa bwino.
`desiredWidth`	`250`	Imatanthawuza m'lifupi mwake lomwe mukufuna. M'lifupi weniweniwo udzawerengedwa malinga ndi kukula komwe kulipo komanso kuchuluka kwa mizati.
`hideOnMissingImage`	`true`	Imabisa mabokosi omwe ali ndi zithunzi zomwe sizinathe kukwezedwa.
`horizontalOrder`	`false`	Imatanthawuza kuti maelementi amaikidwa mosamalitsa chinthu chimodzi pagawo lililonse kuchokera kumanzere kupita kumanja, kenako imayambanso kumanzere kwambiri pagawo lomwe lili ndi malo ambiri. Mwachikhazikitso zinthuzo zidzayikidwa nthawi zonse muzanja ndi kutalika kochepa kwambiri.
`spaceBetween`	`4`	Zimatanthawuza mtunda pakati pa zinthu mu ma pixel.
`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`.

Zambiri Zapamwamba Zosankha

Kuti mudziwe zambiri, onani API .

Semantic HTML

Mapangidwe osavuta a HTML a Gridzy ndi awa:

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

Komabe, Gridzy ndi yosinthika kwambiri ndipo mutha kugwiritsa ntchito pafupifupi mawonekedwe ena aliwonse a HTML. Pali mfundo zochepa zomwe muyenera kuziganizira:

Mwana aliyense wa chidebe amayimira chinthu chimodzi mu gridi.
Zonse zachidebe ndi ana ake zitha kukhala zamtundu uliwonse, monga ul ndi li (ingolingalirani zosintha zosasintha za msakatuli).
Ngati img element si mwana wachindunji, ikufunika gridzyImage .

Chifukwa chake ichinso ndi kapangidwe ka HTML kogwira ntchito:

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

Makamaka ngati mukufuna kuwonjezera mawu ofotokozera, mufunika mawonekedwe apamwamba a HTML. Kuti mudziwe zambiri za izo, yang'anani Mawu Omasulira & Zikopa .

Mawu Omasulira & Zikopa

Ngati mukufuna kuwonjezera mawu omasulira ku gallery yanu, muyenera kufotokozera mawonekedwe. Choncho, zikopa zina zokonzedweratu zilipo. Khungu lililonse lokhala ndi fayilo ya CSS. Muyenera kuwonjezera fayiloyi kuwonjezera pa mafayilo akuluakulu a Gridzy (nthawi zambiri pamutu wamutu):

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

Komanso mufunika mawonekedwe apamwamba a 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>

Ngati mukuganiza za kapangidwe ka HTML, yang'anani pa Semantic HTML .

Pa mawu ofotokozera mutha kugwiritsa ntchito tag yamtundu uliwonse, ingotsimikizirani kuti ili ndi gulu la gridzyCaption . Chinthu cha img chimafuna gulu la gridzyImage .

Chitsanzo pamwambapa chikuwonetsa khungu gridzySkinClassic . Kuti mugwiritse ntchito ina, ingosinthani dzina lachikopa ndi chimodzi mwa izi:

Kuphatikiza Zikopa

	Makalasi Opezeka
gridzySkinBlank poyambira bwino kupanga khungu lanu chiwonetsero chamoyo	`gridzySkinBlank`
gridzySkinClassic chiwonetsero chamoyo	`gridzySkinClassic` `gridzySkinClassicLight`(YASINSIDWA kuyambira mtundu 2.6.0)
gridzySkinFullOverlay chiwonetsero chamoyo	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`(YASINSIDWA kuyambira mtundu 2.6.0)
gridzySkinLift chiwonetsero chamoyo	`gridzySkinLift` `gridzySkinLiftLight`(YASINSIDWA kuyambira mtundu 2.6.0)
gridzySkinMagnifier ntchito zoom sizinaphatikizidwe chiwonetsero chamoyo	`gridzySkinMagnifier` `gridzySkinMagnifierLight`(YASINSIDWA kuyambira mtundu 2.6.0)

Zikopa zonse pamwambapa zimangofunika fayilo ya CSS, koma pali zikopa zina zomwe zimafunikiranso fayilo ya JavaScript:

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

	Makalasi Opezeka
gridzySkinBlur sichigwira ntchito mu IE chiwonetsero chamoyo	`gridzySkinBlur` `gridzySkinBlurLight`(YASINSIDWA kuyambira mtundu 2.6.0)
gridzySkinCard chiwonetsero chamoyo	`gridzySkinCard` `gridzySkinCardLight`(YASINSIDWA kuyambira mtundu 2.6.0)

Khungu Zosankha

Popeza Baibulo 2.6.0 pali Mungasankhe sintha anamanga-zikopa. Malingana ndi khungu lenileni mungathe kukhazikitsa mtundu wamtundu, mtundu wa malemba ndi mthunzi wa malemba. Mukungoyenera kugwiritsa ntchito katundu wa CSS monga mukuwonera apa:

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

Onani zosinthika zomwe zimathandizidwa ndi zosintha zosasinthika pakhungu lililonse apa:

gridzySkinClassic

Zosintha	Mtengo Wofikira	Zambiri
`--background`	`rgba(0, 0, 0, .7)`	imalola mtengo wamtundu uliwonse wa CSS
`--color`	`rgb(255, 255, 255)`	imalola mtengo wamtundu uliwonse wa CSS
`--text-shadow`	`none`	imalola mtengo uliwonse wazithunzi za CSS

gridzySkinFullOverlay

Zosintha	Mtengo Wofikira	Zambiri
`--background`	`rgba(0, 0, 0, .7)`	imalola mtengo wamtundu uliwonse wa CSS
`--color`	`rgb(255, 255, 255)`	imalola mtengo wamtundu uliwonse wa CSS
`--text-shadow`	`none`	imalola mtengo uliwonse wazithunzi za CSS

gridzySkinLift

Zosintha	Mtengo Wofikira	Zambiri
`--background`	`rgba(0, 0, 0, .7)`	imalola mtengo wamtundu uliwonse wa CSS
`--color`	`rgb(255, 255, 255)`	imalola mtengo wamtundu uliwonse wa CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0), 0 0 20px rgb(0, 0, 0), 0 0 30px rgb(0, 0, 0)`	imalola mtengo uliwonse wazithunzi za CSS

gridzySkinMagnifier

Zosintha	Mtengo Wofikira	Zambiri
`--background`	`rgba(0, 0, 0, .7)`	imalola mtengo wamtundu uliwonse wa CSS
`--color`	`rgb(255, 255, 255)`	imalola mtengo wamtundu uliwonse wa CSS

Khungu ili siligwirizana --text-shadow

gridzySkinBlur

Zosintha	Mtengo Wofikira	Zambiri
`--background`	`rgba(0, 0, 0, .7)`	imalola mtengo wamtundu uliwonse wa CSS
`--color`	`rgb(255, 255, 255)`	imalola mtengo wamtundu uliwonse wa CSS
`--text-shadow`	`0 0 10px rgb(0, 0, 0)`	imalola mtengo uliwonse wazithunzi za CSS

gridzySkinCard

Zosintha	Mtengo Wofikira	Zambiri
`--background`	`rgba(0, 0, 0, 1)`	imalola mtengo wamtundu uliwonse wa CSS
`--color`	`rgb(255, 255, 255)`	imalola mtengo wamtundu uliwonse wa CSS
`--text-shadow`	`none`	imalola mtengo uliwonse wazithunzi za CSS

Zikopa zonse zofotokozedwatu zimathandizira mawu osavuta a mawu. Mutha kupanga zikopa zanu komanso zovuta kwambiri. Chonde yang'anani pa Style Gridzy .

Mtundu Gridzy

Ngati palibe khungu losankhidwiratu lomwe likugwirizana ndi zosowa zanu, mutha kusanja lanu.

Njira yosavuta ndiyo kutengera kaye khungu lomwe lilipo ndikulisintha kuti ligwirizane ndi zosowa zanu. gridzySkinBlank yofotokozedwatu yapakhungu nthawi zambiri imapereka maziko abwino komanso zolembedwa zabwino mufayilo ya 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;
}

Mufayilo ya CSS mupeza makalasi gridzySkinBlank , gridzyImage ndi gridzyCaption . Gridzy palokha safuna makalasi awa. Amangogwiritsidwa ntchito pamakongoletsedwe ndipo mutha kuwachotsa kapena kuwatcha dzina ngati mukufuna.

Kuphatikiza apo mupeza CSS class gridzyItem . Gridzy amakhazikitsa kalasi iyi yokha kwa ana onse achindunji a chinthu chachikulu. Chifukwa chake, mutha kugwiritsa ntchito kalasi iyi kupanga masitayilo azithunzi zanu.

Zinthu Zofunika Kwambiri

Zomwe zili muzinthuzo ziyenera kuyankha mokwanira. Ganizirani kuti kukula kwa chinthu kudzasintha. Gwiritsani ntchito maperesenti m'malo mwa ma pixel. Ndipo yang'anani njira ya Gridzy masanjidwe autoFontSize , yomwe imamangiriza kukula kwa font pabokosi la chinthucho.
Chinthu chilichonse chiyenera kukhala ndi chiŵerengero chodziwika bwino. Chigawo cha chinthucho sichidzasintha ndipo chikufunika kuti muwerengere gululi. Chifukwa chake ngati chinthu sichikhala ndi chiwongolero chodziwika bwino, chifotokozereni pamanja (mwachitsanzo kudzera pa css).

Nthawi zina, kungakhale kosavuta kuyika zomwe zili muzinthuzo Gridzy asanayambe. Ingochotsani kalasi gridzy kapena fayilo ya Gridzy javascript kwakanthawi pa izi.

Ndichoncho! Ndizo zonse zomwe mukufunikira kuti mupange khungu lanu. Zikopa zambiri zomwe zafotokozedwatu sizigwiritsa ntchito izi.

Koma pakhoza kukhala zambiri ngati mukufuna ...

Zikopa Zapamwamba

Gridzy amagwiritsa ntchito makalasi ambiri a CSS kuposa gridzyItem yokha . Ambiri a iwo adzakhazikitsidwa basi ndipo mukhoza kuwagwiritsa ntchito makongoletsedwe nawonso.

Maphunziro a Chidebe Chachikulu

Dzina la Kalasi	Kufotokozera
`gridzy` kukhazikitsa pamanja	Gridzy amangopeza zinthu zomwe zili ndi kalasiyi ndikuziyambitsa.
`gridzyAnimated`	Idzakhazikitsidwa yokha ngati njira yowonetsera `animate` `true` . Ngati kalasiyi yakhazikitsidwa pamanja, njira ya `animate` ikhala `true` yokha (kupatula ngati yakhazikitsidwa kuti `false` ).

Zinthu Maphunziro

Dzina la Kalasi	Kufotokozera
`gridzyItem`	Idzakhazikitsidwa chinthucho chikangoyamba ntchito yoyambira. Sadzachotsedwa konse.
`gridzyItemInitializing`	Idzakhazikitsidwa chinthucho chikangoyamba ntchito yoyambira. Idzasinthidwa ndi `gridzyItemReady` chinthucho chikangokhazikitsidwa. Izi sizikutanthauza kuti zithunzi zadzaza (onani `gridzyItemLoading` ), koma chinthu chakonzeka kuti chiwoneke.
`gridzyItemReady`	Idzalowa m'malo mwa `gridzyItemInitializing` chinthucho chikangokhazikitsidwa. Sadzachotsedwa konse. Izi sizikutanthauza kuti zithunzi zadzaza (onani `gridzyItemComplete` ), koma chinthucho chiri chokonzeka kuti chiwoneke.
`gridzyItemLoading`	Idzakhazikitsidwa chinthucho chikangoyamba ntchito yoyambira. Idzalowedwa m'malo ndi `gridzyItemComplete` zithunzi zomwe zilimo (nthawi zambiri chimodzi chokha) zikadzaza.
`gridzyItemComplete`	Idzalowa m'malo mwa `gridzyItemLoading` zithunzi zomwe zili (kawirikawiri chimodzi chokha) zikadzaza. Sadzachotsedwa konse.
`gridzyItemInitialToVisible`	Zikhazikitsidwa pomwe chinthucho chikayamba kuwonekera koyamba. Adzachotsedwa chinthucho chikangowonekera.
`gridzyItemVisible`	Zikhazikitsidwa pomwe chinthucho chikawonekera. Idzachotsedwa chinthucho chikangoyamba kuzimiririka.
`gridzyItemVisibleToHidden`	Idzakhazikitsidwa pomwe chinthucho chikayamba kuzimiririka. Adzachotsedwa mwamsanga pamene chinthucho chitabisika.
`gridzyItemHidden`	Zikhazikitsidwa pomwe chinthucho chitabisika. Idzachotsedwa chinthucho chikayamba kuwonekera.
`gridzyItemHiddenToVisible`	Idzakhazikitsidwa chinthucho chikayamba kuwonekera (kupatula kuwonekera koyamba) - onani kalasi `gridzyItemInitialToVisible` ). Adzachotsedwa chinthucho chikangowonekera.
`gridzyItemVisibleToVisible`	Idzakhazikitsidwa pomwe china chake mu gridi chasintha, koma chinthucho chinali ndikukhala chowonekera. Zichotsedwa mukangomaliza kusintha makanema.

Mwachikhazikitso chizindikiro cha ndondomeko ndi makanema ojambula zithunzi zowonekera ndi kuzimiririka zimafotokozedwa ndi Gridzy main CSS file.

Ndi makalasi awa a CSS omwe tawatchulawa mutha kuyika chizindikiro chanu ndi makanema ojambula. Yesetsani kuyang'ana mufayilo yayikulu ya Gridzy CSS, kuti mumvetsetse zomwe muyenera kupitilira. Palibe mantha, zonse zalembedwa bwino pamenepo.

Konzani Loading

Ngati mugwiritsa ntchito zithunzi zambiri, lingakhale lingaliro labwino kuthandiza Gridzy kumanga gululi mwachangu.

Pewani Zithunzi Zodumpha

Gridzy amafunikira kwambiri chiyerekezo chazithunzi zonse kuti awerengere gululi. Izi zimabweretsa kulumpha ngati zithunzi zina zili zokonzeka pomwe zina sizinali. Zithunzi zambiri zomwe zilipo, zokwiyitsa zimatha kukhala zotsatirazi.

Kuti mupewe izi, ingoikani width ndi height kwa zinthu zonse img . Ndikofunikira kukhazikitsa zikhalidwe zolondola pa chithunzi chilichonse, apo ayi zithunzizo zitha kupotozedwa. Makhalidwe olondola ndi makulidwe oyambilira ndi kutalika kwa chithunzichi:

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

Pambuyo pake Gridzy amatha kuwerengera gululi nthawi yomweyo osafuna kudziwa kukula kwake kwazithunzizo.

Waulesi Loading

Kuti mutsegule zithunzi zomwe zili pamalo owonera, tsatirani izi:

Ikani width ndi height monga tafotokozera pamwambapa (onetsetsani kuti mukugwiritsa ntchito mfundo zolondola)
Sinthani mawonekedwe onse src ndi data-gridzylazysrc monga momwe zilili pansipa (ngati muli ndi mawonekedwe srcset , m'malo mwake ndi 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>

Pambuyo pa masitepe awa zithunzi zidzatsegulidwa zikakhala pafupi kapena mkati mwa malo owonera.

Process Indicator

Chizindikiro cha ndondomeko ndi chithunzi chaching'ono chojambula chomwe chikuwoneka pamene chithunzi chikutsegula. Ngati mugwiritsa ntchito mawu ofotokozera & zikopa , chizindikiro cha ndondomeko chidzawonetsedwa zokha. Apo ayi, muyenera kusintha zina:

Ikani chinthu chilichonse img mu div element
(kapena muzinthu zina zilizonse - onani semantic HTML kuti mumve zambiri)
Onjezani gulu la gridzyImage ku chinthu chilichonse 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>

Pambuyo pake muyenera kuwona zizindikiro za ndondomeko ngati zithunzizo zimatenga nthawi kuti zitheke.

Zosefera

Zosefera mu Gridzy ndizosavuta koma zamphamvu. Ziribe kanthu kuti mukufuna fyuluta yamtundu wanji, ndizotheka kuti ikupezeka. Zomwe mukufunikira ndi, CSS pang'ono ndi mawonekedwe amtundu wa HTML ...

Nachi chitsanzo chogwira ntchito:

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

Tiyeni Timange Pang'onopang'ono

1. Choyamba timafunikira mawonekedwe a HTML a Gridzy ndikuyika mayina amkalasi azinthu zonse zagalari kuti tizisefa pambuyo pake.

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

Mu chitsanzo ichi timagwiritsa ntchito kalasi imodzi yokha pa chinthu chilichonse. Koma muthanso kukhazikitsa makalasi angapo a chinthu chimodzi, ngati chinthucho chitha kupezeka kudzera pazosefera zingapo.

2. Kenako timawonjezera mabatani omwe tingathe kusintha zosefera ndiye

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

M'malo mwa mabataniwo, mutha kugwiritsanso ntchito mawonekedwe ena monga mabokosi, mabatani a wailesi, sankhani minda ndi zina zotero.

Monga mukuwonera, makonda a mabataniwo ndi osankhidwa mwachizolowezi CSS. Tikangomaliza, dinani batani loterolo liwonetsa zithunzi zomwe zikufanana ndi chosankha cha CSS. Mwaukadaulo zimangoyika njira filter ku mtengo uwu.

Mutha kugwiritsanso ntchito zosankha zovuta kwambiri. Mwachitsanzo :not(.animals) zingagwirenso ntchito, komanso .animals.people ndi .animals, .people .

3. Pomaliza, timayika mabatani mu chidebe div ndikuwamanga ku Gridzy gallery, pokhazikitsa njira ya 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>

Monga mukuwonera, timagwiritsanso ntchito chosankha cha CSS pazosankha za filterControls . Chotengera cha div chokhala ndi id chimangothandiza kuti mabataniwo akhale osavuta kusankha kudzera pa chosankha cha CSS.

Ndichoncho!

Ngati mukufuna yankho la JavaScript, onani API .

API

Ngakhale Gridzy ali ndi API yake, zinthu zambiri zitha kuchitika popanda izo, ndikungoyendetsa DOM. Gridzy adzazindikira ndikusintha gululi. Koma palinso API yamphamvu kwambiri ...

Kusintha kwa DOM

Pazinthu zonse za Document Object Model (DOM) timafunikira chotengeracho:

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

Onjezani Zithunzi

Ndikofunika kuti mumange ndi kudzaza chinthu chatsopano cha mwana musanachiwonjezere ku chinthu chotengera. Apo ayi Gridzy sangathe kuzindikira miyeso yoyenera.

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

Chotsani Zithunzi

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

Sinthani Zosankha

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

Zambiri zakusintha DOM mutha kuzipeza pa MDN web docs . Palinso Maupangiri a DOM omwe alipo.

Proprietary API

Kuti tigwiritse ntchito API, choyamba timafunikira chitsanzo cha Gridzy, chomwe chimamangiriza ku chidebe cha Gridzy:

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

Pezani Njira

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

Pezani Zonse Zosankha

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

Khazikitsani Zosankha

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

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

Ikani Zosefera

Kugwiritsa ntchito fyuluta ndikungoyika filter zomwe zitha kukhala chosankha chilichonse chovomerezeka cha 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'
});

Onjezani Callback Functions

CHOYAMBA kuyambira mtundu wa 2.4.0
Gwiritsani ntchito Zochitika zamakono komanso zosinthika m'malo mwake. Onani gawo lotsatira kuti mudziwe zambiri.

~~Gridzy.js 2 imathandizira zosankha zina pamachitidwe obwereza. Atha kukhazikitsidwa kudzera pa API ya eni, koma monga zosankha zina:~~

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

	~~Kufotokozera~~
~~`onBeforeOptionsChanged`~~	~~Callback ntchito yomwe imayitanidwa mwachindunji musanakhazikitse zosankha.~~
~~`onOptionsChanged`~~	~~Callback ntchito yomwe imayitanidwa mwachindunji mukasankha zosankha.~~
~~`onBeforeRender`~~	~~Callback ntchito yomwe imayitanidwa mwachindunji musanapereke.~~
~~`onRender`~~	~~Callback ntchito yomwe imayitanidwa mwachindunji pambuyo popereka.~~

Gwiritsani Ntchito Zochitika

kuyambira mtundu 2.4.0

Mutha kugwiritsa ntchito zochitika za Gridzy chimodzimodzi monga zochitika zanthawi zonse za 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.
});

Zochitika zina zimathamangitsidwa pazigawo za Gridzy ndipo zochitika zina zimachotsedwa pazomwe zili mkati mwa chidebecho.

Zochitika zomwe zidawomberedwa pachinthu cha Gridzy:

	Kufotokozera
`gridzyBeforeInit`	Moto usanayambe kukhazikitsidwa kwa nyumbayi.
`gridzyInit`	Moto pambuyo poyambilira kwa gallery.
`gridzyBeforeOptionsChanged`	Moto musanakhazikitse zosankha.
`gridzyOptionsChanged`	Moto pambuyo poika zosankha.
`gridzyBeforeRender`	Moto usanapereke.
`gridzyRender`	Moto pambuyo popereka.

Ngati mukuphonya zochitika zilizonse pano, chonde tumizani pempho lothandizira .

event.target imapereka chotengera cha Gridzy.
event.detail.instance imapereka chitsanzo cha Gridzy.

Zochitika zomwe zimachokera kuzinthu zotsatirazi:

	Kufotokozera
`gridzyItemBeforeInit`	Moto usanayambike chinthu.
`gridzyItemInit`	Moto pambuyo poyambitsa chinthu.
`gridzyItemLoading`	Zimayaka pamene chinthucho chikuyamba kutsegula.
`gridzyItemReady`	Amayaka pamene chinthucho chakonzeka kuwerengetsera gridi. Chifukwa chake chiŵerengerocho chimadziwika, koma chithunzicho chikhoza kukhala chikutsegula.
`gridzyItemComplete`	Amayaka pamene chinthucho chithunzi chadzaza kwathunthu.

Ngati mukuphonya zochitika zilizonse pano, chonde tumizani pempho lothandizira .

event.target imapereka chinthu choyenera.
event.detail.instance imapereka chitsanzo cha Gridzy.

API - Padziko Lonse

Pali ntchito zina zomwe sizidalira zochitika za Gridzy. Chifukwa chake sitiyenera kupeza chitsanzo kale.

Pezani Njira Yofikira

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

Pezani Zosankha Zonse Zofikira

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

Khazikitsani Zosankha Zosasintha

Izi sizimayika zosankha zazochitika zonse za Gridzy zomwe zakhazikitsidwa kale, koma zimatanthawuza maziko a zochitika zatsopano. Komabe, ngati njira yomwe ilipo ikasinthidwanso kudzera mu value null , ingagwiritse ntchito mtengo wokhazikika watsopano.

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

Mutha kugwiritsa ntchito izi kukhazikitsa zosankha padziko lonse lapansi, ngati mutayitcha DOM isanakonzekere. Chifukwa chake simudzasowanso kukhazikitsa zosankha ngati mawonekedwe.

Automatism

Malingana ngati ma automatism onse a Gridzy.js 2 akugwira ntchito, palibe chifukwa cha njira zomwe zili pansipa. Koma ma automatism amatha kuzimitsidwa kuti agwiritse ntchito Gridzy mwanjira yachikhalidwe:

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

Zina mwa zosankhazi sizingakhazikitsidwe kudzera pa data-gridzy- makhalidwe kapena setOptions() , chifukwa cha zifukwa zomveka:

	Mtengo Wofikira	Kufotokozera
`autoInitOnDomReady`	`true`	Imazindikira zinthu zokhala ndi `gridzy` m'kalasi ndikutsegula ndikuziyambitsa. Zokhazikika kudzera pa `Gridzy.setDefaultOptions()`
`autoInitOnDomMutation` MutationObserver	`true`	Imazindikira zinthu zatsopano ndi gulu la `gridzy` zikangowoneka mu DOM ndikuziyambitsa. (monga kugwiritsa ntchito kusintha kwamasamba) Zokhazikika kudzera pa `Gridzy.setDefaultOptions()`
`autoSyncChildListMutation` MutationObserver	`true`	Imazindikira ngati zinthu za ana (zithunzi) zawonjezedwa kapena kuchotsedwa, ndikusintha gridiyo zokha. Zokhazikika kudzera pa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`useOptionAttributes`	`true`	Zimatanthawuza ngati mawonekedwe `data-gridzy-` amagwiritsidwa ntchito nthawi zambiri kapena ayi. Ngati izi ndi `false` zitha kukhazikitsidwa kudzera pa API yaumwini. Zokhazikika kudzera pa `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncAttributesMutation` MutationObserver	`true`	Imazindikira zosintha za `data-gridzy-` , ndikusintha gridi yokha. Imazindikiranso ngati gulu la `gridzyAnimated` liwonjezedwa kapena kuchotsedwa ndipo ngati kusintha kwa `style` kumachitika. Ngati `useOptionAttributes` ndi `false` , imazindikira kusintha kwa `style` okha. Zokhazikika kudzera pa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncChildClassMutation` MutationObserver	`true`	Imazindikira kusintha kwa `class` ya zinthu zonse za mwana (zithunzi). Zogwirizana ndi zosefera. Zokhazikika kudzera pa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoSyncImageMutation` MutationObserver kuyambira mtundu 2.5.0	`true`	Imazindikira kusintha kwa `src` pazithunzi zonse. Zoyenera zikagwiritsidwa ntchito ndi React kapena malaibulale ofanana. Zokhazikika kudzera pa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`
`autoRenderOnResize` ResizeObserver kuyambira mtundu 2.6.0	`true`	Imazindikira kusintha kwa m'lifupi mwa chinthu. Zogwirizana ndi kapangidwe kake. (Pambuyo pa mtundu wa 2.6.0 womvera wosinthira zenera adagwiritsidwa ntchito) Zokhazikika kudzera pa `data-grizy-` , `new Gridzy()` , `setOptions()` , `Gridzy.setDefaultOptions()`

Yambitsani Pamanja

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

Kuwononga Chitsanzo

Zanenedwa, zosiyana ndi kuyambitsa Gridzy.

gridzyInstance.destroy();
gridzyInstance = null;

Gwirizanitsani Mndandanda wa Ana Pamanja

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

Gwirizanitsani Chigawo cha Mwana Amene Ali Mmodzi Pamanja

Nthawi zambiri sizofunika, kupatula nthawi zina.

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

Gwirizanitsani Makhalidwe Pamanja

Dziwani kuti njira ya useOptionAttributes iyenera kukhala true pa izi.

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

Kukakamiza Kupereka

Nthawi zambiri sizofunikira, ngakhale ma automatism onse azimitsidwa

gridzyInstance.render();