imageviewer
Advanced tools
A simple jQuery image viewing plugin.
dist/
├── viewer.css ( 8 KB)
├── viewer.min.css ( 7 KB)
├── viewer.js (48 KB)
└── viewer.min.js (21 KB)
Four quick start options are available:
git clone https://github.com/fengyuanchen/viewer.git.npm install imageviewer.bower install imageviewer.Include files:
<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link href="/path/to/viewer.css" rel="stylesheet">
<script src="/path/to/viewer.js"></script>
Initialize with $.fn.viewer method.
<!-- a block container is required -->
<div>
<img class="image" src="picture.jpg" alt="Picture">
</div>
<div>
<ul class="images">
<li><img src="picture.jpg" alt="Picture"></li>
<li><img src="picture-2.jpg" alt="Picture 2"></li>
<li><img src="picture-3.jpg" alt="Picture 3"></li>
</ul>
</div>
// View one image
$('.image').viewer();
// View some images
$('.images').viewer();
Only available in modal mode.
Esc: Exit full screen or stop play.Space: Stop play.←: View the previous image.→: View the next image.↑: Zoom in the image.↓: Zoom out the image.Ctrl + 0: Zoom out to initial size.Ctrl + 1: Zoom in to natural size.You may set viewer options with $().viewer(options).
If you want to change the global default options, You may use $.fn.viewer.setDefaults(options).
BooleanfalseEnable inline mode.
BooleantrueShow the button on the top-right of the viewer.
Boolean or Numbertrue0 or false: hide the navbar1 or true: show the navbar2: show the navbar only when screen width great then 768 pixels3: show the navbar only when screen width great then 992 pixels4: show the navbar only when screen width great then 1200 pixelsSpecify the visibility of the navbar.
Boolean or Numbertrue0 or false: hide the title1 or true: show the title2: show the title only when screen width great then 768 pixels3: show the title only when screen width great then 992 pixels4: show the title only when screen width great then 1200 pixelsSpecify the visibility of the title (the current image's name and dimensions).
The name comes from the
altattribute of an image element or the image name parsed from URL.
Boolean or Numbertrue0 or false: hide the toolbar1 or true: show the toolbar2: show the toolbar only when screen width great then 768 pixels3: show the toolbar only when screen width great then 992 pixels4: show the toolbar only when screen width great then 1200 pixelsSpecify the visibility of the toolbar.
BooleantrueShow the tooltip with image ratio (percentage) when zoom in or zoom out
BooleantrueEnable to move the image.
BooleantrueEnable to zoom the image.
BooleantrueEnable to rotate the image.
BooleantrueEnable to scale the image.
BooleantrueEnable CSS3 Transition for some special elements.
BooleantrueEnable to request full screen when play.
Requires the browser supports Full Screen API.
BooleantrueEnable keyboard support.
Number5000Define interval of each image when playing.
Number0.1Define the ratio when zoom the image by wheeling mouse.
Number0.01Define the min ratio of the image when zoom out.
Number100Define the max ratio of the image when zoom in.
Number2015Define the CSS z-index value of viewer in modal mode.
Number0Define the CSS z-index value of viewer in inline mode.
String or Function'src'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 will be called on each image and should return a valid image URL.
FunctionnullA shortcut of the "build.viewer" event.
FunctionnullA shortcut of the "built.viewer" event.
FunctionnullA shortcut of the "show.viewer" event.
FunctionnullA shortcut of the "shown.viewer" event.
FunctionnullA shortcut of the "hide.viewer" event.
FunctionnullA shortcut of the "hidden.viewer" event.
FunctionnullA shortcut of the "view.viewer" event.
FunctionnullA shortcut of the "viewed.viewer" event.
As there are some asynchronous processes when start the viewer, you should call a method only when it is available, see the following lifecycle:
$().viewer({
built: function () {
// 2 methods are available here: "show" and "destroy".
},
shown: function () {
// 9 methods are available here: "hide", "view", "prev", "next", "play", "stop", "full", "exit" and "destroy".
},
viewed: function () {
// All methods are available here except "show".
$(this).viewer('rotate', 90).viewer('scale', -1, -1);
}
}
Show the viewer.
Only available in modal mode.
hide the viewer.
Only available in modal mode.
Number0View one of the images with image's index.
$().viewer('view', 1); // View the second image
View the previous image.
View the next image.
offsetX:
NumberoffsetY (optional):
NumberoffsetXMove 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
x:
Numberleft value of the imagey (optional):
Numbertop value of the imagex.Move the image to an absolute point.
ratio:
NumberhasTooltip (optional):
BooleanfalseZoom the image with a relative ratio
$().viewer('zoom', 0.1);
$().viewer('zoom', -0.1);
ratio:
NumberhasTooltip (optional):
BooleanfalseZoom the image to an absolute ratio.
$().viewer('zoomTo', 0); // Zoom to zero size (0%)
$().viewer('zoomTo', 1); // Zoom to natural size (100%)
NumberRotate the image with a relative degree.
Requires CSS3 2D Transforms support (IE 9+).
$().viewer('rotate', 90);
$().viewer('rotate', -90);
NumberRotate the image to an absolute degree.
Requires CSS3 2D Transforms support (IE 9+).
$().viewer('rotateTo', 0); // Reset to zero degree
$().viewer('rotateTo', 360); // Rotate a full round
scaleX:
Number11 it does nothing.scaleY (optional):
NumberscaleX.Scale the image.
Requires CSS3 2D Transforms support (IE 9+).
$().viewer('scale', -1); // Flip both horizontal and vertical
$().viewer('scale', -1, 1); // Flip horizontal
$().viewer('scale', 1, -1); // Flip vertical
Number11 it does nothingScale the abscissa of the image.
Requires CSS3 2D Transforms support (IE 9+).
$().viewer('scaleX', -1); // Flip horizontal
Number11 it does nothingScale the ordinate of the image.
Requires CSS3 2D Transforms support (IE 9+).
$().viewer('scaleY', -1); // Flip vertical
Play the images.
Stop play.
Enter modal mode.
Only available in inline mode.
Exit modal mode.
Only available in inline mode.
Show the current ratio of the image with percentage.
Requires the
tooltipoption set totrue.
Toggle the image size between its natural size and initial size.
Reset the image to its initial state.
Destroy the viewer and remove the instance.
This event fires when a viewer instance starts to build.
This event fires when a viewer instance has built.
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.
If you have to use other plugin with the same namespace, just call the $.fn.viewer.noConflict method to revert to it.
<script src="other-plugin.js"></script>
<script src="viewer.js"></script>
<script>
$.fn.viewer.noConflict();
// Code that uses other plugin's "$().viewer" can follow here.
</script>
Please read through our contributing guidelines.
As a jQuery plugin, you also need to see the jQuery Browser Support.
Maintained under the Semantic Versioning guidelines.
0.5.0 (Jan 21, 2016)
FAQs
A simple jQuery image viewing plugin.
The npm package imageviewer receives a total of 108 weekly downloads. As such, imageviewer popularity was classified as not popular.
We found that imageviewer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.