services for resale or redistribution.

A simple, lightweight, jQuery photo viewer for the web

Start clicking to see it in action!

Toggle CSS changes below and try them out

Illustration by Cory Godbey Photography by Dave Hill
Transitions No Transitions
Shadows No Shadows

Features

Keyboard Navigation
Animate with CSS
Scales to the Viewport
Mobile Ready
Smart Loading
Swipe to View Coming in v2

Setup and Running in a Minute

Put this script anywhere in your document
```
<script src="view.js?auto"></script>
```
Make sure you have a script to jquery in your document, prior to your view script
Add a "view" class to your links
```
<a class="view" href="awesome.jpg">…</a>
```
Images will show in their own View. Make sure that link is pointing to an image :)

If you want image shows/groups, simply add a "rel" attribute to your links

<a class="view" rel="warrior-gear" href="klingon_dagger.jpg">…</a>
<a class="view" rel="warrior-gear" href="albino_mythril_laden_puma.jpg">…</a>
<a class="view" rel="warrior-gear" href="elven_bow.jpg">…</a>
<a class="view" rel="warrior-gear" href="stout_brew.jpg">…</a>
<a class="view" rel="warrior-gear" href="blue_paint.jpg">…</a>

If you want your images to show as a show or a group, use the same rel attribute to group them.

CSS Snippets Show

Transitions — to enable transitions as seen above, use the following CSS

.viewer li{
	-webkit-transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
	-moz-transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
	transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);
}
.viewer .caption{
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity 1.5s ease-in-out;
	-moz-transition: opacity 1.5s ease-in-out;
	transition: opacity 1.5s ease-in-out;
}
.viewer .current .caption{
	opacity: 100;
	visibility: visible;
}

View doesn't come with transitions built in, but its easy to add them via CSS

Advanced Setup Show

Put this script in your document
```
<script src="view.js"></script>
```
Notice, you didn't put the ?auto variable in. ?auto causes view to look for <a class="view"> links. Yeah, you got it hondo, ?auto is for the n00bs.
Setup a View: Using Links to Images
```
<script>
	new View( $('a[href]') );
</script>
```
View will automatically bind that set of images into a show
Setup a View: Using an Array of Sources
```
<script>
	new View( [ 'haters-gonna-hate.jpg', 'rhymenocerous.png' ] );
</script>
```
If you pass multiple image sources in, those items become sets. Cool! Now you don't have to have links :)

Setup a View: Using JSON

<script>
	new View( 
		[
			{ 
				src: 'haters-gonna-hate.jpg',
				caption: 'Haters Gonna Hate'
			},
			{ 
				src: 'rhymenocerous.png'
			}
		] 
	);
</script>

Captions are always optional.

Function/Options Reference

function next() / prev()
```
<script>
	var v = new View( ['haters-gonna-hate.jpg', 'rhymenocerous.png'] );
	v.next();
	v.prev();
</script>
```
Advances the View (if it has multiple images) to the next or previous image within that show.

function open()

<script>
	var v = new View( ['haters-gonna-hate.jpg', 'rhymenocerous.png'] );
	v.open();
</script>

Opens the View

function close()

<script>
	var v = new View( ['haters-gonna-hate.jpg', 'rhymenocerous.png'] );
	v.close();
</script>

Closes the View

function show( img )

<script>
	var v = new View( ['haters-gonna-hate.jpg', 'rhymenocerous.png'] );
	v.show( 'rhymenocerous.png' );
	v.show( $('img') );
</script>

Shows (centers) the specified image within a View

options

<script>
var v = new View( 
	['haters-gonna-hate.jpg', 'rhymenocerous.png'],
	{
		loadAhead: 10, //Number of images to load in advance of the current. Default: 5
		css:  { selector: rules } //I don't suggest you put CSS in this way. Just use your document :)
	}
);
</script>

License/Support Show

Browser Support

Modern browsers, including Internet Explorer 7+
Regular License

Story: Noah built a website for his wild animal photography business and wants to add View.js. Noah needs the regular license. Melanie is a designer and photographer. Currently, she is working on a website design for Nike and a photoblog for her photography. She feels View.js would be perfect for showcasing Nike's shoes as well as her own photos. Melanie needs the regular license.

By purchasing View.js, you agree to the following: View.js remain property of Rogie King. View.js may be used by the licensee in any personal or commercial projects. View.js may not be resold or redistributed. For example: packaged in an application where it could be downloaded for free, such as an open-source project or other application where View.js is bundled along with other files.

Unless you have our prior written consent, you must not directly or indirectly license, sub-license, sell or resell or provide for free View.js or offer to do any of these things unless View.js is incorporated into a work you have created. All of these things are referred to as Resale.

For example, with a Regular License, View.js could be used in:
- A personal website
- A commercial website
Extended License

Story: Jack built a WordPress theme with View.js and wants to offer it for free on WordPress.org's theme repository. Jack needs the extended license. If Jack chooses to sell another theme, he should buy the extended license again, for that theme.

By purchasing View.js, you agree to the following: View.js remain property of Rogie King. View.js may be used by the licensee in any personal or commercial projects. View.js may be resold or redistributed in one single project or application where it could be downloaded for free, where View.js is bundled along with other files.

Unless you have our prior written consent, you must not directly or indirectly license, sub-license, sell or resell or provide for free View.js or offer to do any of these things unless View.js is incorporated into a work you have created. All of these things are referred to as Resale.

For example, with an Extended License, View.js could be used in:
- A personal website
- A commercial website
- One single website theme for resale
- One single web application for resale

Features

Setup and Running in a Minute

CSS Snippets Show

Advanced Setup Show

Function/Options Reference

License/Support Show

Browser Support

Regular License

Extended License

made by Rogie