You need to change the template dynamically. For this you can observe the event controller_action_layout_generate_blocks_after
and your observer should somewhat look like this.
<?php
class Magento_Study_Model_Observer
{
const NEW_MEDIA_TEMPALTE = 'your/new/media/template.phtml';
public function changeProductImageTemplate(Varien_Event_Observer $observer)
{
//get layout object from event
$layout = $observer->getEvent()->getLayout();
//make sure it is a product page or category page
if (Mage::registry('current_product') != ''
|| Mage::registry('current_category') != ''
) {
//changing template
$layout->getBlock('product.info.media')
->setTemplate(self::NEW_MEDIA_TEMPALTE);
}
return $this;
}
}
As you can see, we are first make sure we are inside a product page. Then we grab the media block and assign a new template to it. Now all you need to do is change the constant NEW_MEDIA_TEMPLATE
with your custom media template file path and then define that file and do modification there.
To find complete code reference, you can refer this answer.
EDIT
This is the layout update xml way of doing this operation
<layout>
<catalog_category_view>
<reference name="product.info.media">
<action method="setTemplate">
<template>path/to/your/custom/media.phtml</template>
</action>
</reference>
</catalog_category_view>
<catalog_product_view>
<reference name="product.info.media">
<action method="setTemplate">
<template>path/to/your/custom/media.phtml</template>
</action>
</reference>
</catalog_product_view>
</layout>