By using the event afterOptionSelection we can find the URL of the respective image.
_.extend(ProductDetailsImageGalleryView.prototype, {
template: jj_childitem_mycoolmodule_tpl,
initialize: _.wrap(ProductDetailsImageGalleryView.prototype.initialize, function (fn) {
fn.apply(this, _.toArray(arguments).slice(1));
var application= this.options.application;
var pdp=application.getComponent('PDP');
var model= this.model;
var self=this;
pdp.on('afterOptionSelection', function () {
self.itemInfo = pdp.getItemInfo();
var g = $('label[class="product-views-option-tile-picker active"]').text();
g=$.trim(g).substring(0,7)
g=g.toLowerCase();
var imgpath=self.itemInfo.item;
var urls = _.filter(imgpath.keyMapping_images, function(num){return num.url.indexOf(g) != -1;});
var imgurl=urls[0].url;
self.imgurl=imgurl;
}
self.render();
})
}),