Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders with fullpage transition support for NextJS and GatsbyJS. 🖥️ 📱

Stars: ✭ 2,343 (+366.73%)

Mutual labels: react-components, gallery, image-gallery

Gallery shell

📷 Bash Script to generate static responsive image web galleries.

Stars: ✭ 198 (-60.56%)

Mutual labels: photos, gallery, image-gallery

Flickrsync

A command line tool to synchronise, upload, download, pictures between the local file system and Flickr. Image hash signature of the picture is used to uniquely identify the image.

Stars: ✭ 14 (-97.21%)

Mutual labels: image, photos, picture

Recent Images

Do you noticed the new feature of Telegram or Instagram?! They show your latest images when you try to attach or post a picture. So I developed this library the same with lots of customization. Simple way to get all images of device based on date taken, name, id and other customization

Stars: ✭ 182 (-63.75%)

Mutual labels: image, picture, gallery

Imageviewer

A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器

Stars: ✭ 1,889 (+276.29%)

Mutual labels: image, gallery, viewer

Stfalconimageviewer

A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures

Stars: ✭ 1,734 (+245.42%)

Mutual labels: image, gallery, viewer

Rocket-Notes

The World's Fastest Note Taking App. Fast. Simple. Create a note in one tap! Create image and text notes directly from your home screen!

Stars: ✭ 20 (-96.02%)

Mutual labels: photos, gallery, picture

Quick Picture Viewer

🖼️ Lightweight, versatile desktop image viewer for Windows. The best replacement for the default Windows photo viewer.

Stars: ✭ 237 (-52.79%)

Mutual labels: image, picture, viewer

Insgallery

📸 Instagram-like image picker for Android (一款 UI 炫酷高仿 Instagram 的图片、视频选择器)

Stars: ✭ 409 (-18.53%)

Mutual labels: photos, picture, gallery

Magicalcamera

A library to take picture easy, transform your data in different format and save photos in your device

Stars: ✭ 327 (-34.86%)

Mutual labels: photos, picture

Kiimagepager

The KIImagePager is inspired by foursquare's ImageSlideshow, the user may scroll through images loaded from the Web

Stars: ✭ 324 (-35.46%)

Mutual labels: image, gallery

Ypimagepicker

📸 Instagram-like image picker & filters for iOS

Stars: ✭ 3,661 (+629.28%)

Mutual labels: picture, gallery

React Image Magnify

A responsive image zoom component designed for shopping sites.

Stars: ✭ 391 (-22.11%)

Mutual labels: image, picture

Vue Picture Swipe

🖼 Vue Picture Swipe Gallery (a gallery of image with thumbnails, lazy-load and swipe) backed by photoswipe

Stars: ✭ 322 (-35.86%)

Mutual labels: picture, gallery

Zlphotobrowser

Wechat-like image picker. Support select normal photos, videos, gif and livePhoto. Support edit image and crop video. 微信样式的图片选择器，支持预览/相册内拍照及录视频、拖拽/滑动选择，编辑图片/视频，支持多语言国际化等功能;

Stars: ✭ 3,962 (+689.24%)

Mutual labels: photos, gallery

Nanogallery2

a modern photo / video gallery and lightbox [JS library]

Stars: ✭ 488 (-2.79%)

Mutual labels: photos, gallery

View All Similar Projects ➔

react-viewer

react image viewer.

Introduction

Because I can`t be comfortable using viewerjs in react, so I created react-viewer to replace it.

Installation

react >= 16.8.0 | react-dom >= 16.8.0

npm install react-viewer --save

Usage

import * as React from 'react';
import Viewer from 'react-viewer';

function App() {
  const [ visible, setVisible ] = React.useState(false);

  return (
    <div>
      <button onClick={() => { setVisible(true); } }>show</button>
      <Viewer
      visible={visible}
      onClose={() => { setVisible(false); } }
      images={[{src: '', alt: ''}]}
      />
    </div>
  );
}

Server Side Rendering

I'm sorry, ssr is not currently supported in 3.x, it will be fixed in 4.0.

Props

props	type	default	description	required
visible	string	false	Viewer visible	true
onClose	function	-	Specify a function that will be called when Visible close	true
images	ImageDecorator[]	[]	image source array	true
activeIndex	number	0	active image index	false
zIndex	number	1000	Viewer css z-index	false
container	HTMLElement	null	set parent node(inline mode)	false
drag	boolean	true	whether to drag image	false
attribute	boolean	true	whether to show image attribute	false
zoomable	boolean	true	whether to show 'zoom' button	false
rotatable	boolean	true	whether to show 'rotate' button	false
scalable	boolean	true	whether to show 'scale' button	false
onMaskClick	(e) => void	-	callback function when mask is clicked	false
downloadable	boolean	false	whether to show 'download'	false
noClose	boolean	false	to not render close button	false
noNavbar	boolean	false	to not render the navbar	false
noToolbar	boolean	false	to not render the toolbar	false
noImgDetails	boolean	false	to not render image detail (WxH)	false
noFooter	boolean	false	to not render the entire footer	false
changeable	boolean	true	wheather to show change button	false
customToolbar	(defaultToolbarConfigs: ToolbarConfig[]) => ToolbarConfig[]	-	customer toolbar	false
zoomSpeed	number	0.05	zoom speed	false
defaultSize	ViewerImageSize	-	default image size	false
defaultImg	viewerdefaultimg	-	if load img failed, show default img	false
disableKeyboardSupport	boolean	false	disable keyboard support	false
noResetZoomAfterChange	boolean	false	preserve zoom after image change	false
noLimitInitializationSize	boolean	false	no limit image initialization size	false
defaultScale	number	1	set default scale	false
onChange	(activeImage: ImageDecorator, index: number) => void	-	callback when image change	false
loop	boolean	true	whether enable image loop	false
disableMouseZoom	boolean	false	whether disable mouse zoom	false
downloadInNewWindow	boolean	false	whether to download in a new window	false
className	string	-	customized CSS class	false
showTotal	boolean	true	whether to display the total number and range	false
maxScale	number	-	maximum scaling	false
minScale	number	0.1	minimum scaling	false

ImageDecorator

props	type	default	description	required
src	string	-	image source	true
alt	string	-	image description	false
downloadUrl	string	-	image downlaod url	false
defaultSize	ViewerImageSize	-	image size	false

ViewerImageSize

props	type	default	description	required
width	number	-	image width	true
height	number	-	image height	true

ViewerDefaultImg

props	type	default	description	required
src	number	-	image source	true
width	number	-	image width	false
height	number	-	image height	false

ToolbarConfig

props	type	default	description	required
key	string	-	tool key	true
render	React.ReactNode	-	tool render	false
onClick	function	-	callback function when action is clicked	false

Keyboard support

Esc: Close viewer.
←: View the previous image.
→: View the next image.
↑: Zoom in the image.
↓: Zoom out the image.
Ctrl + 1: Reset the image.
Ctrl + ←: Rotate left the image.
Ctrl + →: Rotate right the image.

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].

Stars: ✭ 502

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (33) 🔗