loading...

Updated: May 2020

TA-Gallery - responsive and mobile first image and content gallery

An image and content gallery which is 100% customizable and has endless CSS animation options. TA-Gallery is based on Alpine JS and uses Tailwind CSS + BEM methodology.

Markus A. Wolf

Author: Markus A. Wolf Updated: May 2020
Taipei / Taiwan – UX Designer and product owner - worked in Germany, California / Silicon Valley and now Taiwan for international clients.

BEM (Block Element Modifier) helps you to create reusable components in front-end development.

Asian women backpacker looking-at ta-gallery

WOW - TA-Gallery is so cool 😂

If you use Tailwind CSS and Alpine JS in your project you might take a look at TA-Gallery maybe you like it and it is the right gallery for you to reuse, because it works great with CSS grid and flexbox.

You can find the TA-Gallery on Github and if you want to see the gallery in action you can find some examples on the demo page. The TA-Gallery is published under the MIT licence so you can use it wherever and however you want. A real world impression you can have on my WORK page for which I developed the TA-Gallery.

Basic structure of TA-Gallery

This is the basic structure of the gallery. Alpine JS is used to define (x-data) and init (x-init) it. Use the gallery script form the /dist/js/gallery.js file in every project you want to. If you want to show the first image just don’t add the gallery__item—hidden class to it.

<div class="gallery flex-grow relative mx-auto " x-data="gallery()" x-init="init()">
  <div class="gallery__item" x-ref="size"></div>
  <div class="gallery__item gallery__item--hidden"></div>
  <div class="gallery__item gallery__item--hidden"></div>
  <div class="gallery__item gallery__item--hidden"></div>
  <a class="gallery__nav gallery__nav--right" x-on:click="next()"></a>
  <a class="gallery__nav gallery__nav--left" x-on:click="previous()"></a>
</div>