GSwap - Create a gallery of images with ease.

Last update: May 16, 2022

GSwap 🌠

Create a gallery of images with ease.

img

Working:

Typescript ready Javascript Ready

To get started, in your project folder, run:

npm i @dpouris/gswap

Usage 🔨

First, import the library and create a new gswap instance:

Todo animationDuration: "300", navigation: true, // repeat: true, -> Todo imgDimensions: { height: 300, width: 300 }, } });">
import GSwap from '@dpouris/gswap';

...

const galleryContainer = document.getElementById("gallery")

const gswap = new GSwap({
  containerElem: galleryContainer // or pass the id "gallery",

  images: ["./1.jpg", "./2.jpg", "./3.webp"],

  options : {
    //animation: "fade", -> Todo
    animationDuration: "300",
    navigation: true,
    // repeat: true, -> Todo
    imgDimensions: { height: 300, width: 300 },
  }
});

This will create a new instance of gswap and will place the gallery absolutely inside the container you specified.

  • containerElem (required):
    • The container (div) element where the gallery will be placed absolutely or a string value representing the id of an existing div in the document. If none is found the div will be created and be appended at the end of the body.
  • images (required):
    • An array of image paths or urls.
  • options (optional):
    • An object of options.
    • See the options section for more details.

Options ⚙️

animation (fade | slide | none) -> [wip]

Takes in an animation eg. fade or slide and applies it to the switching motion of the images.
  • fade: Fades the images in and out.

  • slide: Slides the images in and out.

  • none: Does not apply any animation.

  • Default: fade


animationDuration (number)

Takes in the duration of the animation that occurs upon switching the images and the speed at which the images move, in milliseconds. # 1000 = 1 second.
  • Default: 300

navigation (boolean | forwardOnly | backOnly)

If true, the navigation arrows will be displayed. # true | false | "forwardOnly" | "backOnly"
  • forwardOnly: Only the forward arrow will be displayed.

  • backOnly: Only the back arrow will be displayed.

  • Default: true


repeat (boolean)

If true, the gallery will loop infinitely. # true || false
  • Default: true

direction (top | bottom | left | right)

The direction of the gallery. # top || bottom

styled (boolean)

If true the images will have a nice box shadow and slightly rounded corners. # true || false

imgDimensions (object : {height : number, width: number})

Takes in an object that contains the keys of width and height that will be applied as the dimensions of the images. # { height: 300, width: 300 }

Default: { height: 300, width: 300 }

Methods 🧑‍💻


gswap.next()

Displays the next image in the gallery. You can call the next() method by calling it from the gallery instance like so.

const gallery = new GSwap(...);

...

gallery.next();

OR

You can bind the next() method to an onclick event like so.

const gallery = new GSwap(...);
const nextBtn = document.getElementById('nextGalleryBtn')

nextBtn.onclick = gallery.next;

The same concept applies for the .prev() method the only difference being the it moves backwards through the images.

gswap.goTo(index) -> wip

Takes in an index and displays the image at that index.

[wip]

gswap.stackImages()

Stacks the images in the gallery in case their position was altered.

Can be called from the gallery instance like so.

const gallery = new GSwap(...);

...

gallery.stackImages();

TypeScript 🥰

You can find the types on @dpouris/gswap/dist/types:

import { GallerySwap, Options } from "@dpouris/gswap/dist/types";

GallerySwap

// GSwap
interface GallerySwap {
  containerElem: HTMLDivElement;
  images: string[];
  options: Options;
  stackImages(): void;
  stackImages: () => void;
  next: () => void;
  prev: () => void;
  goTo: (index: number) => void;
}

// Options
type Options = {
  animation?: string,
  animationDuration?: number,
  navigation?: boolean | "forwardOnly" | "backOnly",
  repeat?: boolean,
  direction?: "left" | "right" | "top" | "bottom",
  styled?: boolean,
  imgDimensions?: {
    height: number,
    width: number,
  },
};

React Example 😎

{ const gallery = useRef(); useEffect(() => { if (!document) return; const galleryOptions = { imgDimensions: { height: 500, width: 600 }, styled: true, repeat: true, }; const imageUrls = [ "...lqdieniMabM2rLBDJl6XhTwb0=", "...softw-office-140335451.jpg", "...image-164232735.jpg", ]; gallery.current = new GSwap("gallery", imageUrls, galleryOptions); }, []) return (

EVENT GALLERY

); }; export default Gallery; ">
import GSwap from "@dpouris/gswap";
import { GallerySwap } from "@dpouris/gswap/dist/types";
import { useEffect, useRef } from "react";

const Gallery = () => {
  const gallery = useRef<GallerySwap>();

  useEffect(() => {
    if (!document) return;

    const galleryOptions = {
      imgDimensions: { height: 500, width: 600 },
      styled: true,
      repeat: true,
    };

    const imageUrls = [
      "...lqdieniMabM2rLBDJl6XhTwb0=",
      "...softw-office-140335451.jpg",
      "...image-164232735.jpg",
    ];

    gallery.current = new GSwap("gallery", imageUrls, galleryOptions);

  }, [])

  return (
    <div className="flex flex-col items-center justify-center gap-3 my-4">
      <h1 className="text-3xl font-medium text-slate-700 mb-4 border-y-2 border-emerald-400 rounded-lg py-4 px-3 ">
        EVENT GALLERY
      </h1>
      <div id="gallery" className="mx-auto"></div>
      <button
        onClick={() => {
          gallery.current!.goTo(2);
        }}
      >
        GOTO 3RD IMAGE
      </button>
    </div>
  );
};

