您好,欢迎来到有书房!

图片幻灯片插件viewer的使用方法

分类:知识大全作者:互联网王者 发布时间:2019-04-10 09:58:47阅读:1.9万+ 属地:未知

引言:图片幻灯片插件viewer是一个强大的基于jQuery的图像查看插件(支持旋转、缩放等),功能超级超级全。


viewer.js是一个强大的基于jQuery的图像查看插件(支持旋转、缩放等),功能超级超级全。

viewer.js的强大功能如下所示:

支持移动设备触摸事件

支持响应式

支持放大/缩小

支持旋转(类似微博的图片旋转)

支持水平/垂直翻转

支持图片移动

支持键盘

支持全屏幻灯片模式(可做屏保)

支持缩略图

支持标题显示

支持多种自定义事件


使用方法:

//引入css和js

<link rel="stylesheet" type="text/css" href="{{ URL::asset('assets/viewer/viewer.css') }}"/>

<script src="{{ URL::asset('assets/viewer/viewer.js') }}"></script>

<script src="{{ URL::asset('assets/viewer/jquery-viewer.js') }}"></script>


//初始化页面

<div id="lists" class="preview">

    @forelse ($list as $v)

    <p style="font-weight:bold;">{{ $v->title??'' }}</p>

      {!! $v['content']??'' !!}

      &nbsp;&nbsp;{{ $v->created_at??'' }}

    </p>

      <hr>

    @empty

    <p>无数据</p>

    @endforelse  

</div>



<script>

//删除原预览对象

function destroyViewer() {

    $(".preview").viewer("destroy");

}

//初始化预览

function initViewer() {

    $(".preview").viewer();

}

initViewer();//页面第一次初始化预览

</script>



$.ajax({

            type: 'Get',

            url: '/me/get_outline_content/{{ $outline->id??''}}',

            dataType: 'json',

            data: {

              page: page,

              keyword: $('#keyword').val()

            },

            success: function (res) {

              var arrLen = res.data.length;

              if (arrLen > 0) {

                for (var i = 0; i < arrLen; i++) {

                  result += res.data[i].content;

                }

 

                $('#lists').append(result);

                destroyViewer();//动态加载完成后销毁原对象

                setTimeout(initViewer, 1500);//重新生成预览对象,延迟是为了图片加载成功

              }

            },

            error: function (xhr, type) {

            }

});

声明:本文内容版权归原作者所有,未经授权,禁止转载!

声明:本站仅提供内容存储、展示服务,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的虚假信息,谨防诈骗。如发现有害或侵权内容,可联系本站删除!

发表评论

评论

联系
我们

平台负责人邮箱
282271588@qq.com

关注
公众号

关注官方公众号

下载
安卓版

下载安卓版

回到
顶部