{Re}Projector

simple image/gallery previewer

Try it!

Click over the images to preview them in {Re}Projector.

Main features

Customizable
Responsive
Basic camera info support (EXIF tags as data attributes)
Color backgrounds

Install


git clone https://github.com/Re-n-Im/re-projector.git


bower install re-projector

How to use


<link rel="stylesheet" href="dist/css/re-projector.min.css" />
<script type="text/javascript" src="dist/js/re-projector.min.js"></script>
<script type="text/javascript">
var oProjector = new ReProjector( );
</script>

Dependencies

{Re}Projector depends on one library:

JQuery


<script type="text/javascript" src="dist/js/jquery.min.js"></script>

Options

Here is the full list of options (with their default values) which {Re}Projector accepts:


var oProjector = new ReProjector({
	'selector': '',
	'theme': 'dark',
	'projectionControls': {
		'settings': true,
		'close': true,
		'prevNext': true,
		'exif': true,
		'description': true,
		'keyboard': {
			'theme': true,
			'exif': true,
			'navigation': true,
			'toggleControls': true
		},
		'mouse': {
			'wheel': true,
			'swipe': true,
			'timeout': 3
		},
		'toggle': 'click',
		'hideCursor': true,
		'showNextOnClick': false,
		'zoomLinkBox': false
	},
	'callbacks': {
		'open': null,
		'close': null,
		'changePhotograph': null,
		'canvasClick': null
	},
	'translations': {
		'exposurePrograms': {
			0: 'Not defined',
			1: 'Manual',
			2: 'Normal program',
			3: 'Aperture priority',
			4: 'Shutter priority',
			5: 'Creative program',
			6: 'Action program',
			7: 'Portrait mode',
			8: 'Landscape mode'
		},
		'months': {
			1:'Jan',2:'Feb',3:'Mar',
			4:'Apr',5:'May',6:'Jun',
			7:'Jul',8:'Aug',9:'Sep',
			10:'Oct',11:'Nov',12:'Dec'
		},
		'units': {
			'seconds': 's',
			'milimeters': 'mm'
		}
	}
});

Options — described

Main section


Option	Description
selector	String value. Any valid CSS selector that matches tag with `href` or `data-href` attribute. Both of attributes’ values should end with some of the following file extensions: jpg, jpeg, png, gif Example: `a.photograph-link` Default: `[href$=jpeg], [href$=jpg], [href$=png], [href$=gif], [data-href$=jpeg], [data-href$=jpg], [data-href$=png], [data-href$=gif]`
theme	String value, This option defines the {Re}Projector’s background. Value should be one of the following: `'dark'` `'light'` `'color'` Default: `'dark'` In case value `'color'` is selected, the element should contain an attribute `data-accent-color` with color value.

Section `projectionControls`


Option	Description
settings	Boolean value, describes if the settings button is visible. Default: `true`
close	Boolean value, describes if the close button is visible. Default: `true`
prevNext	Boolean value, describes if the navigation buttons for previous and next slide are visible. Default: `true`
exif	Boolean value, describes if the exif info toggle button (and the info itself) is visible. Default: `true`
description	Boolean value, describes if the description box is visible. Default: `true`
keyboard	subsection
└ theme	Boolean value, describes if the theme could be toggled with keyboard. Default: `true` More info at section `Mice, keyboard and other interactions`
└ exif	Boolean value, describes if the exif box could be toggled with keyboard. Default: `true` More info at section `Mice, keyboard and other interactions`
└ navigation	Boolean value, describes if the navigation could be handled by the keyboard. Default: `true` More info at section `Mice, keyboard and other interactions`
└ toggleControls	Boolean value, describes if the visibility of all the controls could be toggled with the keyboard. Default: `true` More info at section `Mice, keyboard and other interactions`
mouse	subsection
└ wheel	Boolean value, describes if the mouse wheel will navigate through the slides. Default: `true`
└ swipe	Boolean value, describes if the swipe gesture will navigate through the slides. Default: `true`
└ timeout	Floating point value (seconds, multiplied by 1000), describes the time after last mouse movement when projection controls will be hidden. This is only in case `toggle` option is set to value `'mousemove'`. Default: `3`
toggle	String value, one of the following: `'mousemove'` — visibility of projection controls will be hidden after the time defiend in option `timeout`. With new mousemove they will appear again. `'click'` — visibility of projection controls will be toggled with each click over the projected image. This options value is incompatible with `showNextOnClick` option. `'none'` or any other value to disable this option. Default: `'click'`
hideCursor	Boolean value, describes the visibility of mouse cursor when projection controls hides. Default: `true`
showNextOnClick	Boolean value, describes whether click over the projected image will cause navigation to next one. Default: `false`
zoomLinkBox	Boolean value, describes whether to zoom link box while clicked (experimental). Default: `false`

