🌀 A JS plugin to view images just like in Windows.

Overview

PhotoViewer

Travis npm license Gitter Financial Contributors on Open Collective

PhotoViewer is a JS plugin to view images just like in windows. [Examples]

If you want to support IE8, please goto Magnify.

Features

  • Vanilla JS
  • Modal draggable
  • Modal resizable
  • Modal maximizable
  • Image movable
  • Image zoomable
  • Image rotatable
  • Keyboard control
  • Fullscreen showing
  • Multiple instances
  • Browser support IE9+
  • RTL support

Installation

You can install the plugin via npm

$ npm install photoviewer --save

Quick Start

Step 1: Include files

@import 'photoviewer/dist/photoviewer.css';
import PhotoViewer from 'photoviewer';

or

<!-- Core CSS file -->
<link href="/path/to/photoviewer.css" rel="stylesheet">

<!-- Core JS file -->
<script src="/path/to/photoviewer.js"></script>

Step 2: Initializing

The usage of photoviewer is very simple, the PhotoViewer's constructor has 2 arguments.

  1. Array with objects of image info.
  2. Options
// build images array
var items = [
    {
        src: 'path/to/image1.jpg', // path to image
        title: 'Image Caption 1' // If you skip it, there will display the original image name(image1)
    },
    {
        src: 'path/to/image2.jpg',
        title: 'Image Caption 2'
    }
];

// define options (if needed)
var options = {
    // optionName: 'option value'
    // for example:
    index: 0 // this option means you will start at first image
};

// Initialize the plugin
var photoviewer = new PhotoViewer(items, options);

Step 3: Binding Event

At last, binding click event on a button element at initializing.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

License

MIT License

