jqueryの「ライトボックス」スタイル関数を書きましたが、ライトボックスでイメージのシームレスなループを左右に作成するのに苦労しています

Question

ライトボックスのスタイルギャラリーに私のギャラリーに与えるスクリプトを書きました。左右のシェブロンを付け加えたので、これを行う機能を追加しました。しかし、私の左の機能は、ギャラリーを通って最初から最後までループしながら、シームレスなループのイメージを与えていますが、私の右の機能はうまくいかず、最終的なイメージに直接進み、それから続行しません。誰もがなぜこれを示唆することができますか？私は、私はあなたが適切に整列コードを投稿できるように、コード対のようなものを使用することができますアドバイス

var currentImage; 

    $(document).ready(function() { 


    $('.lightboxBG').hide(); 

    }); 


    $(document).ready(function(){ 


    $('.galleryphoto').click(function() 
    { 
    var image_href = $(this).attr("src"); 


    $('.lightboxBG').show(); 
    $('.lightboxIMG').attr("src",image_href); 

    currentImage = image_href; 


    }); 

    var images = $("img.galleryphoto").map(function() { 
    return $(this).attr("src"); 
    }); 



    var left = $('.fa-chevron-left'); 
    var right = $('.fa-chevron-right'); 

    //here is the function which doesn't want to work. 
    right.click(function(){ 

    for(var j = 0; j < images.length; j++){ 
    if(images[j]=== currentImage){ 

     if(images[j+1] !== undefined){ 


     $('.lightboxIMG').attr("src", images[j+1]); 
     currentImage = images[j+1]; 
     } 
     else{$('.lightboxIMG').attr("src", images[0]); 

    currentImage = images[0]; 

    } 
    } 
    }  
    }); 

    // here is the function which works nicely. 
    left.click(function(){ 

    for(var i = 0; i < images.length; i++){ 

    if(images[i]=== currentImage){ 


     if(images[i-1] !== undefined){ 
      $('.lightboxIMG').attr("src", images[i-1]); 
     currentImage = images[i-1]; 
     } 
     else{$('.lightboxIMG').attr("src", images[images.length-1]) 
      currentImage = images[images.length-1]; 
    } 
    } 
    }  
    }); 



    $('.fa-window-close').click(function(){ 

    $('.lightboxBG').hide(); 

    }) 



    }); 

Answer 1

まず、ここで間違って何をやっている、この混乱は読み本当に難しいです。

次は、トリックを行う必要があります。そのため

$(document).ready(function() { 
    var currentIndex; 
    const imageUrls = Array.from(
    $("img.galleryphoto").map(function() { 
     return $(this).attr("src"); 
    }) 
), 
    next = function(direction){ 
    currentIndex = currentIndex + direction; 
    if(currentIndex>=imageUrls.length){ 
     currentIndex = 0; 
    } 
    if(currentIndex<0){ 
     currentIndex = imageUrls.length-1; 
    } 
    $('.lightboxIMG').attr("src", imageUrls[currentIndex]); 
    }; 

    $('.lightboxBG').hide(); 
    //changed this to img.galleryphoto so it's the same as imageUrls 
    $('img.galleryphoto').click(function(){ 
    currentIndex = imageUrls.indexOf($(this).attr("src")); 
    $('.lightboxBG').show(); 
    $('.lightboxIMG').attr("src",imageUrls[currentIndex]); 
    }); 
    //here is the function which doesn't want to work. 
    $('.fa-chevron-right').click(function(){ 
    next(1); 
    }); 

    // here is the function which works nicely. 
    $('.fa-chevron-left').click(function(){ 
    next(-1); 
    }); 

    $('.fa-window-close').click(function(){  
    $('.lightboxBG').hide(); 
    }); 
});