<style>
	.image-box{
	    display: inline-block;
	    float: left;
	    outline-offset: -2px;
	    position: relative;
	}
	.overlay {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100%;
		width: 100%;
		opacity: 0;
		transition: .5s ease;
		background-color: #000;
		/*box-shadow: inset 0px 0px 100px #000000;*/
	}
	.image-box:hover .overlay {
		opacity: 0.5;
		/*transform: scale(1.5);*/
	}
	#image-box-pop{
		/*opacity: 1.5;*/
		/*z-index: 1000000000;*/
		/*transform: scale(1.5) !important;*/
		border: 5px solid #fff;
		/*position: absolu;*/
		width: fit-content;
	    margin: auto;
	    height: max-content;
	    position: relative;
	}
	.text {
		color: white;
		font-size: 20px;
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		text-align: center;
	}
	@media screen and (max-width: 767px) {
		.image-box{
			width:100% !important;
		}
	}
</style>
<script>


jQuery(window).load(function(){
	//get main element
	var mainElement = document.getElementsByClassName('wpb_gallery_slides');
	console.log('Elements found: ' + mainElement.length);
	//loop through each element instance
	var gallery = [];
	var gi = 1;
	for (x = 0; x < mainElement.length; x++) {
		console.log('main width: ' + mainElement[x].width);
		console.log(mainElement[x].firstElementChild.children);
		//finds photo elements
		var test = (mainElement[x].firstElementChild.children);
		console.log (test);
		console.log('Element ' + (x+1) +' length: ' + test.length);
		var newArr = '';
		var count=0;
		var newImages = [];
		var totalHeight = 0;
		//loop through each photo element
		for (a = 0; a < test.length; a++) {
			count++;
				console.log( test[a].firstElementChild.firstElementChild.naturalWidth + " x " + test[a].firstElementChild.firstElementChild.naturalHeight);
				console.log('Name: ' + test[a].firstElementChild.firstElementChild.alt);
				console.log(a);
				//console.log(getImageDimentions(test[a].children[0]));
				newArr += test[a].firstElementChild.outerHTML;
				gallery.push(
					test[a].firstElementChild.href
					)
				jQuery("#gList").append('<input name="fotoArry[]" value="' + test[a].firstElementChild.href + '" type="text">')
				newImages.push({
					'width' : test[a].firstElementChild.firstElementChild.naturalWidth,
					'height': test[a].firstElementChild.firstElementChild.naturalHeight
				});
				totalHeight += test[a].firstElementChild.firstElementChild.naturalHeight;
		}
		console.log(newImages);
		console.log('total height: ' + totalHeight);
		console.log('average height: ' + (totalHeight / test.length));
		var averageHeight = totalHeight / test.length;
		var ratio = 0;
		var scaledImages = [];
		var totalWidth = 0;
		for (a = 0; a < test.length; a++) {
			scaledImages[a] = {};
			ratio =  averageHeight / newImages[a].height;
			scaledImages[a].height = newImages[a].height * ratio;
			scaledImages[a].width = (newImages[a].width * ratio);
			totalWidth += scaledImages[a].width;
			
		}
		console.log(scaledImages);
		console.log('total width: ' + totalWidth);
		var percentages = [];
		var gap = 0;
		var height = 0;
		var output = '<div style="">';
		height = ((totalHeight / test.length) / totalWidth) * 100;
		console.log(height);
		for (a = 0; a < test.length; a++) {
			percentages[a] = (scaledImages[a].width / totalWidth) * 100;
			
			//gap = (2 / percentages[a]);
			output += '<div class="image-box" style="width:' + percentages[a] + '%;"><div class="overlay"><div class="text">' + test[a].firstElementChild.firstElementChild.alt + '</div><div class="index" style="display:none;">'+gi+'</div></div><img style="min-width:100%;" src="' + test[a].firstElementChild.firstElementChild.src + '"></div>';
			gi++;
		}
		output += '</div>';
		console.log(output);
		
		mainElement[x].innerHTML = output;
		
		jQuery(".image-box").click(function(){
		  var popimage = jQuery(this).html();
		  jQuery("#popup").html("");
		  jQuery("#popup").fadeIn();
		  jQuery("#passedPhoto").val(popimage);
		  jQuery("#garray").val(gallery);
		  jQuery("#popup").html(`<div id="image-box-pop" onclick="jQuery( '#target' ).submit();">` + popimage + `</div>`);
		  
		});
	}
	// jQuery('#gList').append('<input name="active-img" value="`+ popimage +`">');
	//console.log(gallery);
	document.getElementById("myText").value = gallery;
});
</script>
<style>
	#popup{
		position:fixed;
		width: 100vw;
		text-align:center;
		/*height:100vh;*/
		left:0px;
		top:6vh;
		display:none;
	}
	#popup img{
		height:90vh;
	}
	#close-img{
		top:0;
		right: 0;
		font-size: 3em;
		z-index:9000;
		width:fit-content;
		height:fit-content;
		background-color:#fff;
		border: 2px solid #000;
		border-radius: 20px;
	}
	@media only screen and (max-width: 425px) {
		#popup{
			top:3vh;
		}
		#popup img{
			height:auto;
			width:100vw;
		}
	}