export default Gallery;

The result is the gif at the start of the README.

  • The above example is implemented in Next.js hence the checking for document in the useEffect.

Thank you for trying out my first library and I hope you enjoy it. 🫡

GitHub

https://github.com/dpouris/gswap
You might also like...

React Photo Album - a responsive photo gallery component for React

React Photo Album - a responsive photo gallery component for React

React Photo Album React Photo Album is a responsive photo gallery component for React. React Photo Album supports rows, columns, and masonry layouts.

Jun 16, 2022

React component to compare two images with a slider

React component to compare two images with a slider

React Compare Image Simple React component to compare two images using slider. NOTE: Vue.js Version is also available! Demo & Sample codes Demo & Samp

May 22, 2022

A React component for viewing large images up close 🔍

react-intense This component is a port of Intense Image Viewer for use with React. Demo. Usage Simply replace your img element with a ReactIntense

Jun 20, 2022

Render images as interactive particles

Render images as interactive particles

react-particle-image Render images as interactive particles Install npm install --save react-particle-image Links Demo (source) Docs Simple Usage code

Jun 19, 2022

React component to display imgix images

React component to display imgix images

react-imgix provides custom components for integrating imgix into React sites and generating images server-side. Overview / Resources Installation Usa

Jun 12, 2022

A component to reveal images on user interaction, written with TypeScript + React.

A component to reveal images on user interaction, written with TypeScript + React.

A component to reveal images on user interaction, written with TypeScript + React.

May 14, 2022

An app for uploading images developed in the eighth React Track challenge in Ignite

An app for uploading images developed in the eighth React Track challenge in Ignite

Front end application 💻 An app for uploading images developed in the eighth React Track challenge in Ignite delivered by Rocketseat 🚀 Technologies u

Apr 8, 2022

React library to support easy zoom, pan, pinch on various html dom elements like images and divs

react-zoom-pan-pinch Super fast and light react npm package for zooming, panning and pinching html elements in easy way Demo Docs Features 🚀 Fast and

Jun 26, 2022

The simple images uploader applied Render Props pattern that allows you to fully control UI component and behaviors.

The simple images uploader applied Render Props pattern that allows you to fully control UI component and behaviors.

react-images-uploading The simple images uploader applied Render Props pattern. (You can read more about this pattern here). This approach allows you

Jun 15, 2022
Related tags
Gallery images similar facebook
Gallery images similar facebook

Gallery images similar facebook

Feb 27, 2022
React carousel image gallery component with thumbnail support 🖼
React carousel image gallery component with thumbnail support  🖼

React Carousel Image Gallery Live Demo (try it on mobile for swipe support) linxtion.com/demo/react-image-gallery React image gallery is a React compo

Jun 21, 2022
React Photo Gallery
React Photo Gallery

React Photo Gallery Responsive, accessible, composable, and customizable image gallery component Maintains the original aspect ratio of your photos Cr

Jun 22, 2022
React for Upload Image Gallery. Drag & Drop, Sortable, Customize.
React for Upload Image Gallery. Drag & Drop, Sortable, Customize.

React Upload Gallery A simple library that lets you create an image gallery, change the order of images, select the highlighted image, and customize i

Jun 17, 2022
lightGallery - A customizable, modular, responsive, lightbox gallery plugin
lightGallery - A customizable, modular, responsive, lightbox gallery plugin

lightGallery - A customizable, modular, responsive, lightbox gallery plugin

Jun 27, 2022
React Native Image Gallery with Thumbnails
React Native Image Gallery with Thumbnails

React Native Image Gallery with Thumbnails Features Image gallery with thumbnails Made with PanResponder, no external dependencies Written in Typescri

Jun 22, 2022
Justified image gallery component for React

React Grid Gallery Justified image gallery component for React inspired by Google Photos and based upon React Images. ?? Maintainers wanted ?? As reac

Jun 17, 2022
Minimalistic image gallery for react. Responsive with all important features and smooth animations.
Minimalistic image gallery for react. Responsive with all important features and smooth animations.

imager Minimalistic image gallery for REACT. Responsive with all important features and smooth animations. DEMO Desktop Phone Slow internet connection

Jun 12, 2022
A React component to render any Ethereum address's NFTs as a gallery

React NFT Gallery ?? Playground (Storybook) React NFT Gallery is a React component to render any Ethereum address's NFTs as a gallery. The NFT assets

Jun 21, 2022
Tutorial for building an image gallery with Supabase (Postgres), Tailwind CSS, Next.js, and Vercel.
Tutorial for building an image gallery with Supabase (Postgres), Tailwind CSS, Next.js, and Vercel.

Image Gallery with Next.js, Supabase, and Tailwind CSS Learn how to create an image gallery with dynamic content from a PostgreSQL database, with supp

Jun 22, 2022