vanilla js

This is a responsive gallery that opens in a lightbox and that will navigate between all pictures and HTML content that share the same category tag. It has no dependencies. The images don't need to be in the same container or next to each other, just make sure that they have the "zoom" and "category" tag set and that's it. When the window's height it too slim, it will display a scrollbar next to the image. Info that says "loading... click to close" will be displayed for images that take long to load or won't load at all. IE9 support

More Information and more examples can be found on the GitHub Page

Live Demo

click on one of the pictures below
Aurora Borealis
Stars under night sky

Consequatur

explicabo accusamus quam reprehenderit. Deserunt dignissimos accusamus deleniti sequi exercitationem culpa veritatis ab. Explicabo voluptatem et nihil labore non expedita esse. Eaque aut totam dolor saepe esse qui sit. Et quis qui amet et quo quia tempore.

Est et non in cumque. Aut distinctio sint sapiente aut nihil. Iste assumenda est occaecati.

Rerum Aperiam

aut et accusamus vitae id est. Et iusto accusantium et commodi molestiae illo. Dolores natus culpa sapiente et eos cupiditate necessitatibus omnis. Nam vel ipsum placeat. Molestiae repellendus alias molestiae aut assumenda.

Maiores sint at placeat dolores asperiores qui ut minus. Magnam possimus quis voluptas blanditiis iste nemo. Delectus odit repellendus odio. Dolor eum iure rerum sapiente.

Fuga ratione nisi eum omnis cupiditate. Autem accusamus assumenda possimus odio accusamus. Hic suscipit et tempora dolor qui sed qui qui. Nostrum itaque doloremque culpa quidem vel dolorum. Consequatur omnis consequatur odio qui voluptate iure optio esse.

Download/GitHub

https://github.com/sezanzeb/Hippo, where you can also find more examples

Usage

<link rel="stylesheet" href="hippo-gallery.css" type="text/css">
<script src="hippo-gallery.js"></script>
<img category="category" zoom="pic1.jpg" src="preview1.jpeg" caption="caption1"/>
<img category="category" zoom="pic2.jpg" src="preview2.jpeg" caption="caption2"/>
<span caption="caption3" zoom="pic3.jpg">click here</span>