Borde thumbnail activo

[redoli]

Muy buenas a todos, estoy intentando aplicarle un estilo especifico a las imágenes del thumbnail cuando está activo pero no consigo controlar el efecto, me acuerdo que hace tiempo toqué algo de javascript para que al hacer click en la imagen del thumbnail no se abriera el cuadro de la imagen en grande, y ahora no consigo hacerlo funcionar.

 

Utilizo una plantilla y no termino de entender como funciona cuando se selecciona un elemento del thumbnail, he visto que la clase cambian a "shown" pero luego no hay manera, a ver si alguien me pudiera echar una mano, muchas gracias. Aquí dejo la parte referente a la plantilla, el product.tpl y el código una vez cargada la página.

 

Url página http://www.redoli.es/shop1/home/1-ipod-nano.html

		<!-- thumbnails -->
		<div id="views_block" class="clearfix {if isset($images) && count($images) < 2}hidden{/if}">
		{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}
					{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}">
				
				<!--- MOD THUMBNAIL --->
						<a href="{$link->getImageLink($product->link_rewrite, $imageIds, 'thickbox_default')}" onclick="return false" title="{$image.legend|htmlspecialchars}">
						{*<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="80px" />
						</a>
					</li>
				{/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}
		</div>
		{/if}
		{if isset($images) && count($images) > 1}<p class="resetimg clear"><span id="wrapResetImages" style="display: none;">{*<img src="{$img_dir}icon/cancel_11x13.gif" alt="{l s='Cancel'}" width="11" height="13"/>*}<a id="resetImages" href="{$link->getProductLink($product)|escape:'html'}" onclick="$('span#wrapResetImages').hide('slow');return (false);">{l s='Display all pictures'}</a></span></p>{/if}

<div id="views_block" class="clearfix ">
				<div id="thumbs_list">
			<ul id="thumbs_list_frame" style="width: 480px;">
																																	<li id="thumbnail_44">
				
				<!--- MOD THUMBNAIL --->
						<a href="http://www.redoli.es/shop1/44-thickbox_default/ipod-nano.jpg" onclick="return false" title="iPod Nano" class="shown">
						
							<img id="thumb_44" src="http://www.redoli.es/shop1/44-medium_default/ipod-nano.jpg" alt="iPod Nano" title="iPod Nano" height="80" width="80px">
						</a>
					</li>
																														<li id="thumbnail_45">
				
				<!--- MOD THUMBNAIL --->
						<a href="http://www.redoli.es/shop1/45-thickbox_default/ipod-nano.jpg" onclick="return false" title="iPod Nano">
						
							<img id="thumb_45" src="http://www.redoli.es/shop1/45-medium_default/ipod-nano.jpg" alt="iPod Nano" title="iPod Nano" height="80" width="80px">
						</a>
					</li>
																														<li id="thumbnail_46">
				
				<!--- MOD THUMBNAIL --->
						<a href="http://www.redoli.es/shop1/46-thickbox_default/ipod-nano.jpg" onclick="return false" title="iPod Nano">
						
							<img id="thumb_46" src="http://www.redoli.es/shop1/46-medium_default/ipod-nano.jpg" alt="iPod Nano" title="iPod Nano" height="80" width="80px">
						</a>
					</li>
																														<li id="thumbnail_47">
				
				<!--- MOD THUMBNAIL --->
						<a href="http://www.redoli.es/shop1/47-thickbox_default/ipod-nano.jpg" onclick="return false" title="iPod Nano">
						
							<img id="thumb_47" src="http://www.redoli.es/shop1/47-medium_default/ipod-nano.jpg" alt="iPod Nano" title="iPod Nano" height="80" width="80px">
						</a>
					</li>
										</ul>
		</div>
				</div> 

Y aquí el product.css:

#thumbs_list {
float: left;
height: 400px;
width: 120px;
}

#thumbs_list ul#thumbs_list_frame {
	list-style-type:none;
	padding-left:0;
	width:auto;
	height:auto;
}

#thumbs_list li  img {
vertical-align: middle;
padding: 10px;
margin-bottom: 10px;
width: 80px;
height: 80px;
background: #FFFFFF;
border: 5px solid #000000;
text-align: center;
-moz-box-shadow: 0 3px 0 #FF7702;
-webkit-box-shadow: 0 3px 0 #FF7702;
box-shadow: 0 3px 0 #FF7702;
cursor: pointer;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
-ms-transition: all .5s;
transition: all .5s;
}

#thumbs_list li  img:hover {
vertical-align: middle;
padding: 10px;
margin-bottom: 10px;
width: 80px;
height: 80px;
background: rgb(57, 54, 65);
border: 5px solid #FF7702;
text-align: center;
border-radius: 100px;
-moz-box-shadow: 0 3px 0 #000000;
-webkit-box-shadow: 0 3px 0 #000000;
box-shadow: 0 3px 0 #000000;
cursor: pointer;
}

#thumbs_list li  a.shown {
vertical-align: middle;
padding: 10px;
margin-bottom: 10px;
width: 80px;
height: 80px;
background: rgb(57, 54, 65);
border: 5px solid #FF7702;
text-align: center;
border-radius: 100px;
-moz-box-shadow: 0 3px 0 #000000;
-webkit-box-shadow: 0 3px 0 #000000;
box-shadow: 0 3px 0 #000000;
cursor: pointer;
}