</style>

<div id="popup" onclick="jQuery('#popup').fadeOut();"></div>
<form method="post" action="https://www.ghphoto.co.za/index.php/mac/#mac-height"  id="target" style="opacity:0;">
	<input type="hidden" value="" id="passedPhoto" name="passedPhoto">
	<input type="hidden" value="School Photography Gallery" id="page" name="page">>
	<div id="gList"></div>
	<input type="submit" value="Go">
</form>
{"id":199,"date":"2019-07-10T07:49:28","date_gmt":"2019-07-10T07:49:28","guid":{"rendered":"http:\/\/thetank.co.za\/ghp\/?page_id=199"},"modified":"2020-03-05T08:53:42","modified_gmt":"2020-03-05T06:53:42","slug":"school-photography-gallery","status":"publish","type":"page","link":"https:\/\/www.ghphoto.co.za\/index.php\/school-photography-gallery\/","title":{"rendered":"School Photography Gallery"},"content":{"rendered":"<p>[vc_row el_class=&#8221;banner-heading&#8221;][vc_column][vc_column_text]<\/p>\n<h1 style=\"text-align: center;\">SCHOOL PHOTOGRAPHY<\/h1>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=&#8221;721&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][\/vc_column][\/vc_row][vc_row el_class=&#8221;web-container&#8221;][vc_column][vc_column_text]<\/p>\n<h1 style=\"text-align: center;\"><strong>PROFESSIONAL SCHOOL PHOTOGRAPHY<\/strong><\/h1>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><span style=\"color: #ed1b2e;\">&#8220;Photography takes an instant out of time, altering life by holding it still.&#8221; &#8211; Dorothea Lange.<br \/>\n<\/span><\/p>\n<p style=\"text-align: center;\">Contact us for a unique approach to school photography. We photograph every child, they can then choose to place an order either for the set package or re-order their own sizes. We archive the images which makes it possible for you to order at any time, even if it is in 5 years from now.<\/p>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_class=&#8221;web-container&#8221;][vc_column][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;966,967,968&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571061277411{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;969,970,971&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571061304490{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;972,973,974&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571061331506{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;975,976,977,978&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571061391973{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;979,980,981&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571061417485{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;982,983,984&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571061448089{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;985,986,987&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571061472621{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;988,989,990&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571061494014{margin-bottom: 0px !important;}&#8221;][vc_column_text][\/vc_column_text][vc_column_text]<\/p>\n<h6 style=\"text-align: center;\"><span style=\"color: #ed1b2e;\">Load More Images<\/span><\/h6>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_raw_html]JTNDJTIxLS0lMjBGYWNlYm9vayUyMFBpeGVsJTIwQ29kZSUyMC0tJTNFJTIwJTBBJTNDc2NyaXB0JTNFJTIwJTBBJTIwJTIwJTIxZnVuY3Rpb24lMjhmJTJDYiUyQ2UlMkN2JTJDbiUyQ3QlMkNzJTI5JTIwJTBBJTIwJTIwJTdCaWYlMjhmLmZicSUyOXJldHVybiUzQm4lM0RmLmZicSUzRGZ1bmN0aW9uJTI4JTI5JTdCbi5jYWxsTWV0aG9kJTNGJTIwJTBBJTIwJTIwbi5jYWxsTWV0aG9kLmFwcGx5JTI4biUyQ2FyZ3VtZW50cyUyOSUzQW4ucXVldWUucHVzaCUyOGFyZ3VtZW50cyUyOSU3RCUzQiUyMCUwQSUyMCUyMGlmJTI4JTIxZi5fZmJxJTI5Zi5fZmJxJTNEbiUzQm4ucHVzaCUzRG4lM0JuLmxvYWRlZCUzRCUyMTAlM0JuLnZlcnNpb24lM0QlMjcyLjAlMjclM0IlMjAlMEElMjAlMjBuLnF1ZXVlJTNEJTVCJTVEJTNCdCUzRGIuY3JlYXRlRWxlbWVudCUyOGUlMjklM0J0LmFzeW5jJTNEJTIxMCUzQiUyMCUwQSUyMCUyMHQuc3JjJTNEdiUzQnMlM0RiLmdldEVsZW1lbnRzQnlUYWdOYW1lJTI4ZSUyOSU1QjAlNUQlM0IlMjAlMEElMjAlMjBzLnBhcmVudE5vZGUuaW5zZXJ0QmVmb3JlJTI4dCUyQ3MlMjklN0QlMjh3aW5kb3clMkMlMjBkb2N1bWVudCUyQyUyN3NjcmlwdCUyNyUyQyUyMCUwQSUyMCUyMCUyN2h0dHBzJTNBJTJGJTJGY29ubmVjdC5mYWNlYm9vay5uZXQlMkZlbl9VUyUyRmZiZXZlbnRzLmpzJTI3JTI5JTNCJTIwJTBBJTIwJTIwZmJxJTI4JTI3aW5pdCUyNyUyQyUyMCUyNzE5OTU3Nzk3MTE1MDgzOSUyNyUyOSUzQiUyMCUwQSUyMCUyMGZicSUyOCUyN3RyYWNrJTI3JTJDJTIwJTI3UGFnZVZpZXclMjclMjklM0IlMjAlMEElM0MlMkZzY3JpcHQlM0UlMjAlMEElM0Nub3NjcmlwdCUzRSUzQ2ltZyUyMGhlaWdodCUzRCUyMjElMjIlMjB3aWR0aCUzRCUyMjElMjIlMjBzdHlsZSUzRCUyMmRpc3BsYXklM0Fub25lJTIyJTIwJTBBJTIwJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZ3d3cuZmFjZWJvb2suY29tJTJGdHIlM0ZpZCUzRDE5OTU3Nzk3MTE1MDgzOSUyNmV2JTNEUGFnZVZpZXclMjZub3NjcmlwdCUzRDElMjIlMjAlMEElMkYlM0UlM0MlMkZub3NjcmlwdCUzRSUyMCUwQSUzQyUyMS0tJTIwRW5kJTIwRmFjZWJvb2slMjBQaXhlbCUyMENvZGUlMjAtLSUzRSUyMCUwQQ==[\/vc_raw_html][\/vc_column][\/vc_row]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[vc_row el_class=&#8221;banner-heading&#8221;][vc_column][vc_column_text] SCHOOL PHOTOGRAPHY [\/vc_column_text][\/vc_column][\/vc_row][vc_row][vc_column][vc_single_image image=&#8221;721&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221;][\/vc_column][\/vc_row][vc_row el_class=&#8221;web-container&#8221;][vc_column][vc_column_text] PROFESSIONAL SCHOOL PHOTOGRAPHY [\/vc_column_text][vc_column_text] &#8220;Photography takes an instant out of time, altering life by holding it still.&#8221; &#8211; Dorothea Lange. Contact us for a unique approach to school photography. We photograph every child, they can then choose to place an order either for the set package or re-order their own sizes. We archive the images which makes it possible for you to order at any time, even if it is in 5 years from now. [\/vc_column_text][\/vc_column][\/vc_row][vc_row el_class=&#8221;web-container&#8221;][vc_column][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;966,967,968&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571061277411{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;969,970,971&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571061304490{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;972,973,974&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571061331506{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221;<a class=\"more-link\" href=\"https:\/\/www.ghphoto.co.za\/index.php\/school-photography-gallery\/\">Read More &rarr;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/pages\/199"}],"collection":[{"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/comments?post=199"}],"version-history":[{"count":8,"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/pages\/199\/revisions"}],"predecessor-version":[{"id":1110,"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/pages\/199\/revisions\/1110"}],"wp:attachment":[{"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}