下载路径: https://download.csdn.net/download/cjnba/18234658
附带5个demo
Getting Started
All the pictures come from Flickr website, copyright to the original author.
Installation
$ 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: Initialize
The usage of photoviewer is very simple, the PhotoViewer
constructor has 2 argument.
- Array with objects of image info.
- 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 viewer = new PhotoViewer(items, options);
At last, binding click event on a button element, you should get the following example.
Open PhotoViewer
Initializing form a list of links
The default DOM structure as following:
<a data-gallery="manual" href="big-1.jpg">
<img src="small-1.jpg">
</a>
<a data-gallery="manual" href="big-2.jpg">
<img src="small-2.jpg">
</a>
<a data-gallery="manual" href="big-3.jpg">
<img src="small-3.jpg">
</a>
You should get the image src and the index of element clicked manually to create the images array.
$('[data-gallery=manual]').click(function (e) {
e.preventDefault();
var items = [],
// get index of element clicked
options = {
index: $(this).index()
};
// looping to create images array
$('[data-gallery=manual]').each(function () {
let src = $(this).attr('href');
items.push({
src: src
});
});
new PhotoViewer(items, options);
});
Look at the following example:
Options
index
number 0
The images array index. If 0
, it will show first image when photoviewer opened.
draggable
boolean true
If ture, it allow modal dragging.
resizable
boolean true
If ture, it allow modal resizing.
movable
boolean true
If ture, it allow image moving.
keyboard
boolean true
Make photoviewer can be controled by keyboard. The shortcut key 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 quit the photoviewer
title
boolean true
If ture, it will show image title on header.
fixedModalSize
boolean false
This option will set photoviewer's size when it opened. If false, the modal initialized size will fit to image size. If true, the modal initialized size will be set with modalWidth and modalHeight.
modalWidth
number 320
It's the modal min width or modal initialized width when opened.
modalHeight
number 320
It's the modal min height or modal initialized height when opened.
gapThreshold
number 0.02
The gap size threshold. There will have a gap if modal too large to beyond the browser. Its min value is 0
, means the modal's width or height should be equal to browser window if it's too large.
ratioThreshold
number 0.01
Image zoom ratio threshold.
minRatio
number 0.1
The min ratio to show image. 0.1
means the image can be zoomed 0.1x from original size.
maxRatio
number 16
The max ratio to show image. 16
means the image can be zoomed 16x from original size.
headerToolbar
array ['maximize','close']
The buttons display in header toolbar.
footerToolbar
array ['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight']
The buttons display in footer toolbar.
fixedContent
boolean true
If true, the document page can not scoll.
initMaximized
boolean false
If false, the modal size will be set of image size or what you set with modalWidth and modalHeight. If true, the modal size will be set maximized when initialized just like other lightbox.
initAnimation
boolean true
If false, it will not have animation at plugin's initialized.
fixedModalPos
boolean false
If true, the modal position will be fixed when change images.
zIndex
number 1090
The modal style of z-index, it is useful with multiple instances.
dragHandle
string | boolean false
The handle of draggable. Default false
which whole modal can be dragging.
multiInstances
boolean true
If false, it can only open single photoviewer.
icons
object
You can customize the icons class in following key.
- minimize:
SVG codes
- maximize:
SVG codes
- close:
SVG codes
- zoomIn:
SVG codes
- zoomOut:
SVG codes
- prev:
SVG codes
- next:
SVG codes
- fullscreen:
SVG codes
- actualSize:
SVG codes
- rotateLeft:
SVG codes
- rotateRight:
SVG codes
i18n
object
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:
actualSize
- rotateLeft:
rotate-left
- rotateRight:
rotate-right
callbacks
object
You can define callbacks in callbacks
option.
new PhotoViewer(items, {
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
}
}
});
progressiveLoading
boolean true
If true, the image will be rendered progressively.
appendTo
string 'body'
The DOM element to which viewer will be added.
customButtons
object {}
new PhotoViewer(items, {
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.