A RetroSearch Logo

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Search Query:

Showing content from https://www.npmjs.com/package/viewerjs below:

viewerjs - npm

JavaScript image viewer.

dist/
├── viewer.css
├── viewer.min.css   (compressed)
├── viewer.js        (UMD)
├── viewer.min.js    (UMD, compressed)
├── viewer.common.js (CommonJS, default)
└── viewer.esm.js    (ES Module)

In browser:

<link  href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>

The cdnjs provides CDN support for Viewer.js's CSS and JavaScript. You can find the links here.

new Viewer(element[, options])
<!-- a block container is required -->
<div>
  <img id="image" src="picture.jpg" alt="Picture">
</div>

<div>
  <ul id="images">
    <li><img src="picture-1.jpg" alt="Picture 1"></li>
    <li><img src="picture-2.jpg" alt="Picture 2"></li>
    <li><img src="picture-3.jpg" alt="Picture 3"></li>
  </ul>
</div>
// You should import the CSS file.
// import 'viewerjs/dist/viewer.css';
import Viewer from 'viewerjs';

// View an image.
const viewer = new Viewer(document.getElementById('image'), {
  inline: true,
  viewed() {
    viewer.zoomTo(1);
  },
});
// Then, show the image by clicking it, or call `viewer.show()`.

// View a list of images.
// Note: All images within the container will be found by calling `element.querySelectorAll('img')`.
const gallery = new Viewer(document.getElementById('images'));
// Then, show one image by click it, or call `gallery.show()`.

Only available in modal mode.

⬆ back to top

You may set viewer options with new Viewer(image, options). If you want to change the global default options, You may use Viewer.setDefaults(options).

Enable the modal backdrop, specify static for the backdrop that will not close the modal on click.

Show the button on the top-right of the viewer.

Specify the visibility of the navbar.

Specify the visibility and the content of the title.

The name comes from the alt attribute of an image element or the image name parsed from its URL.

For example, title: 4 equals to:

new Viewer(image, {
  title: [4, (image, imageData) => `${image.alt} (${imageData.naturalWidth} × ${imageData.naturalHeight})`]
});

Specify the visibility and layout of the toolbar its buttons.

For example, toolbar: 4 equals to:

new Viewer(image, {
  toolbar: {
    zoomIn: 4,
    zoomOut: 4,
    oneToOne: 4,
    reset: 4,
    prev: 4,
    play: {
      show: 4,
      size: 'large',
    },
    next: 4,
    rotateLeft: 4,
    rotateRight: 4,
    flipHorizontal: 4,
    flipVertical: 4,
  },
});

see more for custom toolbar.

Custom class name(s) to add to the viewer's root element.

Container to place the viewer in the modal mode.

Only available when the inline option is set to false.

Filter the images for viewing (should return true if the image is viewable, return false to ignore the image).

For example:

new Viewer(image, {
  filter(image) {
    return image.complete;
  },
});

Note that images without the src attribute set will be ignored by default.

Enable to request full screen when play.

Requires the browser supports Fullscreen API.

Define the extra attributes to inherit from the original image.

Note that the basic attributes src and alt will always inherit from the original image.

Define the initial coverage of the viewing image. It must a positive number between 0 (0%) and 1 (100%).

Define the initial index of the image for viewing.

Also used as the default parameter value of the view method.

Enable inline mode.

The amount of time to delay between automatically cycling an image when playing.

Enable keyboard support.

Focus the active item in the navbar when initialized.

Requires the keyboard option set to true.

Indicate if showing a loading spinner when loading the image or not.

Indicate if enabling loop viewing or not.

If the current image is the last one, then the next one to view is the first one, and vice versa.

Define the minimum width of the viewer.

Only available in inline mode (set the inline option to true).

Define the minimum height of the viewer.

Only available in inline mode (set the inline option to true).

Enable to move the image.

Enable to rotate the image.

Enable to scale the image.

Enable to zoom the image.

Enable to zoom the current image by dragging on the touch screen.

Enable to zoom the image by wheeling the mouse.

Enable to slide to the next or previous image by swiping on the touch screen.

Indicate if toggle the image size between its natural size and initial size when double click on the image or not.

In other words, call the toggle method automatically when double click on the image.

Requires dblclick event support.

Show the tooltip with image ratio (percentage) when zooming in or zooming out.

Enable CSS3 Transition for some special elements.

Define the CSS z-index value of the viewer in modal mode.

Define the CSS z-index value of the viewer in inline mode.

Define the ratio when zooming the image by wheeling the mouse.

Define the min ratio of the image when zooming out.

Define the max ratio of the image when zooming in.

Define where to get the original image URL for viewing.

If it is a string, it should be one of the attributes of each image element. If it is a function, it should return a valid image URL.

For example:

<img src="picture.jpg?size=160">
new Viewer(image, {
  url(image) {
    return image.src.replace('?size=160', '');
  },
});

Shortcut of the ready event.

