nzbin / magnify Goto Github PK

🖼 A jQuery plugin to view images just like in Windows. Browser support IE7+!

Home Page: https://nzbin.github.io/magnify/

License: MIT License

JavaScript 92.84% SCSS 7.16%

magnify lightbox responsive jquery modal draggable resizable zoomable image-gallery photoviewer

magnify's Introduction

⚠️ Attention! This repository will be maintained just in small iteration. The plugin is easy to use, but its customization can be troublesome. To improve plugin's flexibility, I made another repository PhotoViewer which is the enhanced version of Magnify.

Magnify

Magnify is a jQuery plugin to view images just like in windows.

[ website ]

Features

Modal draggable
Modal resizable
Modal maximizable
Image movable
Image zoomable
Image rotatable
Keyboard control
Fullscreen showing
Multiple instances
Browser support IE7+
RTL support

Installation

You can install the plugin via npm

$ npm install jquery.magnify --save

or via bower

$ bower install jquery.magnify --save

Usage

1.Include files

The usage of magnify is very simple.

<link href="/path/to/magnify.css" rel="stylesheet" />

<script src="/path/to/jquery.js"></script>
<script src="/path/to/jquery.magnify.js"></script>

The icons in magnify use svg default, you can customize them in options.

2.Html structure

The default structure as below:

<a data-magnify="gallery" href="big-1.jpg">
  <img src="small-1.jpg" />
</a>
<a data-magnify="gallery" href="big-2.jpg">
  <img src="small-2jpg" />
</a>
<a data-magnify="gallery" href="big-3.jpg">
  <img src="small-3.jpg" />
</a>

<img data-magnify="gallery" data-src="big-1.jpg" src="small-1.jpg" />
<img data-magnify="gallery" data-src="big-2.jpg" src="small-2.jpg" />
<img data-magnify="gallery" data-src="big-3.jpg" src="small-3.jpg" />

All structures above have optional attributes as below:

Add a data-src attribute to link big image if you do not want to use a <a> tag. If you use it in a <a> tag, it will override the image link in href attribute.
Add a data-caption attribute if you want to show a caption. If you are not using this attribute, it will show the image name in the url when you set the title option true.
Add a data-group attribute if you want to set the images in groups.

3.Call plugin

If you add a data-magnify attribute, you can write none of js.

Of course, you can use selector to call the plugin as following code:

$("[data-magnify=gallery]").magnify();

Options

draggable true

If ture, it allow modal dragging.
resizable true

If ture, it allow modal resizing.
movable true

If ture, it allow image moving.
keyboard true

If ture, it allow keyboard control. It is similar to Windows photo viewer.
- ← prev image
- → next image
- + zoom in image
- - zoom out image
- Ctrl + Alt + 0 image autual size
- Ctrl + , rotate image left
- Ctrl + . rotate image right
- Q close the Magnify modal
title true

If ture, it will show image title on header.
fixedModalSize false

If false, the modal init size will fit to image size.

If true, the modal init size will be set with modalWidth and modalHeight.
modalWidth 320

The modal min width.
modalHeight 320

The modal min height.
gapThreshold 0.02

There will have a gap if modal too big to beyond the browser.
ratioThreshold 0.01

Image zoom ratio threshold.
minRatio 0.05 (5%)

The min ratio to show image.
maxRatio 16 (1600%)

The max ratio to show image.
icons

You can customize the icons in following key.
- minimize svg
- maximize svg
- close svg
- zoomIn svg
- zoomOut svg
- prev svg
- next svg
- fullscreen svg
- actualSize svg
- rotateLeft svg
- rotateRight svg
headerToolbar ['maximize','close']

The buttons display in header toolbar.
footerToolbar ['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight']

The buttons display in footer toolbar.
fixedContent true

If true, the content will be fixed.
i18n

You can customize the buttons title in following key.
- minimize minimize
- maximize maximize
- close close
- zoomIn zoom-in
- zoomOut zoom-out
- prev prev
- next next
- fullscreen fullscreen
- actualSize actual-size
- rotateLeft rotate-left
- rotateRight rotate-right
initMaximized false

If false, the modal size will be set of image size or what you set.

If true, the modal size will be set maximized when init.
multiInstances true

If true, it allow multiple instances.
initEvent click

The event to init plugin. Another value is dblclick.
initAnimation true

If false, it will not have animation at plugin's init.
fixedModalPos false

if true, the modal position will be fixed when change images.
zIndex 1090

The modal style of z-index, it is useful with multiple instances.
dragHandle

The handle of draggable.
progressiveLoading true

If true, the image will be rendered progressively.

customButtons {}

