Touch enabled intuitive image viewer.
and you don't have to learn a lot to use this library.
If you find something wrong with this library, please let us know.
Link directly to SmartPhoto files on unpkg.
<script src="https://unpkg.com/smartphoto@2/js/smartphoto.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/smartphoto@2/css/smartphoto.min.css" />npm install smartphoto --saveyarn add smartphotoInstead of scanning <a> elements in the page, you can pass an array of slide objects directly. This is useful when your images come from an API or a JS-rendered list.
const photo = new SmartPhoto([
{ src: "/img/bear-large.jpg", thumb: "/img/bear.jpg", caption: "bear", id: "bear" },
{ src: "/img/camel-large.jpg", thumb: "/img/camel.jpg", caption: "camel", id: "camel" }
]);
photo.show(0); // open by index
photo.show("camel"); // or by id
photo.next();
photo.prev();
photo.hide();Both HTML mode and data source mode share the exact same public API, options, and events.
Eg. If you want the each image to be the largest size such that both its width and its height can fit inside the content area
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-smartPhoto",{
resizeStyle: 'fit'
});
});Eg. you can turn off the orientation api so as not to move the image when tilting the smartphone
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-smartPhoto",{
useOrientationApi: false
});
});| variable | description | default |
|---|---|---|
| arrows | prev/next arrows | true |
| nav | navigation images at the bottom | true |
| showAnimation | animate the open/close transition | true |
| verticalGravity | apply device-tilt gravity to the vertical axis too (in addition to horizontal) | false |
| useOrientationApi | use the accelerometer (deviceorientation) to move a zoomed image | false |
| useHistoryApi | update the URL hash (#group=…&photo=…) via the History API | true |
| swipeTopToClose | close the viewer on an upward swipe | false |
| swipeBottomToClose | close the viewer on a downward swipe | true |
| swipeOffset | minimum swipe distance (px) to trigger navigation/close | 100 |
| headerHeight | height (px) reserved for the header when fitting images | 60 |
| footerHeight | height (px) reserved for the footer when fitting images | 60 |
| resizeStyle | resize images to fill/fit on the screen | 'fit' |
| animationSpeed | animation speed (ms) when switching/opening/closing images | 300 |
| forceInterval | frequency (ms) to apply force to images | 10 |
| registance | friction applied to the inertia scroll of a zoomed image | 0.5 |
| loadOffset | number of neighboring slides to preload around the current one | 2 |
| lazyAttribute | attribute read for a lazy-loaded thumbnail (HTML mode only) | 'data-src' |
| classNames | override any of the generated CSS class names | see source |
| message | override screen-reader text (gotoNextImage / gotoPrevImage / closeDialog / carouselLabel) | see source |
By making an instance like below, you can execute some methods through the instance
var mySmartPhoto = new SmartPhoto(".js-smartPhoto");zoom in
mySmartPhoto.zoomPhoto();zoom out
mySmartPhoto.zoomOutPhoto();slide to the 6th image
mySmartPhoto.gotoSlide(6);go to the next/previous slide (no-op at the start/end of the group)
mySmartPhoto.next();
mySmartPhoto.prev();open the viewer, by index or id (works in both HTML mode and data source mode)
mySmartPhoto.show(0);
mySmartPhoto.show("bear");close the viewer (hide() is an alias of hidePhoto())
mySmartPhoto.hide();add new image to your gallery
mySmartPhoto.addNewItem(element);remove the viewer and all of its event listeners
mySmartPhoto.destroy();SmartPhoto also implements [Symbol.dispose](), so a using declaration destroys the instance automatically when it goes out of scope
{
using photo = new SmartPhoto(".js-smartPhoto");
// destroy() is called automatically here
}when the modal opened
mySmartPhoto.on('open',function(){
console.log('open');
});when the modal closed
photo.on('close',function(){
console.log('close');
});when all images are loaded
photo.on('loadall',function(){
console.log('loadall');
});when photo is changed
photo.on('change',function(){
console.log('change');
});when swipe started
photo.on('swipestart',function(){
console.log('swipestart');
});when swipe ended
photo.on('swipeend',function(){
console.log('swipeend');
});when zoomed in
photo.on('zoomin',function(){
console.log('zoomin');
});when zoomed out
photo.on('zoomout',function(){
console.log('zoomout');
});| property | description | default |
|---|---|---|
| --smartphoto-animation-speed | animation speed when switching/opening/closing images. Overridden per-instance by the animationSpeed JS option |
300ms |
| --smartphoto-animation-function | easing function used for animations | ease-out |
| --smartphoto-backdrop-color | backdrop color when viewing images | rgba(0, 0, 0, 1) |
| --smartphoto-header-color | header color | rgba(0, 0, 0, .2) |
Set these on .smartphoto (or :root) to override the defaults, no rebuild required:
.smartphoto {
--smartphoto-animation-speed: 500ms;
--smartphoto-animation-function: ease-in-out;
--smartphoto-backdrop-color: rgba(0, 0, 0, 0.9);
--smartphoto-header-color: rgba(0, 0, 0, 0.4);
}