vue3-ciallo-viewer

An exquisite vue3 image preview component. Mobile devices support zooming in and out ✔

Install

npm install vue3-ciallo-viewer --save

API

CialloViewer

Parameter List (Deprecated):

CialloViewer(
    array: HTMLCollection,
    targetIndex?: number | null,
    duration: number,
    zoomSpeed: number,
    maxScaleFactor: number)

Configuration Object:

CialloViewer({
    array: HTMLCollection,
    targetIndex: number | null,
    duration: number,
    zoomSpeed: number,
    maxScaleFactor: number
})

Parameters

• array : HTMLCollection The collection of images to display.
• targetIndex : number | null (optional) The index of the image to highlight, defaults to 0.
• duration : number (optional) The duration of the image transition, in milliseconds. Defaults to 400.
• zoomSpeed : number (optional) Controls the speed of zoom interactions. Defaults to 0.2 if not specified.
• maxScaleFactor : number (optional) Sets the maximum scale factor for zooming. Defaults to 5

API Basic usage

<template>
    <div>
        <div ref="images">
            <img class="image_class" v-for="(item, index) in list" :key="item.id" @click="handleClick(index)" :src="item.src"  alt=""/>
        </div>
    </div>
</template>
<script setup lang="ts">
import {CialloViewer} from "vue3-ciallo-viewer"
import 'vue3-ciallo-viewer/dist/style.css'
import {ref} from 'vue'
const list = ref<any[]>([
    {
        id: 0,
        src: './src/assets/images/1.jpg'
    },
    {
        id: 1,
        src: './src/assets/images/2.jpg'
    },
    {
        id: 2,
        src: './src/assets/images/3.jpg'
    }
])
const images = ref<HTMLElement>()
const handleClick = (index: number): void => {
    if(!images.value) return
    // Deprecated
    CialloViewer(images.value.getElementsByTagName('img'), index, 400, 0.2, 5)
    // or
    CialloViewer({
        array: images.value.getElementsByTagName('img'),
        targetIndex: index,
        duration: 400,
        zoomSpeed: 0.2,
        maxScaleFactor: 20
    })
}
</script>