I had combined FixedNav (fixed navigation menu for one page webpages) with PhotoSwipe (JavaScript gallery) on the same webpage.
After doing that, when a link in the navigation menu is clicked, it scrolls down to the relevant section of the page. It does scroll as it should, but for some reason it also opens the PhotoSwipe gallery.
Clicking on the menu links should just scroll to the relevant area, not trigger the PhotoSwipe gallery.
I had used all the default settings from both FixedNav and PhotoSwipe and put them together on a single page to illustrate the issue:
https://jsfiddle.net/5pw1rem9/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Adtile Fixed Nav</title>
<meta name="author" content="Adtile">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="css/styles.css">
<title>CodePen - PhotoSwipe Demo</title>
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/photoswipe.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/photoswipe/4.1.0/default-skin/default-skin.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Bitter:400,700,400italic'>
<link rel="stylesheet" href="./style.css">
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<link rel="stylesheet" href="css/ie.css">
<![endif]-->
<script src="js/responsive-nav.js"></script>
</head>
<body>
<header>
<a href="#home" class="logo" data-scroll>Fixed Nav</a>
<nav class="nav-collapse">
<ul>
<li class="menu-item active"><a href="#home" data-scroll>Home</a></li>
<li class="menu-item"><a href="#about" data-scroll>About</a></li>
<li class="menu-item"><a href="#projects" data-scroll>Projects</a></li>
<li class="menu-item"><a href="#blog" data-scroll>Blog</a></li>
<li class="menu-item"><a href="http://www.google.com" target="_blank">Google</a></li>
</ul>
</nav>
</header>
<section id="home">
<h1>Fixed Nav</h1>
<!-- partial:index.partial.html -->
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<h1 class="text-center">
<small><em>..and a PhotoSwipe Demo</em></small>
</h1>
<!-- Galley wrapper that contains all items -->
<div id="gallery" class="gallery" itemscope itemtype="http://schema.org/ImageGallery">
<!-- Use figure for a more semantic html -->
<figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<!-- Link to the big image, not mandatory, but usefull when there is no JS -->
<a href="https://unsplash.it/1200/900/?image=702" data-caption="Sea side, south shore<br><em class='text-muted'>© Dominik Schröder</em>" data-width="1200" data-height="900" itemprop="contentUrl">
<!-- Thumbnail -->
<img src="https://unsplash.it/400/300/?image=702" itemprop="thumbnail" alt="Image description">
</a>
</figure>
In your function, you have an on-click event for 'a' where a are not exclusively gallery links; the on-click function is affecting your menu links also. This is what is causing your issue.
To resolve the issue, you need to be more specific in defining which links you want to be affected by the on-click event. In your case, all you have to do is insert the div id "#gallery" before a, as all the links in your gallery div are images, like so:
$('#gallery a').click(function(event) {
//etc..
See (very slightly updated) fiddle
However, if there were other links (aside from images) in the gallery div, this would not be an ideal solution, so you should also consider using a class to identify your gallery group of images, and use the class instead.
Hope this helps