[前端] 圖片顯示: Viewer.js

日期：
Viewer.js
https://github.com/fengyuanchen/viewerjs

Viewer.js demo
https://fengyuanchen.github.io/viewerjs/

以下為vue版

v-viewer
https://github.com/mirari/v-viewer

v-viewer demo
https://mirari.cc/v-viewer/


以下為單html檔測試範例︰
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title>ViewerJS Vue Demo</title>

    <!--使用vue-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>

    <!--使用viewerjs-->
    <link href="//unpkg.com/viewerjs/dist/viewer.min.css" rel="stylesheet">
    <script src="//unpkg.com/viewerjs/dist/viewer.min.js"></script>
    <script src="//unpkg.com/v-viewer/dist/v-viewer.min.js"></script>

</head>
<body>

    <viewer id="app" :options="options">
        <template v-for="image in images">
            <img 
                style="margin:5px;"
                :src="image" 
                :key="image"
            >
        </template>
    </viewer>

    <script type="text/javascript">

        //使用Vue.use加載VueViewer
        Vue.use(VueViewer.default)

        new Vue({
            el: '#app',
            data: {
                images: [
                    'https://picsum.photos/301/300',
                    'https://picsum.photos/302/300',
                    'https://picsum.photos/303/300',
                    'https://picsum.photos/304/300',
                ],
                options: {
                    button: false,
                    navbar: false,
                    title: false,
                    toolbar: {
                        zoomIn: 4,
                        zoomOut: 4,
                        oneToOne: 4,
                        reset: 4,
                        prev: 0, //關閉往前
                        play: 0, //關閉播放
                        next: 0, //關閉往後
                        rotateLeft: 4,
                        rotateRight: 4,
                        flipHorizontal: 4,
                        flipVertical: 4,
                    },
                    tooltip: false,
                    movable: true,
                    zoomable: true,
                    rotatable: true,
                    scalable: true,
                    transition: true,
                    fullscreen: false,
                    keyboard: false,
                    url: 'data-source',
                }
            },
        });


    </script>

</body>
</html>


載入後畫面為︰



#Javascript, viewerjs, vue, 圖片, 顯示

留言

張貼留言