Как прокручивать элементы в массиве в другом div, выбирая элемент в JQuery

Question

Я создал галерею с CSS и html. Я использовал JQuery для создания эффекта лайтбокса, так что, когда я нажимаю на меньшую версию изображения, он открывается в лайтбокс. Все миниатюры находятся в контейнере div и каждый в своем собственном div. Я не могу правильно работать, это прокрутка к следующему изображению. У меня есть массив, который потянет все изображения div, но когда я нажимаю на свиток вместо прокрутки изображения, он заставляет другие divs исчезать. Любая помощь будет высоко ценится. Я новичок в JQuery и javascript.

ОБНОВЛЕНО: я обновил HTML, чтобы изображения отображались в демонстрации. Как вы можете видеть, если вы нажмете на изображение, откроется лайтбокс с увеличенным изображением. Когда вы нажимаете на стрелки, вместо того, чтобы перейти к следующему изображению, он скрывает под ним div и изображения.

$(document).ready(function() { 
 
\t $("img").click(function(){ 
 
\t \t $src=$(this).attr("src"); 
 
\t \t $title=$(this).attr("title"); 
 
\t \t $alt=$(this).attr("alt"); 
 
     
 
     if(!$("#lightbox").length>0){ 
 
\t \t \t $('body').append("<div id='lightbox'><span class='closer'>X</span><span class='nextimg'>></span><span class='previmg'><</span><div class='lightbox_container'><img src='' title='' alt=''><p>" + $title + "</p></div></div>"); 
 
      
 
      $("#lightbox img").attr("src",$src); 
 
\t \t \t $("#lightbox img").attr("alt",$alt); 
 
\t \t \t $("#lightbox img").attr("title",$title); 
 
\t \t \t $("#lightbox").show(); 
 
      
 
      
 
     var picArray = []; 
 
\t \t \t $('div.lightboxsm img').each(function(){ 
 
\t \t \t \t picArray.push(this); 
 
\t \t \t \t var id = $(this).attr('id'); 
 
\t \t \t \t var src = $(this).attr('src'); 
 
\t \t \t \t var alt = $(this).attr('alt'); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t var i = 0; 
 
\t \t \t displayPic(0); //show the first photo initially 
 
\t \t \t 
 
\t \t \t $('.previmg').click(function(){ 
 
\t \t \t \t i--; 
 
\t \t \t \t displayPic(i); 
 
\t \t \t \t $('#lightbox img').attr(src); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t $('.nextimg').click(function(){ 
 
\t \t \t \t i++; 
 
\t \t \t \t displayPic(i); 
 
\t \t \t \t $('#lightbox img').attr(src); 
 
\t \t \t }); 
 
\t \t \t 
 
\t \t \t function displayPic(i) {   
 
\t \t \t \t $('#lightbox img').empty(); 
 
\t \t \t \t $('#lightbox img').append(picArray[i]); 
 
\t \t \t 
 
\t \t \t \t if(i == 0) 
 
\t \t \t \t \t $('.previmg').hide(); 
 
\t \t \t \t else 
 
\t \t \t \t \t $('.previmg').show();  
 
\t \t \t 
 
\t \t \t \t if(i == picArray.length-1) 
 
\t \t \t \t \t $('.nextimg').hide(); 
 
\t \t \t \t else 
 
\t \t \t \t \t $('.nextimg').show(); 
 
\t \t \t } 
 
      
 
     }else{ 
 
\t \t \t $("#lightbox img").attr("src",$src); 
 
\t \t \t $("#lightbox img").attr("alt",$alt); 
 
\t \t \t $("#lightbox img").attr("title",$title); 
 
\t \t \t $("#lightbox").show(); 
 
\t \t } 
 
\t }); 
 
    
 
    $("body").on('click', '#lightbox .closer',function(){ 
 
\t \t $("#lightbox").hide(); 
 
\t }); 
 
    });

#lightbox_container { 
 
\t width:100%; 
 
\t text-align:center; 
 
\t 
 
} 
 

 

 
.lightboxsm { 
 
\t width: 175px; 
 
    height: 175px; 
 
    overflow: hidden; 
 
\t /*float:left;*/ 
 
\t display:inline-block; 
 
\t padding:10px; 
 
\t position:relative; 
 
\t cursor:pointer; 
 
} 
 

 
.lightboxsm img{ 
 
\t width:auto; 
 
    height: 175px; 
 
\t object-fit: cover; 
 
} 
 

 
#lightbox{ 
 
\t position:fixed; 
 
\t height:100%; 
 
\t width:100%; 
 
\t background: rgba(0, 0, 0, 0.5); 
 
\t left:0; 
 
\t right:0; 
 
\t top:0; 
 
\t bottom:0; 
 
\t z-index:200; 
 
} 
 

 
#lightbox img{ 
 
\t max-width:80%; 
 
\t max-height:80%; 
 
\t position:fixed; 
 
\t left:0; 
 
\t right:0; 
 
\t top:0; 
 
\t bottom:0; 
 
\t margin:auto; 
 
} 
 

 
.closer { 
 
\t display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 

 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 

 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
\t float:right; 
 
\t margin:5% 10%; 
 
\t z-index:250; 
 
} 
 

 
.closer:hover { 
 
\t cursor:pointer; 
 
} 
 

 
.nextimg { 
 
\t display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 

 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 

 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
\t float:right; 
 
\t margin:5% 10%; 
 
\t z-index:600; 
 
\t clear:right; 
 
} 
 

 
.nextimg:hover { 
 
\t cursor:pointer; 
 
} 
 

 
.previmg { 
 
\t display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 

 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 

 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
\t float:left; 
 
\t margin:5% 10%; 
 
\t z-index:600; 
 
\t clear:left; 
 
} 
 

 
.previmg:hover { 
 
\t cursor:pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="lightbox_container"> 
 
      <div class="lightboxsm" id="img1"> 
 
       <img src="http://2017.sunkissed-villas.com/images/1.png" alt="1"/> 
 
      </div> 
 
     
 
      <div class="lightboxsm" id="img2"> 
 
       <img src="http://2017.sunkissed-villas.com/images/2.png" alt="2"/> 
 
      </div> 
 
      
 
      <div class="lightboxsm" id="img3"> 
 
       <img src="http://2017.sunkissed-villas.com/images/3.png"/> 
 
      </div> 
 
      
 
      <div class="lightboxsm" id="img4"> 
 
       <img src="http://2017.sunkissed-villas.com/images/4.png" alt="4"/> 
 
      </div> 
 
      
 
      <div class="lightboxsm" id="img5"> 
 
       <img src="http://2017.sunkissed-villas.com/images/5.png" alt="5"/> 
 
      </div> 
 
     </div>

Answer 1

$(document).ready(function() { 
 
    // First get an array of all the lightbox images 
 
    var $images = $("div.lightboxsm img"); 
 

 
    // The index of the current image from the above array 
 
    var index; 
 

 
    // Then assign a click event for all of them 
 
    $images.each(function(i, img) { 
 
     $(img).click(function() { 
 
      showImage(i); // this line uses closures, learn about it on https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures 
 
     }); 
 
    }); 
 

 
    // The function that will take an index and then show its corresponding image from $images in the lightbox 
 
    function showImage(i) { 
 
     index = i; // set the index 
 
     if(index < 0) return; // or if(index < 0) index = $images.length - 1; // if you want to loop 
 
     if(index >= $images.length) return; // or if(index >= $images.legth) index = 0; // if you want to loop 
 

 
     // set the src of the lightbox image to the same src of the current image 
 
     $("#lightbox img").attr("src", $images.eq(index).attr("src")); 
 

 
     // remove the following two lines if you want to loop 
 
     if(index == 0) $("#lightbox .previmg").hide(); 
 
     else   $("#lightbox .previmg").show(); 
 

 
     // remove the following two lines if you want to loop 
 
     if(i == $images.length - 1) $("#lightbox .nextimg").hide(); 
 
     else      $("#lightbox .nextimg").show(); 
 
     
 
     $("#lightbox").show(); 
 
    } 
 

 
    // initialize the lightbox element if not existing (only do it once instead of doing it every time an image is clicked) 
 
    if(!$("#lightbox").length){ 
 
     $("body").append("<div id='lightbox'><span class='closer'>X</span><span class='nextimg'>></span><span class='previmg'><</span><div class='lightbox_container'><img src='' title='' alt=''></div></div>"); 
 

 
     // hide it 
 
     $("#lightbox").hide(); 
 
    } 
 

 
    
 
    // Show the pevious image 
 
    $("body").on("click", "#lightbox .previmg", function() { 
 
     index--; 
 
     showImage(index); 
 
    }); 
 
    
 
    // Show the next image 
 
    $("body").on("click", "#lightbox .nextimg", function() { 
 
     index++; 
 
     showImage(index); 
 
    }); 
 

 
    // Close the lightbox 
 
    $("body").on("click", "#lightbox .closer",function(){ 
 
     $("#lightbox").hide(); 
 
    }); 
 
});

#lightbox_container { 
 
    width: 100%; 
 
    text-align: center; 
 
} 
 
.lightboxsm { 
 
    width: 175px; 
 
    height: 175px; 
 
    overflow: hidden; 
 
    /*float:left;*/ 
 
    display: inline-block; 
 
    padding: 10px; 
 
    position: relative; 
 
    cursor: pointer; 
 
} 
 
.lightboxsm img { 
 
    width: auto; 
 
    height: 175px; 
 
    object-fit: cover; 
 
} 
 
#lightbox { 
 
    position: fixed; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    z-index: 200; 
 
} 
 
