echo active image alt text in <p> - php

Question

I'm trying to figure out some php code.
I have a slider inside a fancybox popup.
What i need to do is then i click on image it gets me its alt text in "image-product-name" P class.
<div class="modal-body">
<button class="close">×</button>
<div class="UI-IMAGE image">
<img src="<?php echo Mage::helper('core/image')->init($_product, 'image', 'catalog/product')->resize(640, 400) ?>" width="640px" height="400px"
alt="<?php echo $this->htmlEscape($this->getImageLabel()) ?>"
title="<?php echo $this->htmlEscape($this->getImageLabel()) ?>">
</div>
<p class="image-product-name"><?php echo $_product->getName() ?></p>
<?php if (count($this->getGalleryImages()) > 0): ?>
<div class="previews UI-PREVIEWS">
<ul>
<?php foreach ($this->getGalleryImages() as $_image): ?>
<li>
<a href="#"
title="<?php echo $this->htmlEscape($_image->getLabel()) ?>"
data-image="<?php echo $this->helper('core/image')->init($this->getProduct(), 'thumbnail', 'catalog/product', $_image->getFile())->resize(640, 400); ?>">
<img src="<?php echo $this->helper('core/image')->init($this->getProduct(), 'thumbnail', 'catalog/product', $_image->getFile())->resize(78, 78); ?>" width="78px" height="78px"
alt="<?php echo $this->htmlEscape($_image->getLabel()) ?>"/>
</a>
</li>
<?php endforeach ?>
</ul>
</div>
<?php endif ?>
</div>
Right now its just echoes an image name.
What should i change in order to make it echo active image alt text?

Answer 1

You need javascript for this. In the next example I've used jQuery:
$('.imgClass').click(function(){ //When user click on your img
var altImg = $(this).attr('alt'); //Save the alt attribute into a variable
$('p.image-product-name').html(altImg); //Place the variable between the p tags;
});

Answer 2

without js just change the variable from:
<p class="image-product-name"><?php echo $_product->getName() ?></p>
to
<p class="image-product-name"><?php echo $this->htmlEscape($_image->getLabel()) ?></p>
pretty straighforward