Maybe the easiest way to create an image gallery with jquery is using magnifc popup because with just few lines of code you will be able to create a nice image gallery with pagination buttons and fully compatible with all major browsers. 

To be able to implement this functionality you will have to download magnific popup library from here and add js and css files to your website. Next we will have to create a HTML structure for our gallery and initialize magnific popup to open the gallery on you click on any image.

Create Image Gallery With jQuery and magnificPopup

First step is to create the HTML structure for our gallery.

<ul class="gallery">
  <li>
    <a href="/img.jpg">
      <img src="/img.jpg">
    </a>
  </li>
  <li>
    <a href="/img2.jpg">
      <img src="/img2.jpg">
    </a>
  </li>
  <li>
    <a href="/img3.jpg">
      <img src="/img3.jpg">
    </a>
  </li>
  <li>
    <a href="/img4.jpg">
      <img src="/img4.jpg">
    </a>
  </li>
  <li>
    <a href="/img5.jpg">
      <img src="/img5.jpg">
    </a>
  </li>
  <li>
    <a href="/img6.jpg">
      <img src="/img6.jpg">
    </a>
  </li>
</ul>

As you can see we have a simple list with images and every images is in <a> element because this will be our trigger for the gallery. Now open your js file and add the following lines of code.

jQuery('.gallery').magnificPopup({
    delegate: 'a', // child items selector, by clicking on it popup will open
    type: 'image'
});