Q: How do you specify the $('a').click event to select only specific  tags, not ALL  tags? I added the photoswipe plugin that searches for all my photos with <a> tags and if clicked on, then it turns the photo into full screen. I got it to work, but now my navigation bar (which has <a> tags) triggers the photoswipe plugin when clicked on.
In the photoswipe click event, I have tried doing $("a[href*='photo']").click(function(event) so that the click event only fires when a has an href containing the word photo -- this didn't solve it. 
Photoswipe Plugin:
<script>
    'use strict';

    /* global jQuery, PhotoSwipe, PhotoSwipeUI_Default, console */

    (function($){

      // Init empty gallery array
      var container = [];

      // Loop over gallery items and push it to the array
      $('#gallery').find('div.item').each(function(){
        var $link = $(this).find('a'),
            item = {
              src: $link.attr('href'),
              w: $link.data('width'),
              h: $link.data('height'),
              title: $link.data('caption')
            };
        container.push(item);
      });

      // Define click event on gallery item
      $("a").click(function(event){

        // Prevent location change
        event.preventDefault();

        // Define object and gallery options
        var $pswp = $('.pswp')[0],
            options = {
              index: $(this).parent('div.item').index(),
              bgOpacity: 0.85,
              showHideOpacity: true
            };

        // Initialize PhotoSwipe
        var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
        gallery.init();
      });

    }(jQuery));
  </script>

Photo HTML:
<div id="gallery" class="gallery grid" itemscope itemtype="http://schema.org/ImageGallery">
  <div class="item" data-color="photography" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
            <a href="photo/IMG_2322.JPG" data-caption="This is a caption" data-width="1200" data-height="900" itemprop="contentUrl">
              <img class="crop lazy" data-src="photo/IMG_2322.JPG" itemprop="thumbnail" alt="Image description">
            </a> 
   </div>
</div>

My navigation bar:
<nav class="navigation">
  <a href="#" class="menu-icon">
    <i class="fa fa-bars"></i>
  </a>
  <ul class="main-navigation" role="navigation">
  <div id="nav-x" class="menu-icon">&Cross;</div>
       <li><a href="index.html">Home</a></li> 
       <li><a href="shop.html">Shop</a></li>
  </div>
  </ul>
</nav>


A: Instead of using "a" tag add class="a-photos" to all photos and trigger by class might fix your problem.

A: $(".a-photos").click(function(event){
    // Prevent location change
    event.preventDefault();
    // Define object and gallery options
    var $pswp = $('.pswp')[0],
        options = {
          index: $(this).parent('div.item').index(),
          bgOpacity: 0.85,
          showHideOpacity: true
        };
    // Initialize PhotoSwipe
    var gallery = new PhotoSwipe($pswp, PhotoSwipeUI_Default, container, options);
    gallery.init();
  });

