Hide/disable 'Next' button on last slide and 'Prev' button on first slide

Question

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.

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.

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.

// 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 > 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 =
          '' +
          '×' +
          '' +
          '' +
          '' +
          '❮' +
          '❯' +
          '' +
          '' +
          '';

      //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(
          '' +
          '' +
          ''
        );
      });

    }

    // setting size based on number of objects in slideshow
    size = $('#slideshow ul > li').length;

    // hide all slide, then show the selected slide
    $('#slideshow ul > li').hide();
    $('#slideshow ul > 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 < 0) {
        dest = size - 1;
      }
    } else {
      // in absence of .prev, assume .next
      dest = current + 1;
      if (dest > size - 1) {
        dest = 0;
      }
    }

    // fadeOut curent slide, FadeIn next/prev slide
    $('#slideshow ul > li:eq(' + current + ')').fadeOut(750);
    $('#slideshow ul > li:eq(' + dest + ')').fadeIn(750);

    // update current slide
    current = dest;
  });

});


          
           School projects
            
            
            
          

          
           Personal projects

Xhynk · Accepted Answer

To slide through the currently selected gallery, you need to get the slide number determined by the index of the trigger inside the parent gallery

I achieved this with

var slideNum = $(this).closest('.gallery').find('.lightboxTrigger').index(this);

What this does is finds the closest .gallery parent, and then indexes the triggers, instead of indexing all of them from the start.

Here's a working codepen: https://codepen.io/xhynk/pen/GQVWpm?editors=1010

Note: You didn't have any styles so I cobbled together some rather ugly ones real quick, also since your images were relative, I used "lorempixel" - so the actual images won't show up properly, and the slideshow will have 6 of the same image most likely, just for demonstration purposes.

The things of note in the JS are in the initial $('.lightboxTrigger').click(function(e) {

   if( slideNum == 0 ){
        $('.prev').hide();
    } else {
        $('.prev').show();
    }

    if( slideNum == size - 1 ){
        $('.next').hide();
    } else {
        $('.next').show();
    }

And similar code in the prev/next nav: $('body').on('click', '.slide-nav', function(e) {

    if( current == 0 ){
        $('.prev').hide();
    } else {
        $('.prev').show();
    }

    if( current == size - 1 ){
        $('.next').hide();
    } else {
        $('.next').show();
    }

As well as the indexing based on parent gallery mentioned above

var slideNum = $(this).closest('.gallery').find('.lightboxTrigger').index(this);

The gallery is also only filled with the images from the parent gallery instead of all of them, using:

$(this).closest('.gallery').find('.lightboxTrigger').each(function() {

And lastly this code will still fadeOut the gallery when closed as you had it, but it will also destroy it with remove after the fade is completed. This allows a new gallery to be indexed and used, without allowing a user to slide through them in an interconnected manner.

Hide/disable 'Next' button on last slide and 'Prev' button on first slide

Answers (1)

Related Questions

Hide/disable &#39;Next&#39; button on last slide and &#39;Prev&#39; button on first slide

Answers (1)

Related Questions

Hide/disable 'Next' button on last slide and 'Prev' button on first slide