After another day of digging I did get this working. I was on the right path to finding out what was broken, I was just in the wrong file. In the end, the JS that drives the image swap is the object ConfigurableMediaImages which is defined and setup in this file
skin/frontend/{{vendor}}/{{theme}}/js/configurableswatches/product-media.js.
I was de-bugging in this file to find out why the images were not being created on the front end. But when I step back, & looked at the file that was using the JS object,
app/design/frontend/{{vendor}}/{{theme}}/template/configurableswatches/catalog/media/js.phtml.
Because the images were not being set in the JS file, it makes sense to looks a step back at and see where the images are set. In this file you have php the calls the images.
<script type="text/javascript">
$j(document).on('product-media-loaded', function() {
ConfigurableMediaImages.init('<?php echo $this->getImageType(); ?>');
<?php foreach ($this->getProductImageFallbacks() as $imageFallback): ?>
ConfigurableMediaImages.setImageFallback(<?php echo $imageFallback['product']->getId(); ?>, $j.parseJSON('<?php echo $imageFallback['image_fallback']; ?>'));
<?php endforeach; ?>
$j(document).trigger('configurable-media-images-init', ConfigurableMediaImages);
});
</script>
If you do a search on the dom for this object - and the functionality is working - you will get a json object with all the info the JS needs to plug in the image
$j(document).on('product-media-loaded', function() {
ConfigurableMediaImages.init('base_image');
ConfigurableMediaImages.setImageFallback(410, $j.parseJSON('{"option_labels":{"black":{"configurable_product":{"small_image":null,"base_image":null},"products":["253","254","483","484","488"]},"white":{"configurable_product":{"small_image":null,"base_image":null},"products":["251","252"]},"blue":{"configurable_product":{"small_image":null,"base_image":null},"products":["249","250"]},
For me, this object wasn't on the page at all. I turned on template hints to see if the file was being loaded, and it turns out it wasn't there at all. Here is a pic of what it should look like:
But there is another trick here, if you do a grep -r "configurableswatches/catalog/media/js.phtml" you wont find a .xml file that is loading in the template. I wasn't able to take the time to see how the template was being loaded, but it turns out that my theme did not have a call to a block that IS loading in the template that I needed.
In the app/design/frontend/{{vendor}}/{{theme}}/template/catalog/product/view/media.phtml file there is a call to <?php echo $this->getChildHtml('after'); ?>. Commenting this out removes the image swapping functionality. This block is called in the app/design/frontend/rwd/default/layout/catalog.xml file.
So I just needed to add in the xml to my local.xml to get that block into my site.
<catalog_product_view>
<reference name="content">
<reference name="product.info.media">
<block type="core/text_list" name="product.info.media.after" as="after" />
</reference>
</reference>
</catalog_product_view>
TL;DR
The block with the correct template was not being called in my by theme, so I added this to my local.xml
<catalog_product_view>
<reference name="content">
<reference name="product.info.media">
<block type="core/text_list" name="product.info.media.after" as="after" />
</reference>
</reference>
</catalog_product_view>
Best Answer
Finally I found it! Obviously I've completely forgot the rules to create a configurable swatch value: the filename should be in lowercase (which it isn't) and the attribute value should be in lowercase too or camelized (which it isn't neither).
http://www.venustheme.com/configurable-swatches-guide-for-magento-1-9-1/
So, changing both from uppercase to lowercase fix the problem!