Image Gallery Directive

The v-image-gallery directive is used to display a collection of images in a gallery-like format. You can use it with v-image-view directive to display a full-screen image viewer.

Usage

View Code

<script setup>
import { ref } from "vue";
const images = ref([
  "https://images.pexels.com/photos/2334005/pexels-photo-2334005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/4895059/pexels-photo-4895059.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/4952563/pexels-photo-4952563.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
]);
const images2 = ref([
  "https://images.pexels.com/photos/15073537/pexels-photo-15073537/free-photo-of-redhead-woman-near-white-horse-in-nature.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/15073540/pexels-photo-15073540/free-photo-of-redhead-woman-sitting-on-white-horse-in-nature.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/2334005/pexels-photo-2334005.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/4895059/pexels-photo-4895059.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/4952563/pexels-photo-4952563.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/4952561/pexels-photo-4952561.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
  "https://images.pexels.com/photos/4527203/pexels-photo-4527203.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2",
]);
</script>

<template>
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 py-5">
    <div v-image-gallery="images" v-image-view="images"></div>
    <div v-image-gallery="images2" v-image-view="images2"></div>
  </div>
</template>

Arguments

The v-image-gallery directive does not accept any arguments.

Modifiers

The v-image-gallery directive does not accept any modifiers.

Source Code

export const vImageGallery = {
  mounted(el, binding) {
    const images = binding.value;
    const showItems = binding.arg || 4;
    const displayImages = images.slice(0, showItems);

    const mainElements = displayImages.map((item, index) => {
      const mainElement = document.createElement("main");

      mainElement.classList.add("v-image-gallery-mainElement");

      if (index === 3 && images.length > 3) {
        mainElement.classList.add("relative");
      } else if (index === showItems - 1 && images.length > showItems) {
        mainElement.classList.add("relative");
      } else if (images.length === 1) {
        mainElement.classList.add("col-span-2");
      } else {
        mainElement.classList.add("col-span-1");
      }

      if (images.length === 3 && index === 2) {
        mainElement.classList.remove("col-span-1");
        mainElement.classList.add("col-span-2");
      }

      const imgElement = document.createElement("img");
      imgElement.src = item;
      imgElement.alt = "";
      imgElement.classList.add("v-image-gallery-element");

      if (images.length === 3 && index === 2) {
        imgElement.classList.add("col-span-2");
      }

      if (index >= showItems) {
        imgElement.classList.add("v-image-gallery-blur");
      }

      imgElement.style.display = index < showItems ? "block" : "none";

      imgElement.addEventListener("click", () => {
        if (index === showItems - 1 && images.length > showItems) {
          this.OpenPreview();
        }
      });

      const divElement = document.createElement("div");
      divElement.className = "black-overlay";
      divElement.style.display =
        index === showItems - 1 && images.length > showItems ? "flex" : "none";

      const spanElement = document.createElement("span");
      spanElement.className = "v-image-gallery-spanElement";
      spanElement.textContent = `+${images.length - showItems}`;

      divElement.appendChild(spanElement);

      mainElement.appendChild(imgElement);
      mainElement.appendChild(divElement);

      return mainElement.outerHTML;
    });

    const html = `
          <div class="v-image-gallery-mainJoin">
            ${mainElements.join("")}
          </div>
        `;

    el.innerHTML = html;
  },
};