How to scroll through items in array in another div by selecting item in JQuery

Question

I have built a gallery with CSS and html. I used JQuery to build a lightbox effect so that when I click on a smaller version of an image it opens in the lightbox. All of the thumbnails are in a container div and each within their own div. What I cannot get to work correctly is the scrolling to the next image. I have an array that will pull all of the div images, but when I click on the scroll instead of scrolling the picture it makes the other divs disappear. Any help will be much appreciated. I am new to JQuery and javascript.

UPDATED: I have updated the HTML so that the images show in the demo. As you can see, if you click on an image, a lightbox opens with the image enlarged. When you click on the arrows, instead of it going to the next image, it hides the divs and images below it.

$(document).ready(function() {
	$("img").click(function(){
		$src=$(this).attr("src");
		$title=$(this).attr("title");
		$alt=$(this).attr("alt");
      
       if(!$("#lightbox").length>0){
			$('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);
			$("#lightbox img").attr("alt",$alt);
			$("#lightbox img").attr("title",$title);
			$("#lightbox").show();
         
         
         var picArray = [];
			$('div.lightboxsm img').each(function(){
				picArray.push(this);
				var id = $(this).attr('id');
				var src = $(this).attr('src');
				var alt = $(this).attr('alt');
			});
			
			var i = 0;
			displayPic(0); //show the first photo initially
			
			$('.previmg').click(function(){
				i--;
				displayPic(i);
				$('#lightbox img').attr(src);
			});
			
			$('.nextimg').click(function(){
				i++;
				displayPic(i);
				$('#lightbox img').attr(src);
			});
			
			function displayPic(i) {        
				$('#lightbox img').empty();
				$('#lightbox img').append(picArray[i]);
			
				if(i == 0) 
					$('.previmg').hide();
				else  
					$('.previmg').show();     
			
				if(i == picArray.length-1)
					$('.nextimg').hide();
				else
					$('.nextimg').show();   
			}
         
         }else{
			$("#lightbox img").attr("src",$src);
			$("#lightbox img").attr("alt",$alt);
			$("#lightbox img").attr("title",$title);
			$("#lightbox").show();
		}
	});
  
  $("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>

Your demo doesn't work. Please make a complete, minimal, verifiable demo of the project's problem. stackoverflow.com/help/mcve — Michael Coker
– Michael Coker, Commented Feb 4, 2017 at 22:37
don't just copy in your entire program! It is a Microsoft course to read and understand your question. ;-P — Farzin Kanzi
– Farzin Kanzi, Commented Feb 4, 2017 at 23:07
Thank you, I did not copy the entire thing. I only copied the relevant code for the issue. I have updated the links with the images so they show now. The same works except for the part I cannot figure out. — Marie C.
– Marie C., Commented Feb 4, 2017 at 23:14

ibrahim mahrir · Accepted Answer · 2017-02-05 03:39:16Z

$(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>

Collectives™ on Stack Overflow

How to scroll through items in array in another div by selecting item in JQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related