<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="Home" id="page" name="page">>
	<div id="gList"></div>
	<input type="submit" value="Go">
</form>
{"id":58,"date":"2019-07-09T08:30:27","date_gmt":"2019-07-09T08:30:27","guid":{"rendered":"http:\/\/thetank.co.za\/ghp\/?page_id=58"},"modified":"2026-04-09T09:52:54","modified_gmt":"2026-04-09T07:52:54","slug":"home-2","status":"publish","type":"page","link":"https:\/\/www.ghphoto.co.za\/","title":{"rendered":"Home"},"content":{"rendered":"<p>[vc_row el_class=&#8221;heading&#8221;][vc_column][vc_column_text]<\/p>\n<h1 style=\"text-align: center;\">Welcome to gordon harris photographic<\/h1>\n<h5 style=\"text-align: center;\">Where Memories Live<\/h5>\n<p>[\/vc_column_text][vc_row_inner][vc_column_inner][vc_btn title=&#8221;Gradution Online Orders Click Here&#8221; style=&#8221;3d&#8221; color=&#8221;danger&#8221; size=&#8221;lg&#8221; align=&#8221;center&#8221; css_animation=&#8221;zoomIn&#8221; link=&#8221;url:https%3A%2F%2Fpre-orders.ghphoto.co.za%2F|||&#8221;][vc_separator][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][\/vc_column_inner][\/vc_row_inner][\/vc_column][vc_column][vc_column_text css_animation=&#8221;fadeIn&#8221; el_class=&#8221;pulsate&#8221;]<\/p>\n<h3 style=\"text-align: center;\"><a href=\"https:\/\/youtu.be\/UMLgQMACq1I\"><span style=\"color: #ff0000;\">Pre-order Prize Lucky Winner<\/span><\/a><\/h3>\n<p>[\/vc_column_text][\/vc_column][\/vc_row][vc_row el_class=&#8221;web-container&#8221;][vc_column][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_single_image image=&#8221;29&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; onclick=&#8221;custom_link&#8221; el_class=&#8221;por-img&#8221; link=&#8221;https:\/\/www.ghphoto.co.za\/index.php\/studio-photography\/&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><strong>STUDIO PHOTOGRAPHY<\/strong><\/p>\n<p style=\"text-align: center;\">We have two dedicated studio photographers who can assist you with photographs at our studio or they can quote you on a location shoot. We work on appointments only, please contact us for prices and availability.<\/p>\n<p>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_single_image image=&#8221;22&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; onclick=&#8221;custom_link&#8221; el_class=&#8221;por-img&#8221; link=&#8221;https:\/\/www.ghphoto.co.za\/index.php\/group-photography\/&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><strong>GROUP PHOTOGRAPHY<\/strong><\/p>\n<p style=\"text-align: center;\">We have custom made stands for the largest groups to studio setups and props for the smallest groups. We take group photos inside or outside, wherever the client requires.<\/p>\n<p>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_single_image image=&#8221;45&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; onclick=&#8221;custom_link&#8221; el_class=&#8221;por-img&#8221; link=&#8221;https:\/\/www.ghphoto.co.za\/index.php\/graduation-photography\/&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><strong>GRADUATIONS PHOTOGRAPHY<\/strong><\/p>\n<p style=\"text-align: center;\">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.<\/p>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_single_image image=&#8221;27&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; onclick=&#8221;custom_link&#8221; el_class=&#8221;por-img&#8221; link=&#8221;https:\/\/www.ghphoto.co.za\/index.php\/school-photography\/&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><strong>SCHOOL PHOTOGRAPHY<\/strong><\/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.<\/p>\n<p>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_single_image image=&#8221;431&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; onclick=&#8221;custom_link&#8221; el_class=&#8221;por-img&#8221; link=&#8221;https:\/\/www.ghphoto.co.za\/index.php\/function-photography\/&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><strong>FUNCTIONS PHOTOGRAPHY<\/strong><\/p>\n<p style=\"text-align: center;\">We specialise in professional photography of formal functions, corporate events, sporting days, social events. We look forward to taking exquisite photographs of your son or daughter dressed up for the matric dance.<\/p>\n<p>[\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_single_image image=&#8221;32&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; onclick=&#8221;custom_link&#8221; el_class=&#8221;por-img&#8221; link=&#8221;https:\/\/www.ghphoto.co.za\/index.php\/wedding-photography\/&#8221;][vc_column_text]<\/p>\n<p style=\"text-align: center;\"><strong>WEDDING PHOTOGRAPHY<\/strong><\/p>\n<p style=\"text-align: center;\">We pride ourselves of creating unsurpassed wedding photographs. We customise your perfect wedding package to suit your pocket, or you can choose a wedding package from one of our professionally set options.<\/p>\n<p>[\/vc_column_text][\/vc_column_inner][\/vc_row_inner][vc_separator color=&#8221;custom&#8221; accent_color=&#8221;#b9b9b9&#8243;][\/vc_column][\/vc_row][vc_row el_class=&#8221;heading&#8221;][vc_column][vc_column_text]<\/p>\n<h1 style=\"text-align: center;\">our works<\/h1>\n<h5 style=\"text-align: center;\">Where Memories Live<\/h5>\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;832,833&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571058852169{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;834,835,836&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571058894205{margin-bottom: 0px !important;}&#8221;][vc_gallery type=&#8221;image_grid&#8221; images=&#8221;837,838,839&#8243; img_size=&#8221;full&#8221; css=&#8221;.vc_custom_1571058937165{margin-bottom: 0px !important;}&#8221;][vc_column_text][\/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;heading&#8221;][vc_column][vc_column_text] Welcome to gordon harris photographic Where Memories Live [\/vc_column_text][vc_row_inner][vc_column_inner][vc_btn title=&#8221;Gradution Online Orders Click Here&#8221; style=&#8221;3d&#8221; color=&#8221;danger&#8221; size=&#8221;lg&#8221; align=&#8221;center&#8221; css_animation=&#8221;zoomIn&#8221; link=&#8221;url:https%3A%2F%2Fpre-orders.ghphoto.co.za%2F|||&#8221;][vc_separator][\/vc_column_inner][\/vc_row_inner][vc_row_inner][vc_column_inner][\/vc_column_inner][\/vc_row_inner][\/vc_column][vc_column][vc_column_text css_animation=&#8221;fadeIn&#8221; el_class=&#8221;pulsate&#8221;] Pre-order Prize Lucky Winner [\/vc_column_text][\/vc_column][\/vc_row][vc_row el_class=&#8221;web-container&#8221;][vc_column][vc_row_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_single_image image=&#8221;29&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; onclick=&#8221;custom_link&#8221; el_class=&#8221;por-img&#8221; link=&#8221;https:\/\/www.ghphoto.co.za\/index.php\/studio-photography\/&#8221;][vc_column_text] STUDIO PHOTOGRAPHY We have two dedicated studio photographers who can assist you with photographs at our studio or they can quote you on a location shoot. We work on appointments only, please contact us for prices and availability. [\/vc_column_text][\/vc_column_inner][vc_column_inner width=&#8221;1\/3&#8243;][vc_single_image image=&#8221;22&#8243; img_size=&#8221;full&#8221; alignment=&#8221;center&#8221; onclick=&#8221;custom_link&#8221; el_class=&#8221;por-img&#8221; link=&#8221;https:\/\/www.ghphoto.co.za\/index.php\/group-photography\/&#8221;][vc_column_text] GROUP PHOTOGRAPHY We have custom made stands for the largest groups to studio setups and props for the smallest groups. We take<a class=\"more-link\" href=\"https:\/\/www.ghphoto.co.za\/\">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\/58"}],"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=58"}],"version-history":[{"count":77,"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/pages\/58\/revisions"}],"predecessor-version":[{"id":1803,"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/pages\/58\/revisions\/1803"}],"wp:attachment":[{"href":"https:\/\/www.ghphoto.co.za\/index.php\/wp-json\/wp\/v2\/media?parent=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}