Comments
  • Multiple Instances

    Multiple Instances

    Please could you tell me how to add multiple instances of photoviewer? I can get it to work by duplicating the initialize script and changing the data-gallery name: $('[data-gallery=photoviewer]') $('[data-gallery=photoviewer2]') However the site I am building will have hundreds of galleries that will be dynamically created so this is not an option. Is there a way to restart the script if the links are within a parent div? Any help will be greatly appreciated as I would love to use your amazing lightbox. Many thanks John

    help wanted 
    opened by Johnjax72 5
  • Cannot use PhotoViewer with jquery datatable

    Cannot use PhotoViewer with jquery datatable

    Description

    I use PhotoViewer together with jquery datatable with the expectation that the image in the datatable can be zoomed with PhotoViewer

    Issue

    With expectations as in the description I encountered the following problems:

    Uncaught TypeError: Cannot read property 'src' of undefined
        at PhotoViewer.init (photoviewer.js:1917)
        at new PhotoViewer (photoviewer.js:1906)
        at HTMLAnchorElement.<anonymous> (<anonymous>:15:13)
        at HTMLAnchorElement.dispatch (jquery.3.2.1.min.js:3)
        at HTMLAnchorElement.q.handle (jquery.3.2.1.min.js:3)
    

    Here are some screenshots : image

    but somehow it's work for some image image

    And this is the error one image

    help wanted 
    opened by barokurniawan 3
  • 请问为什么拖动禁止不了啊

    请问为什么拖动禁止不了啊

    options = {
        index: $(this).index()-1,
        draggble:false,  
        resizable:false,
        movable:false,
        title:false,
        footToolbar:['zoomIn','zoomOut','prev','next','rotateRight'],
    };
    

    禁止不了拖动

    help wanted 
    opened by wzlzking 3
  • With pagination, Photoviewer is getting initialized multiple times, hence opens multiple instance of photoviewer.

    With pagination, Photoviewer is getting initialized multiple times, hence opens multiple instance of photoviewer.

    I am binding images with pagination on demand call. Hence, after each page change I need to initialize photoviewer with new set of items. It looks like, after loading items on different page and initializing photoviewer, new instance of photoviewer gets initialized as well as previous instance also exists. This opens multiple instance of same image in photoviewer on clicking once on image.

    I think, on initializing again, there should be an option to destroy old instance or there should be a way to update items in existing instance.

    Capture

    wontfix 
    opened by sanjeevkrready 2
  • When the viewer window is activated, the scroll bar of the background is frozen.

    When the viewer window is activated, the scroll bar of the background is frozen.

    Great work.

    One minor comment: as the title suggests, when the viewer window is activated, the scroll bar of the background should still supposed to work if the wheel event is not happened within region of the activated window.

    enhancement 
    opened by liqinan158 2
  • replace `data-src` but can not show the photo

    replace `data-src` but can not show the photo

    Hi nzbin,

    Thanks for sharing.

    I have meet a problem in steps2.

    Way 2: Initializing as jQuery plugin

    1.Using DOM structure is OK.

    1. I want use this way:

    <img data-gallery="jquery" data-src="big-1.jpg" src="small-1.jpg">

    I have replace data-src and src with same jpeg, but I can see picture, click photo can not see it. Can you help me fix it?

    Pls help check attached photo for details.

    Thanks.

    image

    help wanted 
    opened by leo493852107 2
  • Any ways to add icons to custom buttons?

    Any ways to add icons to custom buttons?

    Tried adding the keys of the custom buttons to icons but nothing happened.

    var viewer = new PhotoViewer(items, {
      index: 0,
      footerToolbar: ['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight','openInNew'],
      customButtons: {
        openInNew: {
          text: "新标签打开",
          title: "新标签打开",
          click: function (context, e) {
            window.open(context.img.src);
          }
        }
      },
      icons: {
    	"openInNew": "<svg t=\"1614215430739\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4559\" width=\"16\" height=\"16\"><path d=\"M810.666667 810.666667H213.333333V213.333333h298.666667V128H213.333333a85.333333 85.333333 0 0 0-85.333333 85.333333v597.333334a85.333333 85.333333 0 0 0 85.333333 85.333333h597.333334c46.933333 0 85.333333-38.4 85.333333-85.333333v-298.666667h-85.333333v298.666667zM597.333333 128v85.333333h153.173334l-419.413334 419.413334 60.16 60.16L810.666667 273.493333V426.666667h85.333333V128h-298.666667z\" p-id=\"4560\"></path></svg>"
    }});
    

    yjuiXq.png

    help wanted 
    opened by No5972 1
  • Modal should be center w.r.t. the element in which its appended in, not w.r.t window

    Modal should be center w.r.t. the element in which its appended in, not w.r.t window

    First of all, awesome code and awesome library! Thank you for this! But I think I found a bug.

    Pls see screenshot below. There is a problem with this code. Modal should be centered inside the element in which it is appeded. Not inside the window.

    image

    enhancement 
    opened by goodmite 1
  • Problem on last image

    Problem on last image

    When i open the last image, arrows (left and right) do not work and give an error on the following code:

           this.loadImg(this.groupData[index].src, function () {
              _this3._triggerHook('changed', index);
            }, function () {
              _this3._triggerHook('changed', index);
            });
    

    Browser gives Uncaught TypeError: Cannot read property 'src' of undefined

    I am using the "button way" as shown in your example and use something like:

    $(document).on('click','.res img',function(){
     let a =  $(this).attr('index');
      new PhotoViewer(items, {index: a});
    });
    
    

    By the way it works fine with the newest jQuery version 3.4.0,

    help wanted 
    opened by csandreas1 1
  • [Behavior] Image not centered while maximized or zoomed in.

    [Behavior] Image not centered while maximized or zoomed in.

    Hi, thanks @nzbin for this great plugin.

    I have submitted this issue for [Behavior] only.

    Clicking on image and popup display is correct, but when zoomed out OR maximized, image is fixed floated to right edge, not centered. (Works correctly outside of <body> ) please help me out, or suggest override styling.

    Thank you.

    question 
    opened by PremiumHelp 1
  • build(deps): bump minimist from 1.2.5 to 1.2.6

    build(deps): bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Feature Request : Add Link to the Image in Photo viewer

    Feature Request : Add Link to the Image in Photo viewer

    It will be a good add-on feature to provide option to add a link to the image in the photoviewer template for each image. similar to

    src: src, title: title, link: link

    question discussion 
    opened by anand-sharma 1
Releases(v3.6.5)
Owner
Zongbin
FE Developer, UX Designer
Zongbin
Easiest 1-click way to install and use Stable Diffusion on your own computer. Provides a browser UI for generating images from text prompts and images. Just enter your text prompt, and see the generated image.

