Gridzy.js 2 – Captions & Skins

If you want to add captions to your gallery, you need to define the appearance. Therefore, some predefined skins are available …

Each skin consisting of a CSS file. You need to add this file in addition to the main Gridzy files (usually in the head section):

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

Furthermore you need an advanced HTML structure:

<div class="gridzy gridzySkinClassicLight">
	<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>

If you are wondering about the HTML structure, I recommend reading Gridzy.js 2 – Semantic HTML.

For the caption you can use any tag type, just ensure it has the class gridzyCaption. The img element needs the class gridzyImage.

As you can see above, the skin name gridzySkinClassic is placed in the path of the CSS file, while in the HTML code you can see gridzySkinClassicLight instead. This is because most predefined skins have a dark and a light version, that are placed in the same file. So, if you would like to use the dark version, just replace gridzySkinClassicLight with gridzySkinClassic.

Included Skins

	Available Classes
gridzySkinBlank a good starting point for own skins live preview	`gridzySkinBlank`
gridzySkinClassic live preview	`gridzySkinClassic` `gridzySkinClassicLight`
gridzySkinFullOverlay live preview	`gridzySkinFullOverlay` `gridzySkinFullOverlayLight`
gridzySkinLift live preview	`gridzySkinLift` `gridzySkinLiftLight`
gridzySkinMagnifier zoom functionality not included live preview	`gridzySkinMagnifier` `gridzySkinMagnifierLight`

All the above skins only need a CSS file, but there are additional skins that also require a JavaScript file:

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

	Available Classes
gridzySkinBlur doesn’t work in IE live preview	`gridzySkinBlur` `gridzySkinBlurLight`
gridzySkinCard live preview	`gridzySkinCard` `gridzySkinCardLight`

All predefined skins only support simple text captions. Just add your own CSS to use more complex capture structures.

To create your very own skin, please see Gridzy.js 2 – Style Gridzy.