title: Hide/disable 'Next' button on last slide and 'Prev' button on first slide
body: <p>I found a script online and used it to make lightbox and slideshow for images on my website. The problem is that it doesn't have the option to disable next button on last slide and prev button on first slide. So I am posting the code here. </p>
  
  <p>My gallery consists of few sections which represent the albums (school projects, personal projects, etc). I wrote the script in JS: when you click on a certain section name, it hides one section and shows another. When I list the images, it jumps from the last image in one section to the first image in the next section.</p>
  
  <p>So not only that I need help with next and prev buttons on last and first image, but I also need the script to recognize the amount of images in one section and hide the next button on the last slide in that section (also for the prev button). Keep in mind that I am a complete beginner in JS. I am making this website for my school project.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// Lightbox
  jQuery(document).ready(function($) {
  
    // global variables for script
    var current, size;
  
    $('.lightboxTrigger').click(function(e) {
  
      // prevent default click event
      e.preventDefault();
  
      // grab href from clicked element
      var image_href = $(this).attr("href");
  
      // determine the index of clicked trigger
      var slideNum = $('.lightboxTrigger').index(this);
  
      // find out if #lightbox exists
      if ($('#lightbox').length &gt; 0) {
        // #lightbox exists
        $('#lightbox').fadeIn(300);
        // #lightbox does not exist - create and insert (runs 1st time only)
      } else {
        // create HTML markup for lightbox window
        var lightbox =
            '&lt;div id="lightbox"&gt;' +
            '&lt;p class="close"&gt;&amp;times;&lt;/p&gt;' +
            '&lt;div id="slideshow"&gt;' +
            '&lt;ul&gt;&lt;/ul&gt;' +
            '&lt;div class="nav"&gt;' +
            '&lt;a href="#prev" class="prev slide-nav"&gt;&amp;#10094;&lt;/a&gt;' +
            '&lt;a href="#next" class="next slide-nav"&gt;&amp;#10095;&lt;/a&gt;' +
            '&lt;/div&gt;' +
            '&lt;/div&gt;' +
            '&lt;/div&gt;';
  
        //insert lightbox HTML into page
        $('body').append(lightbox);
  
        // fill lightbox with .lightboxTrigger hrefs in .gallery
        $('.gallery').find('.lightboxTrigger').each(function() {
          var $href = $(this).attr('href');
          $('#slideshow ul').append(
            '&lt;li&gt;' +
            '&lt;img src="' + $href + '"&gt;' +
            '&lt;/li&gt;'
          );
        });
  
      }
  
      // setting size based on number of objects in slideshow
      size = $('#slideshow ul &gt; li').length;
  
      // hide all slide, then show the selected slide
      $('#slideshow ul &gt; li').hide();
      $('#slideshow ul &gt; li:eq(' + slideNum + ')').show();
  
      // set current to selected slide
      current = slideNum;
    });
  
    //Click anywhere on the page to get rid of lightbox window
    $('body').on('click', '#lightbox', function() { // using .on() instead of .live(). more modern, and fixes event bubbling issues
      $('#lightbox').fadeOut(300);
    });
  
    // navigation prev/next
    $('body').on('click', '.slide-nav', function(e) {
  
      // prevent default click event, and prevent event bubbling to prevent lightbox from closing
      e.preventDefault();
      e.stopPropagation();
  
      var $this = $(this);
      var dest;
  
      // looking for .prev
      if ($this.hasClass('prev')) {
        dest = current - 1;
        if (dest &lt; 0) {
          dest = size - 1;
        }
      } else {
        // in absence of .prev, assume .next
        dest = current + 1;
        if (dest &gt; size - 1) {
          dest = 0;
        }
      }
  
      // fadeOut curent slide, FadeIn next/prev slide
      $('#slideshow ul &gt; li:eq(' + current + ')').fadeOut(750);
      $('#slideshow ul &gt; li:eq(' + dest + ')').fadeIn(750);
  
      // update current slide
      current = dest;
    });
  
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="gallery school"&gt;          
             &lt;h3&gt;School projects&lt;/h3&gt;
              &lt;a class="lightboxTrigger" href="portfolio/school/img1.jpg"&gt;&lt;img class="thumb" src="portfolio/school/img1.jpg" alt="x"&gt;&lt;/a&gt;
              &lt;a class="lightboxTrigger" href="portfolio/school/img2.jpg"&gt;&lt;img class="thumb" src="portfolio/school/img2.jpg" alt="x"&gt;&lt;/a&gt;
              &lt;a class="lightboxTrigger" href="portfolio/school/img3.jpg"&gt;&lt;img class="thumb" src="portfolio/school/img3.jpg" alt="x"&gt;&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;div class="gallery personal"&gt;
             &lt;h3&gt;Personal projects&lt;/h3&gt;
              &lt;a class="lightboxTrigger" href="portfolio/personal/img1.jpg"&gt;&lt;img class="thumb" src="portfolio/school/img1.jpg" alt="x"&gt;&lt;/a&gt;
              &lt;a class="lightboxTrigger" href="portfolio/personal/img2.jpg"&gt;&lt;img class="thumb" src="portfolio/school/img2.jpg" alt="x"&gt;&lt;/a&gt;
              &lt;a class="lightboxTrigger" href="portfolio/personal/img3.jpg"&gt;&lt;img class="thumb" src="portfolio/school/img3.jpg" alt="x"&gt;&lt;/a&gt;
            &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>