Logo TA Gallery

A light-weight (6.2kB), responsive and mobile first image and text gallery based on Tailwind CSS and Alpine JS.

Swipe Swing Slide Rotate Scroll Snake Window

(Choose your favorite animation style and see how the gallery animates.)

100% customizable and endless animation options. If you already use Tailwind CSS and Alpine JS in your project you might consider using this image gallery.

Use TA-Gallery as a part of your Tailwind CSS and Alpine JS project. You can use it as a stand alone version but it works best together with your own scripts and enhancements. The gallery is designed to fit in every project, in every grid and in every flexbox based on these two frameworks so please try it out and if you have some feedback.

Github Download Author Feedback

How to use TA-Galley

The fastest way to start is using Tailwind CSS and Alpine JS from a CDN and put it in your head section of your html source code. Please be sure you use the "defer" attribute in your script tag...

  
    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="/dist/css/gallery.css" rel="stylesheet">
<link href="/dist/css/gallery-keyframes-swing.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>  

... and add the gallery script source to the bottom of your body tag. You can download TA-Gallery on Github and use the files from the /dist folder. To change the animations use a different CSS file e.g. “gallery-keyframes-slide.css”.

  
    <script src="/dist/js/gallery.js"></script>  

TA-Gallery is designed to be as light as possible so it uses CSS only for the mandatory definitions. Any design options are done with Tailwind CSS so you can adopt it very easily to your needs. Because TA-Gallery is reduced to the max you can use the code together with your own Alpine JS scripts. I recommend using Tailwind JS and Alpine JS together with PostCSS, Webpack or Gulp so you can get the most out of these amazing Frameworks.

  
    .gallery{}
.gallery__image{}
.gallery__item{}
.gallery__item--hidden{}
.gallery__background{}
.gallery__background--image{}  

Used CSS classes - These CSS classes are used to make the gallery working and all the other classes are based on Tailwind CSS to design the gallery. So you see, TA-Gallery is easy to use and thanks to Tailwind CSS extremely flexible.

  
    default: {
      item: 'gallery__item',
      hidden: 'gallery__item--hidden',
      left_in: 'gallery__anim-left-in',
      left_out: 'gallery__anim-left-out',
      right_in: 'gallery__anim-right-in',
      right_out: 'gallery__anim-right-out',
    },  
  
    <div class="gallery flex-grow relative mx-auto bg-gray-200 sm:rounded-lg shadow-xl" x-data="gallery()" x-init="init({item: 'your__gallery__class', hidden: 'your__gallery__class__hidden'})">  

Change the default class names - You can change the class names by calling the init() function with an object that contains the new names.

  
    <style>
  .gallery {
    --gallery_width: 100%;
    --gallery_height: 100%;
  }
</style>  

Predefine the size of the gallery - Either in the head section or direct at the div tags you can predefine the size of the gallery by setting these two CSS custom properties.

  
    <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>  

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.

Links to used sources

Alpine JS is a very easy to use and extremely light-weight JS Framework. You can say it is an "reduced" Vue JS so if you love Vue JS than this might be the right choice if you don't need the whole functionality for smaller functionalities.

Tailwind CSS is a highly customizable, low-level CSS framework and it delivers in combination with PostCSS and Purge extremely small CSS files.

Picsum Photos is an awesome "Lorem Pixum" service and quite fast.

Logo TA StyledPLUGINS

TA StyledPLUGINS stands for light-weight, responsive and mobile first. All plugins are based on Tailwind CSS and Alpine JS. All are 100% customizable with endless animation options.

TA-Pagination - A content pagination solution.

TA-Gallery - An image gallery with endless animation options.

TA-YouTube - A YouTube video wrapper with auto playback, aspect ratio and privacy settings.

Copyright © 2019-2020 Markus A. Wolf - www.markusantonwolf.com

IMPRINT | PRIVACY

TA-Gallery is licensed under the MIT license, see LICENSE for details.