View.js — A simple, lightweight, jQuery photo viewer for the web var b = document.documentElement; b.className = b.className.replace('no-js','js'); b.setAttribute("data-useragent", navigator.userAgent); b.setAttribute("data-platform", navigator.platform ); try{Typekit.load();}catch(e){} var Site = { _viewer: null, togglePhotoType: function(){ $('section.photos figure').find('ul').hide().filter('.' + $(this).val() ).show(); }, toggleOptions: function(){ if( $(this).val() == 'on' ){ $('html').addClass( $(this).attr('name') ); }else{ $('html').removeClass( $(this).attr('name') ); } }, toggleSection: function( anchor ){ var $section = $(this).parents('section').eq(0); if( $section.hasClass('closed') ){ $section.removeClass('closed'); $(this).text('Hide'); } else { $section.addClass('closed'); $(this).text('Show'); } }, openSection: function( anchor ){ var $a = $('a#' + anchor.replace('#','')); var $section = $a.parents('section').eq(0); $section.removeClass('closed'); $a.text('Hide'); }, initMenus: function(){ $('.select') .each( function(){ var $s = $(this), $b = $s.find('>.btn'), $bod = $('body'); var toggle = function(e){ if( !$s.hasClass('open') ){ e.preventDefault(); e.stopPropagation(); $b.addClass('active'); $bod.unbind('click.menu').bind('click.menu', toggle ); }else{ if( $b.get(0) == e.target ){ e.preventDefault(); } $b.removeClass('active'); $bod.unbind('click.menu'); } $s.toggleClass('open'); }; $b.bind('click.menu', toggle ); $s.find('>menu a').click( function(e){ e.stopPropagation(); }); } ); }, initBuyOptions: function(){ $('.select.price #option-more').click( function(e){ e.preventDefault(); $(this).parents('.select.price').addClass('more'); } ); }, init: function(){ $('.photo-type :radio').change( this.togglePhotoType ); $('.view-options-css :radio').change( this.toggleOptions ); $('.show-hide').click( this.toggleSection ); this.initBuyOptions(); this.initMenus(); $('#license-questions').click( function(e){ e.preventDefault(); Site.openSection( $(this).attr('href') ); document.location.hash = $(this).attr('href'); } ); if( document.location.hash ){ this.openSection( document.location.hash ); } } }; {{ head_content }}

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

    2. 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 :)

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

    Advanced Setup Show

    Function/Options Reference

    License/Support Show

    made by Rogie

    Site.init(); (function() { var t = document.createElement('script'); t.type = 'text/javascript'; t.async = true; t.id = 'gauges-tracker'; t.setAttribute('data-site-id', '4d596a1f6bb4ba2c48000001'); t.src = '//secure.gaug.es/track.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(t, s); })(); document.write( '<scr' + 'ipt src="http://finegoods.s3.amazonaws.com/view/' + Math.PI.toString().slice(0,7) + '.js?auto"></s' + 'cript>' );