Shortcut of the show event.

Shortcut of the shown event.

Shortcut of the hide event.

Shortcut of the hidden event.

Shortcut of the view event.

Shortcut of the viewed event.

Shortcut of the move event.

Shortcut of the moved event.

Shortcut of the rotate event.

Shortcut of the rotated event.

Shortcut of the scale event.

Shortcut of the scaled event.

Shortcut of the zoom event.

Shortcut of the zoomed event.

Shortcut of the play event.

Shortcut of the stop event.

⬆ back to top

All methods allow chain composition.

As there are some asynchronous processes when start the viewer, you should call a method only when it is available, see the following lifecycle:

new Viewer(image, {
  ready() {
    // 2 methods are available here: "show" and "destroy".
  },
  shown() {
    // 9 methods are available here: "hide", "view", "prev", "next", "play", "stop", "full", "exit" and "destroy".
  },
  viewed() {
    // All methods are available here except "show".
    this.viewer.zoomTo(1).rotateTo(180);
  }
});

Show the viewer.

Only available in modal mode.

Hide the viewer.

Only available in modal mode.

View one of the images with the image index. If the viewer is hidden, it will be shown first.

viewer.view(1); // View the second image

View the previous image.

View the next image.

Move the image with relative offsets.

viewer.move(1);
viewer.move(-1, 0); // Move left
viewer.move(1, 0);  // Move right
viewer.move(0, -1); // Move up
viewer.move(0, 1);  // Move down

Move the image to an absolute point.

Rotate the image with a relative degree.

viewer.rotate(90);
viewer.rotate(-90);

Rotate the image to an absolute degree.

viewer.rotateTo(0); // Reset to zero degree
viewer.rotateTo(360); // Rotate a full round

Scale the image.

viewer.scale(-1); // Flip both horizontal and vertical
viewer.scale(-1, 1); // Flip horizontal
viewer.scale(1, -1); // Flip vertical

Scale the abscissa of the image.

viewer.scaleX(-1); // Flip horizontal

Scale the ordinate of the image.

viewer.scaleY(-1); // Flip vertical
zoom(ratio[, showTooltip[, pivot]])

Zoom the image with a relative ratio

viewer.zoom(0.1);
viewer.zoom(-0.1);
zoomTo(ratio[, showTooltip[, pivot]])

Zoom the image to an absolute ratio.

viewer.zoomTo(0); // Zoom to zero size (0%)
viewer.zoomTo(1); // Zoom to natural size (100%)

// Zoom to 50% from the center of the window.
viewer.zoomTo(.5, {
  x: window.innerWidth / 2,
  y: viewer.innerHeight / 2,
});

Play the images.

Stop play.

Enter the modal mode.

Only available in inline mode.

Exit the modal mode.

Only available in inline mode.

Show the current ratio of the image by percentage.

Requires the tooltip option set to true.

Toggle the image size between its current size and natural size.

Used by the toggleOnDblclick option.

Reset the image to its initial state.

Update the viewer instance when the source images changed (added, removed, or sorted).

If you load images dynamically (with XMLHTTPRequest), you can use this method to add the new images to the viewer instance.

Destroy the viewer and remove the instance.

⬆ back to top

All events can access the viewer instance with this.viewer in its handler.

Be careful to use these events with other components which have the same event names, e.g.: Bootstrap's modal.

let viewer;

image.addEventListener('viewed', function () {
  console.log(this.viewer === viewer);
  // > true
});

viewer = new Viewer(image);

This event fires when a viewer instance is ready for viewing.

In modal mode, this event will not be triggered until you click on one of the images.

This event fires when the viewer modal starts to show.

Only available in modal mode.

This event fires when the viewer modal has shown.

Only available in modal mode.

This event fires when the viewer modal starts to hide.

Only available in modal mode.

This event fires when the viewer modal has hidden.

Only available in modal mode.

This event fires when a viewer starts to show (view) an image.

This event fires when a viewer has shown (viewed) an image.

This event fires when a viewer starts to move an image.

This event fires when a viewer has moved an image.

This event fires when a viewer starts to rotate an image.

This event fires when a viewer has rotated an image.

This event fires when a viewer starts to scale an image.

This event fires when a viewer has scaled an image.

This event fires when a viewer starts to zoom (in or out) an image.

This event fires when a viewer has zoomed (in or out) an image.

This event fires when the viewer starts to play.

You can abort the playing process by calling event.preventDefault().

This event fires when the viewer starts to stop.

You can abort the stopping process by calling event.preventDefault().

⬆ back to top

If you have to use another viewer with the same namespace, call the Viewer.noConflict static method to revert to it.

<script src="other-viewer.js"></script>
<script src="viewer.js"></script>
<script>
  Viewer.noConflict();
  // Code that uses other `Viewer` can follow here.
</script>

Please read through our contributing guidelines.

Maintained under the Semantic Versioning guidelines.

MIT © Chen Fengyuan

⬆ back to top

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4