A jQuery Plugin for viewing pictures like Wechat moments

Related tags

Learning resource yzhanImageViewer
Overview

yzhanImageViewer Y 站影像查看器

给网站和H5应用增加 像微信朋友圈一样 的看图功能，可看大图，双击双指缩放，滑动切换图片，点击返回。
A jQuery Plugin for viewing pictures like Wechat moments.

灵感

IMWeb 微信朋友圈项目

演示

使用

全屏 点击 图片 / 视频
切换 滑动 / 鼠标拖拽 / ←→键 / 小圆点 / 切换按钮
缩放 双指 / 双击
还原 双击 / R键
拖动 单指 / 鼠标拖拽
返回 单击 / ESC键

安装

浏览器

  1. 本插件依赖jQuery，请先引入jQuery
    ">
  2. 再引入本插件
  • CDN
    ">

    通过rgbaster.js，在点击放大图片onOpen和图片切换onChange时，更新背景色

    /**
* 使用图片的主要颜色值设置背景色
* @param {Integer} curIndex 当前图片的索引值
*/
function setBgWithDominantColor(curIndex) {
    var img = $('.yz-img-list').children().eq(curIndex).children('img')[0];
    if (img.src.indexOf('file://') === -1) {
        RGBaster.colors(img, {
            paletteSize: 1,
            success: function(payload) {
                $('.yz-img-viewer').css('backgroundColor', payload.palette[0]);
            }
        });
    }
}
$('.main').yzhanImageViewer({
    selector: 'img',
    attrSelector: 'src',
    parentSelector: 'div',
    className: 'img-viewer',
    debug: false,
    onChange: function(curIndex, preIndex) {
        setBgWithDominantColor(curIndex);
    },
    onOpen: function(curIndex) {
        setBgWithDominantColor(curIndex);
    }
});

    完整代码您可以参考我们的演示DEMO源码。

  • shopXO 图片查看器 插件

shopXO 图片查看器 插件介绍

待办事项

  • 支持视频
You might also like...

A simple class to embed a panoramic view in a website from six pictures

htmlcubemap A simple class to embed a panoramic view in a website from six pictures. It uses CSS with transforms. Demo here Usage Just call from javas

Dec 17, 2022

Blobernize your pictures with this all-new tool! Still under development, but it works for now.

Blobernize your pictures with this all-new tool! Still under development, but it works for now.

Still under development, but in a usable state image-blobernizer A very simple image-blobernizer made for the webbrowser using p5.js Live demo Require

Mar 23, 2022

Generate prime numbers from pictures!

Generate prime numbers from pictures!

