# Jquery photoApp Plugin

Load Demo

### 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!

How to use?

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