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.


Available Skins


Available Classes
gridzySkinBlank
a good starting point for own skins
gridzySkinBlank
gridzySkinClassicgridzySkinClassic
gridzySkinClassicLight
gridzySkinFullOverlaygridzySkinFullOverlay
gridzySkinFullOverlayLight
gridzySkinLiftgridzySkinLift
gridzySkinLiftLight
gridzySkinMagnifier
zoom functionality not included
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
gridzySkinBlur
gridzySkinBlurLight
gridzySkinCardgridzySkinCard
gridzySkinCardLight

All predefined skins only support simple text captions. Just add your own CSS to use more complex capture structures. To see live examples of all predefined skins, go to Gridzy.js 2 – Skins.

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