隐藏/禁用最后一张幻灯片上的“下一步”按钮和第一张幻灯片上的“上一页”按钮

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 = '<div id="lightbox">' + '<p class="close">&times;</p>' + '<div id="slideshow">' + '<ul></ul>' + '<div class="nav">' + '<a href="#prev" class="prev slide-nav">&#10094;</a>' + '<a href="#next" class="next slide-nav">&#10095;</a>' + '</div>' + '</div>' + '</div>'; //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( '<li>' + '<img src="' + $href + '">' + '</li>' ); }); } // 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; }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="gallery school"> <h3>School projects</h3> <a class="lightboxTrigger" href="portfolio/school/img1.jpg"><img class="thumb" src="portfolio/school/img1.jpg" alt="x"></a> <a class="lightboxTrigger" href="portfolio/school/img2.jpg"><img class="thumb" src="portfolio/school/img2.jpg" alt="x"></a> <a class="lightboxTrigger" href="portfolio/school/img3.jpg"><img class="thumb" src="portfolio/school/img3.jpg" alt="x"></a> </div> <div class="gallery personal"> <h3>Personal projects</h3> <a class="lightboxTrigger" href="portfolio/personal/img1.jpg"><img class="thumb" src="portfolio/school/img1.jpg" alt="x"></a> <a class="lightboxTrigger" href="portfolio/personal/img2.jpg"><img class="thumb" src="portfolio/school/img2.jpg" alt="x"></a> <a class="lightboxTrigger" href="portfolio/personal/img3.jpg"><img class="thumb" src="portfolio/school/img3.jpg" alt="x"></a> </div> 

Answer 1

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.