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.
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.
Why yet another image gallery?
Well, as I started building my own website I decided to stay lean and so I went for Alpine JS to have a reduced version of my favorite front-end framework Vue JS.
There are so many different image galleries on the market so my first thought was, I should not invent the wheel again. So I searched for an image gallery which works fine with CSS grid or flexbox, defines the image size dynamically so you can build perfect responsive layouts and last but not least has lazy loading. I wanted to have a vanilla JS gallery - no jquery - and it should be easy to design with Tailwind CSS. After some research I found awesome galleries with amazing animations, tons of features but no gallery I was comfortable with.
Because I love ux-design and animations I had a clear idea of the functionality of the gallery on my “WORK” page, so I ended up developing my own content gallery. I started lean and stayed lean so I was able to keep the file size for CSS and JS at 6.2 kByte. Building my own gave me the freedom to use Tailwind CSS inside the gallery and for the necessary CSS definitions I decided to go for BEM methodology to keep the class names easy understandable and reusable.
BEM (Block Element Modifier) helps you to create reusable components in front-end development.
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>Features
Responsive and mobile first image and content galley based on Alpine JS and uses Tailwind CSS for layout.
- Lazy loading
- responsive and mobile first
- Predefined image sizes
- Dynamic image sizes by width, height or size
- Fixed image sizes
- Customizable animations - CSS animations
- Customizable class names
- works great with CSS grid and flexbox
- Small file sizes JS + CSS = 6.2 kByte
- Based on Alpine JS and Tailwind CSS
- CSS BEM methodology