Pictoprime This is a program used to generate prime numbers from pictures. Dependencies Ensure you have the following dependencies: Node.js (16+ suppo

Dec 27, 2022

A simple Node.js code to get unlimited instagram public pictures by every user without api, without credentials.

A simple Node.js code to get unlimited instagram public pictures by every user without api, without credentials.

Instagram Without APIs Instagram Scraping in August 2022, no credentials required This is a Node.js library, are you looking for the same in PHP? go t

Dec 29, 2022

NFTKastle is an NFT marketplace where users can mint their pictures as NFTs, list their NFTs for sale, and buy NFTs from other users.

NFTKastle NFTKastle is an NFT marketplace where users can mint their pictures as NFTs, list their NFTs for sale, and buy NFTs from other users. NFTKas

Oct 31, 2022

💥This is an app that recognizes text in pictures

English | 简体中文 Easy OCR App This is an app that recognizes text in pictures. The application is developed using Tauri, Vite, React, TypeScript. The ca

Dec 3, 2022

A self-hosted solution for backing up and viewing backed up mobile photos

A self-hosted solution for backing up and viewing backed up mobile photos

Photostore Photostore is a self-hosted, client-server solution for backing up, viewing and downloading photos. How it works The Photostore API (writte

Oct 25, 2022

Event scheduler is a simple app for viewing the events happening around you

Event scheduler is a simple app for viewing the events happening around you. User can also create their event and include a location. Location can also be marked as hidden(strictly by IV). Built with React and Styled Components

Mar 29, 2022

You view the Twitch channel chat and you can access the details of the users who wrote during the viewing period.

Twitch Chat Web Page You view the Twitch channel chat and you can access the details of the users who wrote during the viewing period. Getting Started

Dec 13, 2022
Comments
  • 能否提几个改进建议

    能否提几个改进建议

    repo主做这个插件辛苦了，插件也很棒，已star。

    下面想提几个改进建议，是我在使用过程中遇到的问题，反馈给您。

    1、希望加个选项，可以选择插件滑动的方向。 我用的时候发现插件的滑动方向和我平常习惯的方向相反，在查看了代码后，我自己改成： x: -getXY(e, 'x'), y: -getXY(e, 'y') 但是这样不够方便，还是希望能够通过选项控制，比如：

    $('.container').mtfpicviewer({
        reverseDragDirection: true,
});
    enhancement 
    opened by 349989153 4
  • 图片地址相同时放大图片后再翻页切换会有问题

    图片地址相同时放大图片后再翻页切换会有问题

    up你好，非常感谢您的开源，代码已经star，在使用的时候无意间发现了一个小问题，如果图片src一样的话点击任何一个图片放大，实际上展示的是最后一个图片，这时候再翻下一张的话会定位到图片组中最后一张和放大查看的图片的src一致的图片的下一张，源码没有仔细阅读，希望您如果有时间可以优化一下这个问题，蟹蟹

    bug 
    opened by ColdLighting 3
  • 图片地址相同时放大图片后再翻页切换会有问题

    图片地址相同时放大图片后再翻页切换会有问题

    up你好，非常感谢您的开源，代码已经star，在使用的时候无意间发现了一个小问题，如果图片src一样的话点击任何一个图片放大，实际上展示的是最后一个图片，这时候再翻下一张的话会定位到图片组中最后一张和放大查看的图片的src一致的图片的下一张，源码没有仔细阅读，希望您如果有时间可以优化一下这个问题，蟹蟹

    opened by ColdLighting 0
Releases(1.0.2)

  • 1.0.2(Aug 20, 2022)

    1. mtfPicViewer 更名为 yzhanImageViewer Y 站影像查看器
    2. :zap: 减少代码的体积
    3. :bug: 修复 #3 issues 3 图片地址相同的图片放大、切换和缩小冲突的问题
    4. :clapper: 事件监听回调函数，新增两个组参数 viewerElements 和 socureElements
    • onChange {函数} [切换时调用] 可选
      • 当用户切换 影像 时，调用。
      • 按先后顺序，传入两个参数
        • curIndex 切换后影像在组内的索引值，组内，按从上到下，从左往右顺序，从0开始，下同
        • preIndex 切换前影像在组内的索引值
        • viewerElements 组：查看器中的元素数组
        • socureElements 组：文档中的元素数组
    • onOpen {函数} [查看器打开时调用] 可选
      • 当 影像 被点击放大，即 查看器打开时，调用
      • 传入参数
        • curIndex 被放大影像在组内的索引值
        • viewerElements 组：查看器中的元素数组
        • socureElements 组：文档中的元素数组
    • onClose {函数} [查看器关闭时调用] 可选
      • 点击返回，即 查看器关闭时，调用
      • 传入参数
        • curIndex 关闭前正在浏览的影像在组内的索引值
        • viewerElements 组：查看器中的元素数组
        • socureElements 组：文档中的元素数组
    Source code(tar.gz)
    Source code(zip)

  • 1.0.1(Oct 12, 2020)

    新增controls参数：

    • controls {对象} 控件参数 [设置查看器功能] 可选 1.0.1版本新增
      • reverseDrag {对象} 影像移动方向 与 滑动及拖拽方向 方向，默认 与Windows设备体验相同，反向后与 苹果设备 体验相同
        • x {布尔值} false（默认） | true 水平方向是否反向
        • y {布尔值} false（默认） | true 竖直方向是否反向
      • canChange {布尔值} true（默认） | false 是否允许切换
    Source code(tar.gz)
    Source code(zip)

  • 1.0.0(Sep 15, 2020)

Owner
馒头饭
馒头饭
GitHub https://mantoufan.github.io/yzhanimageviewer/
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Memory lane is a website where you can create visual timelines of moments in time.

Memory Lane Moments in Time, All in One Place Description Memory Lane is a web app where users can create visually appealing, minimalistic timelines e

joey 3 Jun 13, 2022
A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.

WeUI - tailor-made for WeChat web service 中文版本 Introduction WeUI is an WeChat-like UI framework officially designed by the WeChat Design Team, tailor-

Tencent 26.6k Jan 2, 2023
Generate wechat / wework pay signture for NodeJs

WXSIGN Generate wechat / wework pay signture The library uses strdm ?? to generate random strings of a specified length How to installtion? # yarn

y.tianyuan 8 Nov 17, 2022
🔍 Full stack engineers archive applet for Wechat.

Full Stack Engineers Archive Contributing We welcome you to join the development of this applet. Please see contributing document. ?? Also, we welcome

Wechat applet Development Team 3 May 24, 2022
A UI library by WeChat official design team, includes the most useful widgets/modules.

WeUI for 小程序 为微信小程序量身设计 概述 WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、

Tencent 14.5k Jan 4, 2023
Sanity plugin for viewing resources which reference a particular resource.

@indent-oss/sanityio-referenced-by Plugin to see which documents reference a particular document referenced-by-sanityio.mov Video Alt Text: Demonstrat

Indent 16 Nov 2, 2022
A short project to automatically upload multiple pictures to pinata.cloud

Papel Mache Papel Mache is an app that uploads pictures to IPFS through pinata.cloud Requirements pinata/sdk: 1.1.14 node: 14.17.6 Node Node installat

Cardano Valley 7 Aug 18, 2022