Getting a url from within a div using Jquery

Question

I'm trying to create my own lightbox gallery and I feel that I'm almost there.

My gallery is currently a grid set up, where the preview of each cell in the grid will be an img, where the img url is placed via CSS. Now, unless I can pull the url used in the css code, I'm instead placing an anchor tag in the html code. I am then using this to try and pull the url from the html mark up and place it in the img src for the lightbox.

The codes for clicking on a cell and displaying the lightbox works, but not inserting the html from the markup into the lightbox..

This was hard to explain, so hopefully the code below gives you an idea.

$(document).ready(function($) {

	$('.image-item').click(function(e) {
		e.preventDefault();

		var image_href = $(this).attr("href");
	
		$("#lightbox").css("display", "block");
		$('#content').html('');
		
	});

	$('body').on('click', '#lightbox', function() {
		$("#lightbox").css("display", "none");
	});

});

#gallery {
	height: 1200px;
	position: relative;
	width: 90%;
	margin-left: 5%;
	padding-top: 75px;
}

.image-item {
	display: flex; 
	justify-content: center;
	align-items: center;
	font-family: Thasadith;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 3px;
	color: #fff;
	text-transform: uppercase;
	background-color: steelblue;
}

#images-gallery {
	display: grid;
	height: 1150px;
	grid-template-rows: repeat(4, 1fr);
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	width: 100%;
}

.image-item.one {
	grid-row: span 2;
	grid-column: span 2;
}

.image-item.two {
	grid-row: span 3;
	grid-column: span 3;
}

.image-item.three {
	grid-row: span 3;
	grid-column: span 2;
}

.image-item.four {
	grid-row: span 3;
	grid-column: span 1;
}

#lightbox {
    position:fixed;
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: black;
    opacity: 0.5;
    text-align: center;
    z-index: 2;
    display: none;
}

#lightbox p {
    text-align:right; 
    color:#fff; 
    margin-right:20px; 
    font-size:12px; 
}

#lightbox img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:940px;
}



		
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
        
	

    
 	   Click to close

Quentin · Accepted Answer

You are triying to retrieve the href value of your img tag.

var image_href = $(this).attr("href");

Should be...

var image_href = $(this).children('a').attr("href");

$(document).ready(function($) {

	$('.image-item').click(function(e) {
		e.preventDefault();

		var image_href = $(this).children('a').attr("href");
	
		$("#lightbox").css("display", "block");
		$('#content').html('');
		
	});

	$('body').on('click', '#lightbox', function() {
		$("#lightbox").css("display", "none");
	});

});

#gallery {
	height: 1200px;
	position: relative;
	width: 90%;
	margin-left: 5%;
	padding-top: 75px;
}

.image-item {
	display: flex; 
	justify-content: center;
	align-items: center;
	font-family: Thasadith;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 3px;
	color: #fff;
	text-transform: uppercase;
	background-color: steelblue;
}

#images-gallery {
	display: grid;
	height: 1150px;
	grid-template-rows: repeat(4, 1fr);
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	width: 100%;
}

.image-item.one {
	grid-row: span 2;
	grid-column: span 2;
}

.image-item.two {
	grid-row: span 3;
	grid-column: span 3;
}

.image-item.three {
	grid-row: span 3;
	grid-column: span 2;
}

.image-item.four {
	grid-row: span 3;
	grid-column: span 1;
}

#lightbox {
    position:fixed;
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    background-color: black;
    opacity: 0.5;
    text-align: center;
    z-index: 2;
    display: none;
}

#lightbox p {
    text-align:right; 
    color:#fff; 
    margin-right:20px; 
    font-size:12px; 
}

#lightbox img {
    box-shadow:0 0 25px #111;
    -webkit-box-shadow:0 0 25px #111;
    -moz-box-shadow:0 0 25px #111;
    max-width:940px;
}



		
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
            
            	
            
        
	

    
 	   Click to close

By the way, you might want to set your urls as data value instead of using empty links. It would shorten the DOM.

Getting a url from within a div using Jquery

Answers (1)

Related Questions