on click load images on the same page [closed]

So your site isn’t setup to do any of this – and this isn’t the solution to your problems but it’ll do what you asked (click items and change images on the same page). You’ll need to construct your page better with a combination of php, custom page templates, custom post types, custom galleries, custom fields, queries… a lot of different things that will require a much longer answer and far more education on WordPress.

The menu on the right currently is just a paragraph with text.

This script (using jQuery and the Chrome console) will clear it out, make new menu items and when each are click they will replace the main featured image with a placeholder using data on the menu item.

This should help you moving forward to see how jQuery can help but you are missing a ton of classes to target specific things. Case in point, the selector for the main image is .col-md-9 img which is far too generic. Maybe change it to something like class="col-md-9 featured-image".

// your menu
var $ul = jQuery('ul.homedesign');

// clear it out cause it's useless as is
$ul.html('');

// now make some fake links
var count = 6; for ( var i = 1; i <= 6; i++ ) {

   // Create a new list item with click handler
   $item = jQuery ( '<li data-item="' + i + '" ><a>Amazon ' + i + '</a></li>' );

   $item.on('click', function(evt){
        // ignore default, shoudl be li anyway...
        if(evt) evt.preventDefault();

        // scope   
        var $this = jQuery(this);

        // get the id for ... whatever
        var inx = $this.data( 'item' );

        // should be labeled better
        // but, replace the main image with a label using the stored id
        jQuery('.col-md-9 img').attr('src', '//placehold.it/634x341/eee/222/&text=" + inx );
   });

   // add our new item to the list
   $ul.append ( $item );
}