Section `callbacks`


Option	Description
open	Callback value, that will fire after projector opens. Default: `null`
close	Callback value, that will fire after projector closes. Default: `null`
changePhotograph	Callback value, that will fire after navigation to another image. Default: `null`
canvasClick	Callback value, that will fire after click over the canvas (box behind the image). Default: `null`

Section `translations`


Option	Description
exposurePrograms	List of values for exposure program (EXIF). Default: `0`: `'Not defined'`, `1`: `'Manual'`, `2`: `'Normal program'`, `3`: `'Aperture priority'`, `4`: `'Shutter priority'`, `5`: `'Creative program'`, `6`: `'Action program'`, `7`: `'Portrait mode'`, `8`: `'Landscape mode'` More info here.
months	Month names, short. Default: `1`: `'Jan'`, `2`: `'Feb'`, `3`: `'Mar'`, `4`: `'Apr'`, `5`: `'May'`, `6`: `'Jun'`, `7`: `'Jul'`, `8`: `'Aug'`, `9`: `'Sep'`, `10`: `'Oct'`, `11`: `'Nov'`, `12`: `'Dec'`
units	Milimeters and seconds, short. Default: `'seconds'`: `'s',` `'milimeters'`: `'mm'`

Mice, keyboard and other interactions

Mouse

Mouse wheel navigation through the slides is enabled by default.

Keyboard

Keybinding are available as follows:


Key(s)	Description
`F` key	Toggles fullscreen mode.
`H` key	Toggles the visibility of projection controls.
`I` key	Toggles the visibility of basic camera info box.
`1` key	Set background theme to `'dark'`.
`2` key	Set background theme to `'light'`.
`3` key	Set background theme to `'color'`.
`Arrow down` key	Navigate to next image.
`Arrow right` key	Navigate to next image.
`Space` key key	Navigate to next image.
`Arrow up` key	Navigate to previous image.
`Arrow left` key	Navigate to previous image.
`Space` key + `Shift` key	Navigate to previous image.
`Escape` key	By default, pressing `ESC` key will close the {Re}Projector. In case settings box opened, pressing `ESC` key will close first it, and after that new keypress of `ESC` will continue as by default. In case fullscreen activated, pressing `ESC` key will escape first fullscreen, and after that new keypress of `ESC` will continue as by default.

Methods

The following methods are available for any instance of ReProjector:


Method	Description
`close()`	Closes the projector’s canvas.
`addCanvasClass(classes)`	Adds class(es) to projector’s canvas in order to change visibility by user defined stylesheets. String should contain space separated list of classes.
`isVisible()`	Checks if projector’s canvas is visible.
`getCurrentLink()`	Returns the currenly projected element’s link (or other tag that holds the `href` or `data-href` attributes) as a DOMElement.
`setOpenCallback(callback)`	Sets the open callback for projector.
`setCloseCallback(callback)`	Sets the close callback for projector.
`setChangePhotographCallback(callback)`	Sets the callback that fires when the projector change the image.
`setCanvasClickCallback(callback)`	Sets the callback that fires when click over the canvas.
`expandToFullscreen()`	Sets the fullscreen mode for projector.
`exitFullscreen()`	Exit the fullscreen mode for projector.
`checkIfFullscreen()`	Check if projector is in fullscreen mode.
`getCurrentAccentColor()`	Gets the current accent color of element, if applicable.

Link data attributes

The link may contain the following data attributes:


Attribute	Description
`data-accent-color`	The theme (background) color in case `color` theme will be used with {Re}Projector. Example: `#abc270`
`data-title`	The title of the image.
`data-description`	The description of the image. It appears below the title.
`data-camera-make`	Manufacturer of the camera. (EXIF; not is use) Example: `NIKON CORPORATION`
`data-camera-model`	Model of the camera. (EXIF) Example: `NIKON D7000`
`data-camera-aperture`	The aperture value for the photo. (EXIF) Example: `56/10`
`data-camera-exposure`	The time value for the photo. (EXIF) Example: `1/60`
`data-camera-flength`	The focal length of the lens while the photo has been taken. (EXIF) Example: `2000/10`
`data-camera-iso`	The ISO sensitivity of the photo. (EXIF) Example: `200`
`data-camera-metering`	The exposure metering of the photo. (EXIF; still not in use) Example: `5`
`data-camera-program`	The exposure program of the photo. It is a number. More info here. (EXIF) Example: `3`
`data-camera-date`	Date when picture was taken. (EXIF) Example: `2017-06-30 11:24:40`

License

The MIT license.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.