Изменение фото товара в карточке в зависимости от выбранного цвета - [VM2&3] Дизайн, оформление

// List all Images
	if (count($this->product->images) > 0) {
		
	    foreach ($this->product->images as $image) {
			if(count($this->product->images)==++$i){ $last = 'last';}
			echo $image->displayMediaThumb('class="product-image"  style="border: 1px solid black;"', true, 'class="cloud-zoom-gallery" rel=" useZoom:\'zoom1\', smallImage:\''.JURI::base().$image->file_url .'\' "', true, true); //'class="modal"'
			
	    }
	}

id="add_img-'.$image->file_meta.'"

// List all Images
	if (count($this->product->images) > 0) {
		
	    foreach ($this->product->images as $image) {
			if(count($this->product->images)==++$i){ $last = 'last';}
			echo $image->displayMediaThumb('class="product-image" id="add_img-'.$image->file_meta.'" style="border: 1px solid black;"', true, 'class="cloud-zoom-gallery" rel=" useZoom:\'zoom1\', smallImage:\''.JURI::base().$image->file_url .'\' "', true, true); //'class="modal"'
			
	    }
	}

<script type="text/javascript">
$( document ).ready(function() {
$(function(){
$('select').change(function(){
alt_image = $('select option:selected').text();
$('#add_img-'+alt_image+'').click();
})
});
});
</script>

<script type="text/javascript">
$( document ).ready(function() {
$(function(){
$('select').change(function(){
alt_image = $('select option:selected').text();
$('.product-image').removeClass('test');
$('#add_img-'+alt_image+'').click();
});
$('.product-image').click(function(){$('.product-image').removeClass('selected-img');
$(this).addClass('selected-img')});
});
});


$(function(){
$('.product-image').click(function(){
alt_image = $(this).attr("alt");
$('select :contains('+alt_image+')').attr("selected", "selected");
});
});
</script>

<select id="myselect">
	<option value="0">Выбор</option>
	<option value="1">1</option>
	<option value="2">2</option>
	<option value="3">3</option>
	<option value="4">4</option>
</select>
<div class="myClass1">11111</div>
<div class="myClass2">222222</div>
<div class="myClass3">333333</div>
<div class="myClass4">444444</div>
<script type="text/javascript">
jQuery(function($) {
	$('#myselect').on('change', function(){
		$('.myImg').remove();
		if( $( '.myClass' + $(this).val() ).length ) {
			$( '.myClass' + $(this).val() ).after( '<img class="myImg" src="/images/banners/osmbanner1.png" alt="My Image" title="My Image" />' );
		}
	});
});
</script>

jQuery(function($) {
	$('#baget_select').on('change', function(){
		$('.myImg').remove();
		if($(':selected',$(this)).text()=="темный"){
			$( '.addtocart-area .product-field-type-S').after( '<img class="myImg" src="/images/banners/dark_baget.jpg" alt="Тёмный багет" title="Тёмный багет" />' );
		}
		else{
			$( '.addtocart-area .product-field-type-S').after( '<img class="myImg" src="/images/banners/light_baget.jpg" alt="Светлый багет" title="Светлый багет" />' );
		}
	});
});

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/вашаjsпапка/вашфайлскрипта.js"> </script>

jQuery(function($) {
	$('#baget_select').on('change', function(){
		$('.myImg').remove();
		if($(this).val() == 5788){
			$( '.product-field-type-S').after( '<img class="myImg" src="/images/banners/dark_baget.jpg" alt="Тёмный багет" title="Тёмный багет" />' );
		}
		else{
			$( '.product-field-type-S').after( '<img class="myImg" src="/images/banners/light_baget.jpg" alt="Светлый багет" title="Светлый багет" />' );
		}
	});
});

jQuery(function($) {
	function imageBagetSelect(){
	   if( $('.myImg').length ) {
	       $('.myImg').remove();
	   }
	   if($("#baget_select option:selected").text()=="темный"){
	       $( '.addtocart-area .product-field-type-S').after( '<img class="myImg" src="/images/banners/dark_baget.jpg" alt="Тёмный багет" title="Тёмный багет" />' );
	  } else if ($("#baget_select option:selected").text()=="светлый"){ {
	       $( '.addtocart-area .product-field-type-S').after( '<img class="myImg" src="/images/banners/light_baget.jpg" alt="Светлый багет" title="Светлый багет" />' );
	  }
            if($("#baget_select").val()==0){
              $( '.addtocart-button').prop("disabled", true);
            } else {
                $( '.addtocart-button').prop("disabled", false);
            }
	}
	imageBagetSelect();
	$('#baget_select').on('change', function(){
                  imageBagetSelect();
	});
});