Jquery photoApp Plugin

The photoApp plugin is a jquery plugin that gives you:

Sort hundreds of photos based on the day, month or year each photo was taken
Fullscreen view of each photo when an photo is clicked (tapped on mobile)
Date of each photo at the top of the page and a view of all thumbnail photos at the bottom of the page
Using swipe or keyboard to go to previous or next photos
More coming soon!

The photoApp plugin uses the HTML time tags <time> datetime="2014-04-23" /></time> that is the placed as the sibling of each image <img src="img/img1_thumb.jpg" /> and provides sorting feature bases on day, month and year.

If you don't want the plugin to sort the photos when the page load, set this option to false: sortOnLoad: false;. If you don't want to have the sorting feature activated at all, set this option to false as well: activateSort: false;. In this case, the buttons related to sorting will be taken out of the page.

When photos are sorted by day (default):

When photos are sorted by month:

When photos are sorted by year:

When a photo is clicked:

When sortOnLoad is `false;`

How to use photoApp

Link with the JS and CSS files:

              <head>
                  <!-- photoApp stylesheet -->
                  <link rel="stylesheet" href="css/normalize.css" />
                  <link rel="stylesheet" href="css/photoApp.css" />
                  
                  <!-- minified jquery & photoApp plugin script -->
                  <script src="js/jquery.min.js"></script>
                  <script src="js/jquery.photoApp.js"></script>
                  
                  <script>
                        $(document).ready(function() {
                            $("#photoCollection").photoApp(); 
                        });
                  </script>
              </head>

For now, the HTML needs to follow specific markup:

             
              <!-- For the demo, each photo's original size is 1680 x 1050 pixels -->
              <!-- For the demo, each thumbnail's original size is 370 x 231 pixels -->
              
              <div id="photoCollection">
                  <div data-src="img/img1.jpg">
                      <img src="img/img1_thumb.jpg" />
                      <time datetime="2014-04-23"></time>
                  </div>
                  <div data-src="img/img2.jpg">
                      <img src="img/img2_thumb.jpg" />
                      <time datetime="2013-04-12"></time>
                  </div>
                  <div data-src="img/img3.jpg">
                      <img src="img/img3_thumb.jpg" />
                      <time datetime="2013-01-26"></time>
                  </div>
              </div>

Load Demo