What's the point of having thumbnails if you're just going to have the user download them plus the full sized images up front? The whole idea behind thumbnails is that you present the user with a smaller version so they can decide for themselves whether or not they want to take the time/spend the bandwidth to view the larger image.
With a few modifications to your markup, you can make this a lot easier for yourself:
<div class="thumbs_img_wrapper" id="gallery">
<img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_1.jpg" data-full-path="path/to/original_1.jpg" />
<img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_2.jpg" data-full-path="path/to/original_2.jpg" />
<img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_3.jpg" data-full-path="path/to/original_3.jpg" />
<img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_4.jpg" data-full-path="path/to/original_4.jpg" />
<img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_5.jpg" data-full-path="path/to/original_5.jpg" />
<img src="<?= IMAGEPATH ?>front_page/phinfo/house_rentals/westgate/thumbnails/thumbs_img_6.jpg" data-full-path="path/to/original_6.jpg" />
</div>
With a little help from event delegation, you can make this very efficient (disclaimer: this probably has some errors, but it will give you an idea of what to do):
document.getElementById('gallery').addEventListener("click", function(ev) {
if (ev.target.tagName.toLowerCase() == 'img') {
var fullPath = ev.target.getAttribute('data-full-path');
// do stuff with fullPath that will load & display the full sized image
}
});
Your images are missing alt attributes. If it is unrealistic to provide useful alt information due to dynamically content, just use an empty value (eg. alt="").
Your images are also missing dimensions. Adding dimensions will diminish/eliminate document reflow as the images load.