Flashyourweb.com

A RESTful G3 Gallery

Now a fullfledged jQuery plugin

In this demo I'm using jQuery to communicate w/ my G3 via the REST interface
also used in this example:

Responsive Design that looks great on PCs, tablets and phones.
Try resizing your browser.

@Questions/Comments: join the discussion in the GMC forums

 

Get the code here

 

Minimal javascript in the <head />


<script src="code/modernizr.js"></script>
<script src="code/respond.min.js"></script>

CSS - style.css is for page specific styles(your stylesheet will do)


<link href="code/style.css" type="text/css" rel="stylesheet" />
<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->
<link href="code/ajaxGallery.css" type="text/css" rel="stylesheet" />                    
                            

HTML - you should be able to place this anywhere in your page


<div id="gallery">
    <h2>Javascript required to view this content.</h2>
</div>
                            

Javascript - after content for faster page load


<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="code/klass.min.js"></script>
<script src="code/code.photoswipe.jquery-3.0.4.min.js"></script>
<script src="code/jquery.ba-hashchange.min.js"></script>
<script src="code/jquery.colorbox-min.js"></script>
<script src="code/media.template.js"></script>
<script src="code/g3.rest.2.0.js"></script>
<script>
    /**
     * options:
     * url: url to our G3 REST interface - required
     * code: url to the directory with included code directory - required
     * initial: g2_itemId of the default/start album - default: 1
     * max_items_per_page: max number of items per page - default: 20
     */
    jQuery(document).ready(function(){
        jQuery('#gallery').g3rest({
            url: 'http://www.flashyourweb.com/gallery3/rest',
            code: 'http://www.flashyourweb.com/gallery2/embed_samples/'
        });
    });
</script>
                            

Hey! I should put a footer here.