jQuery基于窗口的照片查看器插件 A jQuery plugin designed to provide gallery view for images

Getting Started

All the pictures come from Flickr website, copyright to the original author.

Initialization

Step 1: HTML结构

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

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

Step 2: 初始化

The usage of photoviewer is very simple, the PhotoViewer constructor has 2 argument.

1. Array with objects of image info.
2. Options

// build images array
var items = [
    {
        src: 'path/to/image1.jpg', // path to image
        caption: 'Image Caption 1' // If you skip it, there will display the original image name(image1)
    },
    {
        src: 'path/to/image2.jpg',
        caption: '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

使用超链接元素

There have 2 ways to initializing the plugin form a list of links.

Way 1: Bind event to links manually

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:

Way 2: Initializing as jQuery plugin

If you use PhotoViewer as a jQuery plugin, it's just same to Magnify except namespace.

You can make DOM structure like this

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

or

<img data-gallery="jquery" data-src="big-1.jpg" src="small-1.jpg">
<img data-gallery="jquery" data-src="big-2.jpg" src="small-2.jpg">
<img data-gallery="jquery" 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.

Initializing as jQuery plugin is the simplest.

$('[data-gallery=jquery]').photoviewer(options);

If you add attribute data-photoviewer, you can write none of js, it will initialize automaticlly.

Options

index number 0

The images array index. If 0, it will show first image when photoviewer opened.

draggble 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

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 320

It's the modal min width or modal initialized width when opened.

modalHeight 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.

headToolbar array ['maximize','close']

The buttons display in header toolbar.

footToolbar 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 modal

The handle of draggable.

icons object

You can customize the icons class in following key.

i18n object

You can customize the buttons title in following key.