View.js
Buy
  • $10 Regular License
  • $30 Extended License
  • ? License Questions?
  • For use in non or commercial projects. Cannot resell or redistribute bundled in another app/service/site/theme.

    For use in one project/theme/app/service for resale or redistribution.

    For use in unlimited projects/themes/apps/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

    Features

    Setup and Running in a Minute

    1. <script src="view.js?auto"></script>

      Make sure you have a script to jquery in your document, prior to your view script

    2. <a class="view" href="awesome.jpg">…</a>

      Images will show in their own View. Make sure that link is pointing to an image :)

    3. <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

    • .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

    • <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.

    • <script>
      	new View( $('a[href]') );
      </script>

      View will automatically bind that set of images into a show

    • <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 :)

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

      Captions are always optional.

    Function/Options Reference

    • <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.

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

      Opens the View

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

      Closes the View

    • <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

    • <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