[ vue ] 이미지 클릭시 확대 및 회전등 다양한 처리 (lightbox)

블로그나 웹사이트에는 사진을 클릭하게 되면, 해당 사진이 확대되고 회전시킬 수 있다는 등 다양한 조작이 가능한 경우를 볼 수 있습니다.

js에 다양한 사진 확대 라이브러리가 존재하는데, 그 중에서 lightbox을 설치 및 적용해보겠습니다.

 

위의 이미지 처럼, 이미지를 클릭하게 되면 확대된 이미지와 그 밑에는 툴바가 있어서 다양한 조작을 할 수 있습니다. 

---

npm 설치

npm i vue-easy-lightbox

 

main.js 설정

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueEasyLightbox from 'vue-easy-lightbox'

createApp(App).use(store).use(router).use(VueEasyLightbox).mount('#app')

vue에서 store나 router를 사용할 때처럼, lightbox도 마찬가지로 설정을 해줍니다. 

 

<template>
    <div>
        <img :src="image" @click="showImage">
    </div>
    
    <vue-easy-lightbox
        :visible="visibleRef"
        :imgs="imgsRef"
        :index="indexRef"
        @hide="onHide"
    ></vue-easy-lightbox>
</template>


<script>

export default {
    data () {
        return {
            image: '이미지 URL',
            visibleRef: false,
            imgsRef: '',
            indexRef: 0,
        }
    },
    methods: {
        showImage()
        {
            this.imgsRef    = this.image;
            this.visibleRef = true;
        },
        onHide()
        {
            this.visibleRef = false;
        },
    }
}
</script>

lightbox를 사용하기 위해서, 여러가지 옵션값이 있습니다. 

imgs는 이미지의 주소 데이터

index는 이미지 리스트의 인덱스 

visible은 lightbox를 보이게할지 숨길지 (true / false)

hide는 lightbox의 배경을 클릭하거나 esc를 눌렀을 때, 실행시킬 콜백함수 

 

이미지 태그를 클릭하면 showImage 함수가 실행이되어, imgsRef 속성에 image의 주소를 넣고, visibleRef의 값을 true로 변경합니다. 

visibleRef가 true가 되면서, lightbox가 보여지게 됩니다. 

 

lightbox의 배경을 클릭하거나, esc를 누르게되면 onHide() 함수가 실행되어 visibleRef를 false로 변경하기 때문에 lightbox는 숨겨지게 됩니다. 

---

여러 이미지의 lightbox

images: ['이미지 URL', '이미지 URL', '이미지 URL'];

여러개의 이미지를 보여주고 싶은 경우에는 여러개의 이미지를 배열에 넣어주면 됩니다. 

 

그러면, lightbox에 좌우에 "<", ">"아이콘이 보이게 되고 클릭하면 여러개의 이미지를 슬라이드로 볼 수 있습니다. 

또한 키보드의 좌우키를 이용해서도 볼 수 있습니다. 

 

---

그 외에도 다양한 옵션 및 다양한 상황에서 사용하고 싶은 경우에는 참고 URL을 보고, 알맞은 방법을 사용하시면 됩니다!

https://www.npmjs.com/package/vue-easy-lightbox

vue-easy-lightbox