appleple / Smartphoto
Licence: mit
The most easy to use responsive image viewer especially for mobile devices
Stars: ✭ 858
Programming Languages
javascript
184084 projects - #8 most used programming language
es2015
71 projects
Labels
Projects that are alternatives of or similar to Smartphoto
Showdown Htmlescape
Plugin for Showdown to prevent the use of arbitrary HTML and allow only the specific Markdown syntax.
Stars: ✭ 6 (-99.3%)
Mutual labels: npm
Ax5ui Uploader
jQuery file uploader, HTML5(IE9+, FF, Chrome, Safari) - http://ax5.io/ax5ui-uploader/
Stars: ✭ 25 (-97.09%)
Mutual labels: npm
Declarativ
A declarative HTML rendering library that is definitely not JSX.
Stars: ✭ 16 (-98.14%)
Mutual labels: npm
Fake Tag
A fake template literal tag to trick syntax highlighters, linters and formatters into action.
Stars: ✭ 22 (-97.44%)
Mutual labels: npm
Ntl
Node Task List: Interactive cli to list and run package.json scripts
Stars: ✭ 800 (-6.76%)
Mutual labels: npm
Functions.js
📦 A hub of numerous functions with various functionalities
Stars: ✭ 22 (-97.44%)
Mutual labels: npm
Unreset.css
Unreset CSS restores browsers' default element styles which are reset by Eric Meyer's Reset CSS, YUI 3 Reset CSS, HTML5 Reset Stylesheet of HTML5 Doctor, or Tim Murtaugh's HTML5 Reset.
Stars: ✭ 24 (-97.2%)
Mutual labels: npm
Composer Asset Plugin
NPM/Bower Dependency Manager for Composer
Stars: ✭ 898 (+4.66%)
Mutual labels: npm
Autodeploy
🚀 Autodeploy is a small and highly customizable CLI-Tool to automatically deploy your git repo and execute arbitrary commands/scripts after a specific git action (e.g. push, merge, ...)
Stars: ✭ 20 (-97.67%)
Mutual labels: npm
Interactive Git Tag
Interactive tool that helps with your git tagging by suggesting versions
Stars: ✭ 24 (-97.2%)
Mutual labels: npm
Npm Font Open Sans
npm package of Open Sans (incl. CSS/LESS/SCSS)
Stars: ✭ 6 (-99.3%)
Mutual labels: npm
Instagramfirstcommenter
This bot will post a predefined comment as fast as possible to a new post on the target profile. I used this to successfully win tickets for a big music festival.
Stars: ✭ 26 (-96.97%)
Mutual labels: npm
Web2executable
Uses NW.js to generate "native" apps for already existing web apps.
Stars: ✭ 824 (-3.96%)
Mutual labels: standalone
Preppy
A simple and lightweight tool for preparing the publish of NPM packages.
Stars: ✭ 23 (-97.32%)
Mutual labels: npm
Yarn Package Boilerplate
An Yarn package with babel, jest, flow, prettier and more
Stars: ✭ 10 (-98.83%)
Mutual labels: npm
Sass A11ycolor
🌈 Generate the nearest accessible color with Sass.
Stars: ✭ 24 (-97.2%)
Mutual labels: npm
SmartPhoto
The most easy to use responsive image viewer especially for mobile devices
See https://appleple.github.io/SmartPhoto/ for complete docs and demos
If you are Japasese, See here https://www.appleple.com/blog/javascript/smartphoto-js.html instead.
Feature
- Intuitive gestures such as pinch-in/pinch-out/drag/swipe
- Use Accelerometer to move images
- Accessible from keyboards and screen-readers
- Show pictures via URL hash
- Can make photo groups
Installation
via npm
npm install smartphoto --save
or yarn
yarn add smartphoto
Usage
require
const SmartPhoto = require('smartphoto');
smartphoto.js
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-smartphoto");
});
jquery-smartphoto.js
$(function(){
$(".js-smartphoto").SmartPhoto();
});
Basic Standalone Usage
<a href="./assets/large-bear.jpg" class="js-smartphoto" data-caption="bear" data-id="bear" data-group="0">
<img src="./assets/bear.jpg" width="360"/>
</a>
<a href="./assets/large-camel.jpg" class="js-smartphoto" data-caption="camel" data-id="camel" data-group="0">
<img src="./assets/camel.jpg" width="360"/>
</a>
<a href="./assets/large-rhinoceros.jpg" class="js-smartphoto" data-caption="rhinoceros" data-id="sai" data-group="0">
<img src="./assets/rhinoceros.jpg" width="360"/>
</a>
<link rel="stylesheet" href="./css/smartphoto.min.css">
<script src="./js/smartphoto.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-smartphoto");
});
</script>
Option
variable | description | default |
---|---|---|
arrows | prev/next arrows | true |
nav | navigation images at the bottom | true |
useOrientationApi | use accelerometer to move images | true |
resizeStyle | resize images to fill/fit on the screen | 'fill' |
animationSpeed | animation speed when switching images | 300 |
forceInterval | frequency to apply force to images | 10 |
Hide parts
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-smartphoto",{
arrows: false,
nav: false
});
});
Fit/Fill Option
You can choose if you want to scale images to fit/fill
document.addEventListener('DOMContentLoaded',function(){
new SmartPhoto(".js-smartphoto",{
resizeStyle: 'fit'
});
});
Event
// when the modal opened
photo.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');
});
SCSS
variable | description | default |
---|---|---|
$animation-speed | animation speed when switching images | .3s |
$backdrop-color | backdrop color when viewing images | rgba(0, 0, 0, 1) |
$header-color | header color | rgba(0, 0, 0, .2) |
Download
Github
https://github.com/appleple/SmartPhoto
Contributor
License
Code and documentation copyright 2017 by appleple, Inc. Code released under the MIT License.
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].