vue3-ciallo-viewer

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

Online Demo

Demo

Install

npm install vue3-ciallo-viewer --save

Component

ViewerList

<ViewerList :duration="300" :zoomSpeed="0.2" :maxScaleFactor="5">
    <img src='./assets/1.jpg' title='image' alt='' />
</ViewerList>

Parameters

• 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

Component usage

<template>
    <div>
        <ViewerList :duration="300" :zoomSpeed="0.2" :maxScaleFactor="5">
            <div v-for="(item, index) in list" :key="item.id">
                <p>
                    <span>{{ index + 1 }}</span>
                    <img :src="item.src"  alt=""/>
                </p>
            </div>
        </ViewerList>
    </div>
</template>
<script setup lang="ts">
import {ref} from 'vue'
import 'vue3-ciallo-viewer/dist/style.css'
import { ViewerList } from 'vue3-ciallo-viewer'
const list = ref<any[]>([
    {
        id: 0,
        src: 'images/1.jpg'
    },
    {
        id: 1,
        src: 'images/2.jpg'
    },
    {
        id: 2,
        src: 'images/3.jpg'
    }
])
</script>
<style>
img {
    height: 128px;
    width: 128px;
}
</style>

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: 10
    })
}
</script>