Stable Diffusion UI Easiest way to install and use Stable Diffusion on your own computer. No dependencies or technical knowledge required. 1-click ins

null 3.5k Dec 30, 2022
This is an unofficial front end for Hacker News, reminiscent of the Windows XP era Outlook email client on a Windows XP default desktop

Hacker XP Hacker News styled as the Windows XP Outlook email client. Try out Hacker XP here! Description This is an unofficial front end for Hacker Ne

null 19 Jul 12, 2022
A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view.

Strapi Preview Button A plugin for Strapi CMS that adds a preview button and live view button to the content manager edit view. Get Started Features I

Matt Milburn 53 Dec 30, 2022
StarkNet support extension for VSCode. Visualize StarkNet contracts: view storage variables, external and view functions, and events.

StarkNet Explorer extension This VSCode extension quickly shows relevant aspects of StarkNet contracts: Storage variables of the current contract, and

Crytic 6 Nov 4, 2022
Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries.

Image Zoom (jQuery) Plugin Simple jQuery plugin that will allow users to zoom in your images, perfect for product images and galleries that is less th

Mario Duarte 8 Aug 3, 2022
A simple library to view large images up close using simple mouse interaction, and the full screen.

Intense Images A stand alone javascript library for viewing images on the full, full screen. Using the touch/mouse position for panning. Here's a demo

Tim Holman 2.6k Dec 31, 2022
A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebWorker like neither of those.

Amuchina A work-in-progress HTML sanitizer that strives for: performance like window.Sanitizer, readiness like DOMPurify, and ability to run in a WebW

Fabio Spampinato 9 Sep 17, 2022
Compare James Webb Space Telescope images to older images.

How much more powerful is the James Webb Space Telescope when compared to Hubble? Find out! More info Want to help out? CONTRIBUTING.md Blog post with

John Christensen 399 Jan 3, 2023
MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginative images, and is available on Discord and through a web interface here.

Midjourney MidJourney is an AI text-to-image service that generates images based on textual prompts. It is often used to create artistic or imaginativ

Andrew Tsegaye 8 May 1, 2023
FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel

FortuneSheet FortuneSheet is an online spreedsheet component library that provides out-of-the-box features just like Excel English | 简体中文 Purpose The

Suzhou Ruilisi Technology Co., Ltd 1.6k Jan 3, 2023
Allow moving/copying/and creation embeds for blocks with drag-n-drop just like Logseq or Roam

Demo Features Drag-n-drop for list items in the same pane and between different panes 3 modes: move block, copy block, embed block Automatic reference

null 92 Dec 26, 2022
Agetos is a web-platform messaging service founded in 2022. It has no purpose. Just like the other applications.

Start with a simple idea ?? Turn it into an awesome app ?? About Agetos is a web-platform messaging service founded in 2022. It has no purpose. Just l

flash 4 Aug 4, 2022
Multiple level dropdown works with Bootstrap 5, just like native support.

Bootstrap 5 Multiple Level Dropdown. For Bootstrap 4, please visit Bootstrap 4 Multiple Level Dropdown Using official HTML without adding extra CSS st

Dallas Lu 17 Dec 13, 2022
Customizable masonry Flatlist. it just behave like Flatlist but using ScrollView behind the scene

Would you like to support me? react-native-masonry-grid Customizable masonry Flatlist. it just behave like Flatlist but using ScrollView behind the sc

Numan 5 Sep 7, 2022
A powerful and simple JavaScript library provides a history for undo/redo functionality. Just like a time machine! 🕐

UndoRedo.js A powerful and simple Javascript library provides a history for undo/redo functionality. Just like a time machine! ?? Installation: Node.j

${Mr.DJA} 26 Dec 14, 2022
A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that uses markdown-it.

markdown-it-eleventy-img A markdown-it plugin that process images through the eleventy-img plugin. Can be used in any projects that use markdown-it. F

null 25 Dec 20, 2022
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading

Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb

Martin Wendt 2.6k Jan 9, 2023
A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view.

jQuery AniView A jQuery plugin that works in harmony with animate.css in order to enable animations only when content comes into view. Now supports v4

Jonathan James Cosgrove 216 Sep 10, 2022