The basic usage of Gridzy.js 2 is incredible simple, but you may want to use an other HTML structure. Gridzy.js 2 is very flexible in this respect. There are only a few points to consider …
The simplest HTML structure of Gridzy is this:
<div class="gridzy">
<img src="https://placeimg.com/640/480/any?1" alt="a random image" />
<img src="https://placeimg.com/640/480/any?2" alt="another random image" />
<img src="https://placeimg.com/640/480/any?3" alt="yet another random image" />
<img src="https://placeimg.com/640/480/any?4" alt="a random image again" />
<img src="https://placeimg.com/640/480/any?5" alt="one last random image" />
</div>
But the following example would work as well:
<ul class="gridzy">
<li>
<span>
<img class="gridzyImage" src="https://placeimg.com/640/480/any?1" alt="a random image" />
</span>
</li>
<li>
<span>
<img class="gridzyImage" src="https://placeimg.com/640/480/any?2" alt="another random image" />
</span>
</li>
<li>
<span>
<img class="gridzyImage" src="https://placeimg.com/640/480/any?3" alt="yet another random image" />
</span>
</li>
<li>
<span>
<img class="gridzyImage" src="https://placeimg.com/640/480/any?4" alt="a random image again" />
</span>
</li>
<li>
<span>
<img class="gridzyImage" src="https://placeimg.com/640/480/any?5" alt="one last random image" />
</span>
</li>
</ul>
This may not be a very useful structure, but it shows what’s possible. Just always consider these points:
- The container element can be any tag type, such as
ul
, but always needs the classgridzy
. - Each direct child element always represents one item in the grid and can be any tag type as well, such as
li
. - If you use tag types with browser default styles (such as
ul
andli
), you need to reset the browser defaults yourself. - If the
img
element isn’t such a direct child itself, it needs the classgridzyImage
, whereby it can be anywhere in the structure.
Captions
Especially if you like to add captions, you need an advanced HTML structure. Regardless of styling, this might be a good solution:
<div class="gridzy">
<figure>
<img class="gridzyImage" src="https://placeimg.com/640/480/any?1" alt="a random image" />
<figcaption>a caption text</figcaption>
</figure>
<figure>
<img class="gridzyImage" src="https://placeimg.com/640/480/any?2" alt="another random image" />
<figcaption>another caption text</figcaption>
</figure>
<figure>
<img class="gridzyImage" src="https://placeimg.com/640/480/any?3" alt="yet another random image" />
<figcaption>yet another caption text</figcaption>
</figure>
<figure>
<img class="gridzyImage" src="https://placeimg.com/640/480/any?4" alt="a random image again" />
<figcaption>a caption text again</figcaption>
</figure>
<figure>
<img class="gridzyImage" src="https://placeimg.com/640/480/any?5" alt="one last random image" />
<figcaption>one last caption text</figcaption>
</figure>
</div>
For caption appearance, see Gridzy.js 2 – Captions & Skins.