<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="Graduation Photography Gallery" id="page" name="page">>
	<div id="gList"></div>
	<input type="submit" value="Go">
</form>
{"id":180,"date":"2019-07-10T07:33:28","date_gmt":"2019-07-10T07:33:28","guid":{"rendered":"http:\/\/thetank.co.za\/ghp\/?page_id=180"},"modified":"2022-02-28T15:43:30","modified_gmt":"2022-02-28T13:43:30","slug":"graduation-photography-gallery","status":"publish","type":"page","link":"https:\/\/www.ghphoto.co.za\/index.php\/graduation-photography-gallery\/","title":{"rendered":"Graduation 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;\">GRADUATIONS PHOTOGRAPHY<\/h1>\n<p>[\/vc_column_text][\/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 GRADUATIONS PHOTOGRAPHY<\/strong><\/h1>\n<p>[\/vc_column_text][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><span style=\"color: #ed1b2e;\">&#8220;Photographs open doors into the past, but they also allow a look into the future.&#8221; &#8211; Sally Mann.<\/span><\/p>\n<p style=\"text-align: center;\">Hosting a Graduation or function?<br \/>\nWe will happily assist you with photographic services at big or small ceremonies anywhere in South Africa and neighbouring countries. We offer our services on the ceremony day and with our archive system which allows us to keep their photographs for a lifetime clients can order their photographs at any time.<br \/>\nContact us for different packages and prices.<\/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;892,893,1445&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1646055797329{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;895,896,897&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571060279420{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;899,900&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1646055438822{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;903,904,905&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1646055534191{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;906,907&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1646055582356{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;909,910&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1646055628423{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;912,913,915&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1646055654528{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;917,918&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1646055687292{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;919,920,921&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571060461007{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;923,924&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1646055766033{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][vc_row][vc_column][vc_raw_html]JTNDJTIxLS0lMjBGYWNlYm9vayUyMFBpeGVsJTIwQ29kZSUyMC0tJTNFJTIwJTBBJTNDc2NyaXB0JTNFJTIwJTBBJTIwJTIwJTIxZnVuY3Rpb24lMjhmJTJDYiUyQ2UlMkN2JTJDbiUyQ3QlMkNzJTI5JTIwJTBBJTIwJTIwJTdCaWYlMjhmLmZicSUyOXJldHVybiUzQm4lM0RmLmZicSUzRGZ1bmN0aW9uJTI4JTI5JTdCbi5jYWxsTWV0aG9kJTNGJTIwJTBBJTIwJTIwbi5jYWxsTWV0aG9kLmFwcGx5JTI4biUyQ2FyZ3VtZW50cyUyOSUzQW4ucXVldWUucHVzaCUyOGFyZ3VtZW50cyUyOSU3RCUzQiUyMCUwQSUyMCUyMGlmJTI4JTIxZi5fZmJxJTI5Zi5fZmJxJTNEbiUzQm4ucHVzaCUzRG4lM0JuLmxvYWRlZCUzRCUyMTAlM0JuLnZlcnNpb24lM0QlMjcyLjAlMjclM0IlMjAlMEElMjAlMjBuLnF1ZXVlJTNEJTVCJTVEJTNCdCUzRGIuY3JlYXRlRWxlbWVudCUyOGUlMjklM0J0LmFzeW5jJTNEJTIxMCUzQiUyMCUwQSUyMCUyMHQuc3JjJTNEdiUzQnMlM0RiLmdldEVsZW1lbnRzQnlUYWdOYW1lJTI4ZSUyOSU1QjAlNUQlM0IlMjAlMEElMjAlMjBzLnBhcmVudE5vZGUuaW5zZXJ0QmVmb3JlJTI4dCUyQ3MlMjklN0QlMjh3aW5kb3clMkMlMjBkb2N1bWVudCUyQyUyN3NjcmlwdCUyNyUyQyUyMCUwQSUyMCUyMCUyN2h0dHBzJTNBJTJGJTJGY29ubmVjdC5mYWNlYm9vay5uZXQlMkZlbl9VUyUyRmZiZXZlbnRzLmpzJTI3JTI5JTNCJTIwJTBBJTIwJTIwZmJxJTI4JTI3aW5pdCUyNyUyQyUyMCUyNzE5OTU3Nzk3MTE1MDgzOSUyNyUyOSUzQiUyMCUwQSUyMCUyMGZicSUyOCUyN3RyYWNrJTI3JTJDJTIwJTI3UGFnZVZpZXclMjclMjklM0IlMjAlMEElM0MlMkZzY3JpcHQlM0UlMjAlMEElM0Nub3NjcmlwdCUzRSUzQ2ltZyUyMGhlaWdodCUzRCUyMjElMjIlMjB3aWR0aCUzRCUyMjElMjIlMjBzdHlsZSUzRCUyMmRpc3BsYXklM0Fub25lJTIyJTIwJTBBJTIwJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZ3d3cuZmFjZWJvb2suY29tJTJGdHIlM0ZpZCUzRDE5OTU3Nzk3MTE1MDgzOSUyNmV2JTNEUGFnZVZpZXclMjZub3NjcmlwdCUzRDElMjIlMjAlMEElMkYlM0UlM0MlMkZub3NjcmlwdCUzRSUyMCUwQSUzQyUyMS0tJTIwRW5kJTIwRmFjZWJvb2slMjBQaXhlbCUyMENvZGUlMjAtLSUzRSUyMCUwQSUzQ3AlM0VJJTIwYW0lMjByYXclMjBodG1sJTIwYmxvY2suJTNDYnIlMkYlM0VDbGljayUyMGVkaXQlMjBidXR0b24lMjB0byUyMGNoYW5nZSUyMHRoaXMlMjBodG1sJTNDJTJGcCUzRQ==[\/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] GRADUATIONS PHOTOGRAPHY [\/vc_column_text][\/vc_column][\/vc_row][vc_row el_class=&#8221;web-container&#8221;][vc_column][vc_column_text] PROFESSIONAL GRADUATIONS PHOTOGRAPHY [\/vc_column_text][vc_column_text] &#8220;Photographs open doors into the past, but they also allow a look into the future.&#8221; &#8211; Sally Mann. Hosting a Graduation or function? We will happily assist you with photographic services at big or small ceremonies anywhere in South Africa and neighbouring countries. We offer our services on the ceremony day and with our archive system which allows us to keep their photographs for a lifetime clients can order their photographs at any time. Contact us for different packages and prices. [\/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;892,893,1445&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1646055797329{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;895,896,897&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571060279420{margin-bottom: 0px !important;}&#8221;][vc_gallery<a class=\"more-link\" href=\"https:\/\/www.ghphoto.co.za\/index.php\/graduation-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\/180"}],"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=180"}],"version-history":[{"count":15,"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/pages\/180\/revisions"}],"predecessor-version":[{"id":1429,"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/pages\/180\/revisions\/1429"}],"wp:attachment":[{"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}