diff --git a/themes/default/js/product.js b/themes/default/js/product.js
index 8e959b9ae..b38b63e38 100644
--- a/themes/default/js/product.js
+++ b/themes/default/js/product.js
@@ -417,14 +417,20 @@ function displayImage(domAAroundImgThumb, no_animation)
 {
 	if (typeof(no_animation) == 'undefined')
 		no_animation = false;
-	if (domAAroundImgThumb.attr('href'))
+	if (domAAroundImgThumb.prop('href'))
 	{
-		var newSrc = domAAroundImgThumb.attr('href').replace('thickbox', 'large');
-		if ($('#bigpic').attr('src') != newSrc)
+		var new_src = domAAroundImgThumb.prop('href').replace('thickbox', 'large');
+		var new_title = domAAroundImgThumb.prop('title');
+		var new_href = domAAroundImgThumb.prop('href');
+		if ($('#bigpic').prop('src') != new_src)
 		{
-			$('#bigpic').attr('src', newSrc).load(function() {
+			$('#bigpic').prop({
+				'src' : new_src, 
+				'alt' : new_title, 
+				'title' : new_title
+			}).load(function(){
 				if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
-					$(this).attr('rel', domAAroundImgThumb.attr('href'));
+					$(this).prop('rel', new_href);
 			}); 
 		}
 		$('#views_block li a').removeClass('shown');
diff --git a/themes/default/product.tpl b/themes/default/product.tpl
index dfd32a4ae..8224f865f 100644
--- a/themes/default/product.tpl
+++ b/themes/default/product.tpl
@@ -183,7 +183,7 @@ var fieldRequired = '{l s='Please fill in all the required fields before saving
 		<div id="image-block">
 		{if $have_image}
 			<span id="view_full_size">
-				<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html'}"{if $jqZoomEnabled && $have_image} class="jqzoom"{/if} title="{$product->name|escape:'htmlall':'UTF-8'}" alt="{$product->name|escape:'htmlall':'UTF-8'}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}"/>
+				<img src="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'large_default')|escape:'html'}"{if $jqZoomEnabled && $have_image} class="jqzoom"{/if} title="{if !empty($cover.legend)}{$cover.legend|escape:'htmlall':'UTF-8'}{else}{$product->name|escape:'htmlall':'UTF-8'}{/if}" alt="{if !empty($cover.legend)}{$cover.legend|escape:'htmlall':'UTF-8'}{else}{$product->name|escape:'htmlall':'UTF-8'}{/if}" id="bigpic" width="{$largeSize.width}" height="{$largeSize.height}"/>
 				<span class="span_link">{l s='Maximize'}</span>
 			</span>
 		{else}
@@ -199,16 +199,21 @@ var fieldRequired = '{l s='Please fill in all the required fields before saving
 		{if isset($images) && count($images) > 3}<span class="view_scroll_spacer"><a id="view_scroll_left" class="hidden" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a></span>{/if}
 		<div id="thumbs_list">
 			<ul id="thumbs_list_frame">
-				{if isset($images)}
-					{foreach from=$images item=image name=thumbnails}
+			{if isset($images)}
+				{foreach from=$images item=image name=thumbnails}
 					{assign var=imageIds value="`$product->id`-`$image.id_image`"}
+					{if !empty($image.legend)}
+						{assign var=imageTitlte value=$image.legend|escape:'htmlall':'UTF-8'}
+					{else}
+						{assign var=imageTitlte value=$product->name|escape:'htmlall':'UTF-8'}
+					{/if}
 					<li id="thumbnail_{$image.id_image}">
-						<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$image.legend|htmlspecialchars}">
-							<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')|escape:'html'}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
+						<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')|escape:'html'}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$imageTitlte}">
+							<img id="thumb_{$image.id_image}" src="{$link->getImageLink($product->link_rewrite, $imageIds, 'medium_default')|escape:'html'}" alt="{$imageTitlte}" title="{$imageTitlte}" height="{$mediumSize.height}" width="{$mediumSize.width}" />
 						</a>
 					</li>
-					{/foreach}
-				{/if}
+				{/foreach}
+			{/if}
 			</ul>
 		</div>
 		{if isset($images) && count($images) > 3}<a id="view_scroll_right" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Next'}</a>{/if}