#lightbox img { 
 
    max-width: 80%; 
 
    max-height: 80%; 
 
    position: fixed; 
 
    left: 0; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto; 
 
} 
 
.closer { 
 
    display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
    float: right; 
 
    margin: 5% 10%; 
 
    z-index: 250; 
 
} 
 
.closer:hover { 
 
    cursor: pointer; 
 
} 
 
.nextimg { 
 
    display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
    float: right; 
 
    margin: 5% 10%; 
 
    z-index: 600; 
 
    clear: right; 
 
} 
 
.nextimg:hover { 
 
    cursor: pointer; 
 
} 
 
.previmg { 
 
    display: block; 
 
    height: 60px; 
 
    width: 60px; 
 
    line-height: 60px; 
 
    -moz-border-radius: 30px; 
 
    border-radius: 30px; 
 
    background-color: black; 
 
    color: white; 
 
    text-align: center; 
 
    font-size: 2em; 
 
    float: left; 
 
    margin: 5% 10%; 
 
    z-index: 600; 
 
    clear: left; 
 
} 
 
.previmg:hover { 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="lightbox_container"> 
 
    <div class="lightboxsm" id="img1"> 
 
    <img src="http://2017.sunkissed-villas.com/images/1.png" alt="1" /> 
 
    </div> 
 

 
    <div class="lightboxsm" id="img2"> 
 
    <img src="http://2017.sunkissed-villas.com/images/2.png" alt="2" /> 
 
    </div> 
 

 
    <div class="lightboxsm" id="img3"> 
 
    <img src="http://2017.sunkissed-villas.com/images/3.png" /> 
 
    </div> 
 

 
    <div class="lightboxsm" id="img4"> 
 
    <img src="http://2017.sunkissed-villas.com/images/4.png" alt="4" /> 
 
    </div> 
 

 
    <div class="lightboxsm" id="img5"> 
 
    <img src="http://2017.sunkissed-villas.com/images/5.png" alt="5" /> 
 
    </div> 
 
</div>