CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Marie C.
Marie C.

Reputation: 37

Jquery and Javascript scroll image on click from outside divs

I have a lightbox that I built where you can on a div with an image and then the image opens larger with a lightbox effect in a new div. I want to have arrows where you can click to scroll forward and back through the images in the other outside divs. I am new to JQuery and javascript and I have tried every way I can think of and I am just missing something on how to get this to work. I have attached the basics of my code as reference.

The high and show code is not working either because it is not detecting the other divs for some reason.

$(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").show();
			
			
			
			
			//*********************************************************
			if(!$(this).parent("#lightboxsm img").next().length>0){
				$(".nextimg").show();
			} else {
				$(".nextimg").hide();
			};
			
			$("body").on('click','.nextimg',function(){
				$newsrc=$("#lightbox img").attr("src");
				$newtitle=$("#lightbox img").attr("title");
				$newalt=$("#lightbox img").attr("alt");
				
				
				$("#lightboxsm img").next("lightbox img").attr('src', $newsrc);
				
			});
			
			//*********************************************************
  
  }else{
			$("#lightbox img").attr("src",$src);
			$("#lightbox img").attr("alt",$alt);
			$("#lightbox img").attr("title",$title);
			$("#lightbox").show();
		}
	});
	
	
	//Closes the lightbox***************************************
	$("body").on('click', '#lightbox .closer',function(){
		$("#lightbox").hide();
	})
    
    });
.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>

Upvotes: 1

Views: 170

Answers (1)

user7252292
user7252292

Reputation:

The problem was that the nextimg selector was not accessing the parent before it was getting the next() so there was no next element. Let me know if the updated snippet works. I also made it so that it hid the next/prev button if there were no next or previous images. 

$(document).ready(function() {
  $("img").click(function(){
    $(this).addClass('selected')
    $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>");
    			
      $("body").on('click','.nextimg',function(){
        $newimg=$('.selected').parent().next().find('img')
        $('.selected').removeClass('selected')
        $newimg.addClass('selected')
    	$("#lightbox img").attr("src", $newimg.attr("src"));
        checkPrevNext();
      });
      
      $("body").on('click','.previmg',function(){
        $newimg=$('.selected').parent().prev().find('img')
        $('.selected').removeClass('selected')
        $newimg.addClass('selected')
    	$("#lightbox img").attr("src", $newimg.attr("src"));
        checkPrevNext();
      });
    }
      $("#lightbox").show();
      $("#lightbox img").attr("src",$src);
      $("#lightbox img").attr("alt",$alt);
      $("#lightbox img").attr("title",$title);
      checkPrevNext();
   });
    	
  $("body").on('click', '#lightbox .closer',function(){
    $("#lightbox").hide();
  })
  
  function checkPrevNext() {
    if($('.selected').parent().next().find('img').length > 0) {
      $(".nextimg").show();
    } else {
      $(".nextimg").hide();
    };
    
    if($('.selected').parent().prev().find('img').length > 0) {
      $(".previmg").show();
    } else {
      $(".previmg").hide();
    };
  }
});
.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>

Upvotes: 1

Related Questions