$("[data-magnify=gallery]").magnify({
  footerToolbar: [..."myCustomButton"],
  customButtons: {
    myCustomButton: {
      text: "custom!",
      title: "custom!",
      click: function (context, e) {
        alert("clicked the custom button!");
      },
    },
  },
});

Each customButton entry accepts the following properties:

text - the text to be display on the button itself.
title - the title to be display when hover the button.
click - a callback function that is called when the button is clicked.

Events

You can define callbacks in callbacks option. In each callback you can get the Magnify instance with this or context.

$("[data-magnify=gallery]").magnify({
  callbacks: {
    beforeOpen: function (context) {
      // Will fire before modal is opened
    },
    opened: function (context) {
      // Will fire after modal is opened
    },
    beforeClose: function (context) {
      // Will fire before modal is closed
    },
    closed: function (context) {
      // Will fire after modal is closed
    },
    beforeChange: function (context, index) {
      // Will fire before image is changed
      // The argument index is the current image index of image group
    },
    changed: function (context, index) {
      // Will fire after image is changed
      // The argument index is the next image index of image group
    },
  },
});

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

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

magnify's People

Stargazers

Watchers

Forkers

ewail quanjinwusheng uncle-z chenddong maskkid pg54 jiuyuehe sureenough yongfengf12 tianyoumeng avinashjorige kkone001 likaissaa weiwen0718 tangjunyi fishline faillone linchen195 woxiangwoshi123 kld-tech gengwenx yarkone artgou solekubi sreenivas74 houqiangxie mandikap47 deawx sk8yuck jacksplwxy lvmingai fangdong27 ws4924 86y charrysong heyijx2 samchenws nickynodejs letterbuild xiaoyunge apollonbar acrisiuse lcy078 ddt134 teddyol aochan755 akamallozzi fthcrazy monk233 staticdesigner zzzyting yasseraameen mgrzelczyk dolat2057 hellen808 xiaocuixt

magnify's Issues

同样在IE11下，为什么旋转图片等按钮无法使用？

我使用ie11在我的电脑上调试没什么问题，但是在别的电脑上访问时，同样是IE11,图片底下的一排按钮失去作用，图片放大缩小，旋转都无效，切鼠标移动至小图标时也无反应。请指点。

添加一个功能 magnify-modal 随 magnify-images 一同缩放

magnify-modal 随 magnify-images 一同缩放

$image.css({
width: Math.round(newWidth) + 'px',
height: Math.round(newHeight) + 'px',
left: 0,
top: 0
});

// 此处为需求添加 demo
var $pimage = $image.parents('.magnify-modal');
$pimage.css({
width: Math.round(newWidth) + 'px',
height: Math.round(newHeight) + 'px',
left: $pimage.position().left + Math.round(newLeft) + 'px',
top: $pimage.position().top + Math.round(newTop) + 'px'
})

Hi，A function problem about the Plugin

The magnfiy is a great plugin! I have a problem: I use the magnify to open a photo , but when I close the magnify , the backspace and F1-F12 is not available, so I must be refresh the father html... In my opinion, when we close the magnify, backspace and F1-F12 should be remove disable.
As i see, your home page of the maginfy function show also have the problem.

You can open an image repeatedly, and it creates new DOM elements that overlap the old

Steps to reproduce

Go to the demo page: https://nzbin.github.io/magnify/
Click the first image multiple times
Click close once

Result

You will see the image (or copies of the image) are open multiple times under the one closed.

Expected Result

One modal per image.

Auto loading of images and thumbnails

is it possible to load next images automatically without clicking on next buttons?. is there any provision to add thumbnails instead of large images? say for eg. initially we load only thumbnails (images with small size) when the image open in modal (or when user clicks on image) it should open large image

Print Functionality

Hello, this is not an issue, i just want implement print functionality for each image.

I am using this jQuery plugin:
https://github.com/DoersGuild/jQuery.print

So for each image i should use something like:

$("#myElementId").print({
  globalStyles: true,
  mediaPrint: false,
  stylesheet: null,
  noPrintSelector: ".no-print",
  iframe: true,
  append: null,
  prepend: null,
  manuallyCopyFormValues: true,
  deferred: $.Deferred(),
  timeout: 750,
  title: null,
  doctype: '<!doctype html>'
});

Regards

$('#approvedBoxas [data-magnify]').magnify({
  headToolbar: [
    'close',
    'maximize'
  ],
  footToolbar: [
    'zoomIn',
    'zoomOut',
    'prev',
    'fullscreen',
    'next',
    'actualSize',
    'rotateRight'
  ],
  title: false,
  multiInstances: false,
  fixedContent: true,
  initAnimation: true,
  keyboard: true,
  movable: true,
  resizable: true,
  draggable: true,
  zIndex: 99999999999999
});