Gridzy.js 2 – Basic Usage & Quick Overview

The basic usage of Gridzy.js 2 is incredible easy, although it comes with awesome new features. Here’s a quick overview …

Basic Usage

1. Upload the Gridzy files to your server and add them to your website (usually in the head section):

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

2. Add the HTML code (anywhere in the body section):

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

That’s it! That’s a fully functional example. No extra initialization is required.

Configuration

The configuration parameters you can easily add as attributes, always prefixed by data-gridzy-:

<div class="gridzy" data-gridzy-spaceBetween="20" data-gridzy-desiredHeight="400">
	<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>

This example already shows you the two most used option parameters, but there is much more. See Gridzy.js 2 – Options.

Semantic HTML

The HTML structure of Gridzy.js 2 is very flexible:

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

Each child of the container element represents one item in the grid. Both the container element and its children can be any tag type, such as ul and li (just consider to reset browser defaults). If an img element isn’t a direct child itself, it needs the class gridzyImage.

For details go to Gridzy.js 2 – Semantic HTML.

Captions & Skins

If you want to add captions, you need to add an additional CSS file (skin) for the caption appearance (usually in the head section):

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

and an extended HTML structure:

<div class="gridzy gridzySkinClassic">
	<figure>
		<img class="gridzyImage" src="https://placeimg.com/640/480/any?1" alt="a random image" />
		<figcaption class="gridzyCaption">a caption text</figcaption>
	</figure>
	<figure>
		<img class="gridzyImage" src="https://placeimg.com/640/480/any?2" alt="another random image" />
		<figcaption class="gridzyCaption">another caption text</figcaption>
	</figure>
	<figure>
		<img class="gridzyImage" src="https://placeimg.com/640/480/any?3" alt="yet another random image" />
		<figcaption class="gridzyCaption">yet another caption text</figcaption>
	</figure>
	<figure>
		<img class="gridzyImage" src="https://placeimg.com/640/480/any?4" alt="a random image again" />
		<figcaption class="gridzyCaption">a caption text again</figcaption>
	</figure>
	<figure>
		<img class="gridzyImage" src="https://placeimg.com/640/480/any?5" alt="one last random image" />
		<figcaption class="gridzyCaption">one last caption text</figcaption>
	</figure>
</div>

This above example shows you the skin gridzySkinClassic. To use an other one, just replace the marked skin name with one of these:

Style Gridzy

If no predefined skin fits your needs, you can style your own one.

The easiest way is to first copy an existing skin and adapt it to your own needs. The predefined skin gridzySkinBlank would usually provide a good foundation as well as a good documentation in the CSS file.

Things to consider and more, at Gridzy.js 2 – Style Gridzy.

Optimize Loading

If you use many images, some optimizations should be made.

To help Gridzy building the grid faster, set width and height attributes to all img elements (as values use the original width and height). To additionally load the images lazy, rename the src attributes to data-gridzylazysrc:

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

For details, see Gridzy.js 2 – Optimize Loading.

Filters

Filters in Gridzy.js 2 are pretty simple but very powerful. All you need is, a bit CSS and a few HTML form elements. Here is a functional example:

<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://placeimg.com/640/480/animals?1" alt="a random animal image" />
	<img class="architecture" src="https://placeimg.com/640/480/arch?1" alt="a random architecture image" />
	<img class="people" src="https://placeimg.com/640/480/people?1" alt="a random people image" />
	<img class="animals" src="https://placeimg.com/640/480/animals?2" alt="another random animal image" />
	<img class="architecture" src="https://placeimg.com/640/480/arch?2" alt="another random architecture image" />
	<img class="people" src="https://placeimg.com/640/480/people?2" alt="another random people image" />
	<img class="animals" src="https://placeimg.com/640/480/animals?3" alt="yet another random animal image" />
</div>

For details, check out Gridzy.js 2 – Filters.

API

Many things can be done without the proprietary API, just by manipulating the Document Object Model (DOM). Use appendChild, insertBefore and removeChild to add or remove images and setAttribute and removeAttribute to change the options. Gridzy will notice all that and adjust the grid fully automatically.

But there is also a powerful proprietary API. See Gridzy.js 2 – API.

Tips & Tricks

Gridzy.js 2 is so powerful, I can’t portray in the documentation all the things that are possible. But I’m going to publish tips and tricks from time to time. Stay in touch via Twitter or subscribe to my mailing list, where you would receive 30 more Gridzy.js skins as a welcome gift 🎁. If you tell me your name too, that would pleases me. I’m Helmut ✌
I don’t have time to send junk, so be relaxed 😏

You ❤ Gridzy.js?

Celebrate it with a tweet:
I ❤ Gridzy.js!
I ❤ Gridzy.js! – It’s so incredibly easy!
I ❤ Gridzy.js! – Its performance is awesome!
I ❤ Gridzy.js! – Can’t say what behavior I like most!
I ❤ Gridzy.js! – I’m lost for words!

Share it on Facebook!

Support

Please use the contact form here: https://codecanyon.net/item/gridzy-fully-responsive-and-customizable-gallery/9991061/support

made by @eHtmlu