Colocar efecto SexyLightBox en mi tienda

victor5atodogas · 30 Nov 2010, 18:09 · Solicitar retirada

En la tienda que estoy creando http://www.eluniversodelperro.com/tienda/ me gustaria colocar un efecto SexyLightBox, de tal forma que cuando entres en la pagina del producto, te coloque el efecto SexyLightBox en la imagen del producto al darle click.

Para insertarlo me he basado en esta pagina http://www.zoneartcss.com/webdevelopment/programacion-con-style/sex… en la que explica como hacerlo. He probado con JQuery, y debo modificar los siguientes archivos:

Header.tpl
product.tpl

Con el siguiente contenido:

Header.tpl

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$lang_iso}">
	<head>
		<title>El Universo del perro - Tienda Online de Productos y accesorios para Mascotas</title>

{if isset($meta_description) AND $meta_description}
		<meta name="description" content="Tienda online de productos para Mascotas. Alimentaci&oacute;n, moda y accesorios para perros, gatos, reptiles, tortugas, pajaros, roedores, peces, kit acuarios, huronesy kit regalo" />
{/if}
		<meta name="keywords" content="Accesorio para animales, alimento para perros, alimento para gatos, rascador para gatos, madriguera para conejos, madriguera para liebres, accesorio para perros, accesorio para gatos, comedero, alimento para animales, alimento para mascotas, accesorio para animales, veterinario, veterinaria, transportín para perros, collar para perros,tienda online productos mascotas, alimentaci&oacute;n, moda, accesorios, perros, gatos, reptiles, tortugas, p&aacute;jaros, jaulas, pajaros, roedores, peces, acuarios, kit acuario, hurones, kit regalo, tienda mascotas, Mascotas, Animales, Mascota, online, Animal, accesorios, comida, complementos, perros, gatos, moda canina, animales, Animales, Tienda de animales online, Acuariofilia, termocalentadores, acuarios, reptilarios,terraios, accesorios, peces,peceras, vestidos, loros, transportines" />

		<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
		<meta name="generator" content="PrestaShop" />
		<meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />
		<link rel="icon" type="image/vnd.microsoft.icon" href="http://www.eluniversodelperro.com/favicon.ico" />
		<link rel="shortcut icon" type="image/x-icon" href="http://www.eluniversodelperro.com/favicon.ico" />
{if isset($css_files)}
	{foreach from=$css_files key=css_uri item=media}
<link href="http://www.eluniversodelperro.com/tienda/themes/naranja/css/global2.css" rel="stylesheet" type="text/css" media="{$media}" />
    
	{/foreach}
{/if}

		<script type="text/javascript" src="{$content_dir}js/tools.js"></script>
		<script type="text/javascript">
			var baseDir = '{$content_dir}';
			var static_token = '{$static_token}';
			var token = '{$token}';
			var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
		</script>
		<script type="text/javascript" src="{$content_dir}js/jquery/jquery-1.2.6.pack.js"></script>

		<script type="text/javascript" src="{$content_dir}js/jquery/jquery.hotkeys-0.7.8-packed.js"></script>

<script type="text/javascript" src="/js/jquery/jquery-typewatch.pack.js"></script>

        
{if isset($js_files)}
	{foreach from=$js_files item=js_uri}
	<script type="text/javascript" src="{$js_uri}"></script>
	{/foreach}
{/if}
		{$HOOK_HEADER}


	</head>




	<body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
<a name="arriba"></a>
     
    
     <div>
[img]http://www.eluniversodelperro.com/tienda/bg.gif[/img] 
</div>
<div id="scroller">
<div id="content">
    

  
<div id="page">


<div>
<h1 id="logo">[url="{$base_dir}"][img]{$img_dir}logo.png[/img][/url]</h1>









<div id="header">
{$HOOK_TOP}

</div>


 <div>
{$HOOK_WIZNAV}
</div>


</div>
			
			<div id="left_column" class="column">
				{$HOOK_LEFT_COLUMN}
			</div>
			
			<div id="center_column" style="margin-top:-26px">

</br>
</br>

Procuct.tpl

	
{include file=$tpl_dir./errors.tpl}
{if $errors|@count == 0}
<script type="text/javascript">
// <![CDATA[

// PrestaShop internal settings
var currencySign = '{$currencySign|html_entity_decode:2:"UTF-8"}';
var currencyRate = '{$currencyRate|floatval}';
var currencyFormat = '{$currencyFormat|intval}';
var currencyBlank = '{$currencyBlank|intval}';
var taxRate = {$product->tax_rate|floatval};

//JS Hook
var oosHookJsCodeFunctions = new Array();

// Parameters
var id_product = '{$product->id|intval}';
var productHasAttributes = {if isset($groups)}true{else}false{/if};
var quantitiesDisplayAllowed = {if $display_qties == 1}true{else}false{/if};
var quantityAvailable = {if $display_qties == 1 && $product->quantity}{$product->quantity}{else}0{/if};
var allowBuyWhenOutOfStock = {if $allow_oosp == 1}true{else}false{/if};
var availableNowValue = '{$product->available_now|escape:'quotes':'UTF-8'}';
var availableLaterValue = '{$product->available_later|escape:'quotes':'UTF-8'}';
var productPriceWithoutReduction = {$product->getPriceWithoutReduct()|default:'null'};
var reduction_percent = {if $product->reduction_percent}{$product->reduction_percent}{else}0{/if};
var reduction_price = {if $product->reduction_percent}0{else}{$product->getPrice(true, NULL, 2, NULL, true)}{/if};
var reduction_from = '{$product->reduction_from}';
var reduction_to = '{$product->reduction_to}';
var default_eco_tax = {$product->ecotax};
var currentDate = '{$smarty.now|date_format:'%Y-%m-%d'}';
var maxQuantityToAllowDisplayOfLastQuantityMessage = {$last_qties};
var noTaxForThisProduct = {if $no_tax == 1}true{else}false{/if};

// Customizable field
var img_ps_dir = '{$img_ps_dir}';
var customizationFields = new Array();
{assign var='imgIndex' value=0}
{assign var='textFieldIndex' value=0}
{foreach from=$customizationFields item='field' name='customizationFields'}
{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$imgIndex}
	customizationFields[{$smarty.foreach.customizationFields.index|intval}] = new Array();
	customizationFields[{$smarty.foreach.customizationFields.index|intval}][0] = '{if $field.type|intval == 0}img{$imgIndex++}{else}textField{$textFieldIndex++}{/if}';
	customizationFields[{$smarty.foreach.customizationFields.index|intval}][1] = {if $field.type|intval == 0 AND $pictures.$key}2{else}{$field.required|intval}{/if};
{/foreach}

// Translations
var doesntExist = '{l s='The product does not exist in this model. Please choose another.' js=1}';
var doesntExistNoMore = '{l s='This product is no longer in stock' js=1}';
var doesntExistNoMoreBut = '{l s='with those attributes but is available with others' js=1}';
var uploading_in_progress = '{l s='Uploading in progress, please wait...' js=1}';
var fieldRequired = '{l s='Please fill all required fields' js=1}';


{if isset($groups)}
	// Combinations
	{foreach from=$combinations key=idCombination item=combination}
		addCombination({$idCombination|intval}, new Array({$combination.list}), {$combination.quantity}, {$combination.price}, {$combination.ecotax}, {$combination.id_image}, '{$combination.reference|addslashes}');
	{/foreach}
	// Colors
	{if $colors|@count > 0}
		{if $product->id_color_default}var id_color_default = {$product->id_color_default|intval};{/if}
	{/if}
{/if}

//]]>
</script>

{include file=$tpl_dir./breadcrumb.tpl}

<div id="primary_block">

	<h2>{$product->name|escape:'htmlall':'UTF-8'}</h2>
	{if $confirmation}
	<p class="confirmation">
		{$confirmation}
	</p>
	{/if}

	
	<div id="pb-right-column">
		
		<div id="image-block">
		{if $have_image}
				[img]{$img_prod_dir}{$cover.id_image}-large.jpg[/img]name|escape:'htmlall':'UTF-8'}"/>}
			[img]{$img_prod_dir}{$lang_iso}-default-large.jpg[/img]name|escape:'htmlall':'UTF-8'}" />
		{/if}
		</div>

		{if count($images) > 0}
		
		<div id="views_block" {if count($images) < 2}class="hidden"{/if}>
		{if count($images) > 3}[url="javascript:{ldelim}{rdelim}"]{l s='Previous'}[/url]{/if}
		<div id="thumbs_list">
			<ul style="width: {math equation="width * nbImages" width=82 nbImages=$images|@count}px">
				{foreach from=$images item=image name=thumbnails}
				[*]
					<a href="{$img_prod_dir}{$product->id}-{$image.id_image}-thickbox.jpg" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}">
						[img]{$img_prod_dir}{$product->id}-{$image.id_image}-medium.jpg[/img]
					</a>
				
				{/foreach}
			[/list]
		</div>
		{if count($images) > 3}[url="javascript:{ldelim}{rdelim}"]{l s='Next'}[/url]{/if}
		</div>
		{/if}
		<br class="clear" />
		
		<ul id="usefull_link_block">
			{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}
			[*][url="javascript:print();"]{l s='Print'}[/url]
			{if $have_image}
			[*]<span id="view_full_size" class="span_link">{l s='View full size'}</span>
			{/if}
		[/list]
	</div>

	
	<div id="pb-left-column">
		{if $product->description_short}
		<div id="short_description_block">
			<div id="short_description_content" class="rte align_justify">{$product->description_short}</div>
			{if $product->description}
			<p class="buttons_bottom_block">[url="javascript:{ldelim}{rdelim}"]{l s='More details'}[/url]</p>
			{/if}
		</div>
		{/if}

		{if $colors}
		
		<div id="color_picker">
			

{l s='Pick a color:' js=1}</p>
			<div class="clear"></div>
			{foreach from=$colors key='id_attribute' item='color'}
				<a id="color_{$id_attribute|intval}" class="color_pick" style="background: {$color.value};" onclick="updateColorSelect({$id_attribute|intval});">{if file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}[img]{$img_col_dir}{$id_attribute}.jpg[/img]{/if}</a>
			{/foreach}
		</div>
		{/if}

		
		<form id="buy_block" action="{$base_dir}cart.php" method="post">

			
			<p class="hidden">
				<input type="hidden" name="token" value="{$token}" />
				<input type="hidden" name="id_product" value="{$product->id|intval}" id="product_page_product_id" />
				<input type="hidden" name="add" value="1" />
				<input type="hidden" name="id_product_attribute" id="idCombination" value="" />
			</p>

			
			<p class="price">
				{if $product->on_sale}
					[img]{$img_dir}onsale_{$lang_iso}.gif[/img]
					<span class="on_sale">{l s='On sale!'}</span>
				{elseif ($product->reduction_price != 0 || $product->reduction_percent != 0) && ($product->reduction_from == $product->reduction_to OR ($smarty.now|date_format:'%Y-%m-%d' <= $product->reduction_to && $smarty.now|date_format:'%Y-%m-%d' >= $product->reduction_from))}
					<span class="discount">{l s='Price lowered!'}</span>
				{/if}
				

				<span class="our_price_display"><span id="our_price_display">{convertPrice price=$product->getPrice(true, NULL, 2)}</span> {if $product->getPrice(true, NULL, 2) != $product->getPrice(false, NULL, 2)}{l s='incl. tax'}{/if}</span>
				

				{if $displayPreTax AND $display_ht AND $product->id_tax}
				

				<span id="pretaxe_price">{l s='('}<span id="pretaxe_price_display">{convertPrice price=$product->getPrice(false, NULL, 2)}</span> {l s='tax not incl.)'}</span>
				{/if}
			</p>
			{if ($product->reduction_price != 0 || $product->reduction_percent != 0) && ($product->reduction_from == $product->reduction_to OR ($smarty.now|date_format:'%Y-%m-%d' <= $product->reduction_to && $smarty.now|date_format:'%Y-%m-%d' >= $product->reduction_from))}
				<p id="old_price"><span class="bold"><span id="old_price_display">{convertPrice price=$product->getPriceWithoutReduct()}</span> {l s='incl. tax'}</span></p>
			{/if}
			{if $product->reduction_percent != 0 && ($product->reduction_from == $product->reduction_to OR ($smarty.now|date_format:'%Y-%m-%d' <= $product->reduction_to && $smarty.now|date_format:'%Y-%m-%d' >= $product->reduction_from))}
				<p id="reduction_percent">{l s='(price reduced by'} <span id="reduction_percent_display">{$product->reduction_percent|floatval}</span> %{l s=')'}</p>
			{/if}
			{if $product->ecotax != 0}
				<p class="price-ecotax">{l s='include'} <span id="ecotax_price_display">{convertPrice price=$product->ecotax}</span> {l s='for green tax'}</p>
			{/if}

			{if $product->reference}<p id="product_reference"><label for="product_reference">{l s='Reference :'} </label><span class="editable">{$product->reference|escape}</span></p>{/if}
			{if isset($groups)}

			
			<div id="attributes">
			{foreach from=$groups key=id_attribute_group item=group}
			


				<label for="group_{$id_attribute_group|intval}">{$group.name|escape:'htmlall':'UTF-8'} :</label>
				{assign var='groupName' value='group_'|cat:$id_attribute_group}
				<select name="{$groupName}" id="group_{$id_attribute_group|intval}" onchange="javascript:findCombination();">
					{foreach from=$group.attributes key=id_attribute item=group_attribute}
						<option value="{$id_attribute|intval}"{if (isset($smarty.get.$groupName) && $smarty.get.$groupName|intval == $id_attribute) || $group.default == $id_attribute} selected="selected"{/if}>{$group_attribute|escape:'htmlall':'UTF-8'}</option>
					{/foreach}
				</select>
			</p>
			{/foreach}
			</div>
			{/if}

			
			<p id="quantity_wanted_p"{if (!$allow_oosp && $product->quantity == 0) || $virtual} style="display:none;"{/if}>
				<label>{l s='Quantity :'}</label>
				<input type="text" name="qty" id="quantity_wanted" class="text" value="{if isset($quantityBackup)}{$quantityBackup|intval}{else}1{/if}" size="2" maxlength="3" />
			</p>

			
			<p id="availability_statut"{if ($allow_oosp && $product->quantity == 0 && !$product->available_later) || (!$product->available_now && $display_qties != 1) } style="display:none;"{/if}>
				<span id="availability_label">{l s='Availability:'}</span>
				<span id="availability_value"{if $product->quantity == 0} class="warning-inline"{/if}>
					{if $product->quantity == 0}{if $allow_oosp}{$product->available_later}{else}{l s='This product is no longer in stock'}{/if}{else}{$product->available_now}{/if}
				</span>
			</p>

			
			<p id="pQuantityAvailable"{if $display_qties != 1 || ($allow_oosp && $product->quantity == 0)} style="display:none;"{/if}>
				<span id="quantityAvailable">{$product->quantity|intval}</span>
				<span{if $product->quantity > 1} style="display:none;"{/if} id="quantityAvailableTxt">{l s='item in stock'}</span>
				<span{if $product->quantity < 2} style="display:none;"{/if} id="quantityAvailableTxtMultiple">{l s='items in stock'}</span>
			</p>
			
			
			<p id="oosHook"{if $product->quantity > 0} style="display:none;"{/if}>
				{$HOOK_PRODUCT_OOS}
			</p>

			<p class="warning-inline" id="last_quantities"{if ($product->quantity > $last_qties || $product->quantity == 0) || $allow_oosp} style="display:none;"{/if} >{l s='Warning: Last items in stock!'}</p>

			<p{if !$allow_oosp && $product->quantity == 0} style="display:none;"{/if} id="add_to_cart" class="buttons_bottom_block"><input type="submit" name="Submit" value="{l s='Add to cart'}" class="exclusive" /></p>
			{if $HOOK_PRODUCT_ACTIONS}
				{$HOOK_PRODUCT_ACTIONS}
			{/if}
		</form>
		{if $HOOK_EXTRA_RIGHT}{$HOOK_EXTRA_RIGHT}{/if}
	</div>
</div>
<br class="clear" />

{if $quantity_discounts}

<ul class="idTabs">
	[*]<a style="cursor: pointer">{l s='Quantity discount'}</a>
[/list]
<div id="quantityDiscount">
	<table class="std">
			<tr>
				{foreach from=$quantity_discounts item='quantity_discount' name='quantity_discounts'}
				<th>{$quantity_discount.quantity|intval} 
				{if $quantity_discount.quantity|intval > 1}
					{l s='quantities'}
				{else}
					{l s='quantity'}
				{/if}
				</th>
				{/foreach}
			</tr>
			<tr>
				{foreach from=$quantity_discounts item='quantity_discount' name='quantity_discounts'}
				<td>
				{if $quantity_discount.id_discount_type|intval == 1}
					-{$quantity_discount.value|floatval}%
				{else}
					-{convertPrice price=$quantity_discount.value|floatval}
				{/if}
				</td>
				{/foreach}
			</tr>
	</table>
</div>
{/if}

{$HOOK_PRODUCT_FOOTER}


{if $product->description || $features || $accessories || $HOOK_PRODUCT_TAB}
<div id="more_info_block" class="clear">
	<ul id="more_info_tabs" class="idTabs idTabsShort">
		{if $product->description}[*][url="#idTab1"]{l s='More info'}[/url]{/if}
		{if $features}[*][url="#idTab2"]{l s='Data sheet'}[/url]{/if}
		{if isset($accessories) AND $accessories}[*][url="#idTab4"]{l s='Accessories'}[/url]{/if}
		{$HOOK_PRODUCT_TAB}
	[/list]
	<div id="more_info_sheets" class="sheets align_justify">
	{if $product->description}
		
		<div id="idTab1" class="rte">{$product->description}</div>
	{/if}
	{if $features}
		
		<ul id="idTab2" class="bullet">
		{foreach from=$features item=feature}
			[*]<span>{$feature.name|escape:'htmlall':'UTF-8'}</span>{l s=':'} {$feature.value|escape:'htmlall':'UTF-8'}
		{/foreach}
		[/list]
	{/if}
	{if isset($accessories) AND $accessories}
		
		<ul id="idTab4" class="bullet">
			<div class="block products_block accessories_block">
				<div class="block_content">
					<ul>
					{foreach from=$accessories item=accessory name=accessories_list}
						{assign var='accessoryLink' value=$link->getProductLink($accessory.id_product, $accessory.link_rewrite, $accessory.category)}
						<li class="ajax_block_product {if $smarty.foreach.accessories_list.first}first_item{elseif $smarty.foreach.accessories_list.last}last_item{else}item{/if} product_accessories_description">
							<h5 class="align_center">[url="{$accessoryLink|escape:'htmlall':'UTF-8'}"]{$accessory.name|truncate:22|escape:'htmlall':'UTF-8'}[/url]</h5>
							<p class="product_desc">
								[url="{$accessoryLink|escape:'htmlall':'UTF-8'}"][img]{$img_prod_dir}{$accessory.id_image}-medium.jpg[/img][/url]
								[url="{$accessoryLink|escape:'htmlall':'UTF-8'}"]{$accessory.description_short|strip_tags|truncate:100}[/url]
							</p>
							<p class="product_accessories_price">
								<span class="price">{displayWtPrice p=$accessory.price}</span>
								[url="{$accessoryLink|escape:'htmlall':'UTF-8'}"]{l s='View'}[/url]
								[url="{$base_dir}cart.php?qty=1&amp;id_product={$accessory.id_product|intval}&amp;add"]{l s='Add to cart'}[/url]
							</p>
						
					{/foreach}
					[/list]
				</div>
			</div>
			<div class="clear"></div>
		[/list]
	{/if}
	{$HOOK_PRODUCT_TAB_CONTENT}
	</div>
</div>
{/if}


{if $product->customizable}
	<ul class="idTabs">
		[*]<a style="cursor: pointer">{l s='Product customization'}</a>
	[/list]
	<div class="customization_block">
		<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm">
			


				[img]{$img_dir}icon/infos.gif[/img]
				{l s='After saving your customized product, do not forget to add it to your cart.'}
				{if $product->uploadable_files}
{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
			</p>
			{if $product->uploadable_files|intval}
			<h2>{l s='Pictures'}</h2>
			<ul id="uploadable_files">
				{counter start=0 assign='customizationField'}
				{foreach from=$customizationFields item='field' name='customizationFields'}
					{if $field.type == 0}
						<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
							{if isset($pictures.$key)}<div class="customizationUploadBrowse">[img]{$pic_dir}{$pictures.$key}_small[/img][url="{$link->getUrlWith('deletePicture', $field.id_customization_field)}"][img]{$img_dir}icon/delete.gif[/img][/url]</div>{/if}
							<div class="customizationUploadBrowse"><input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" value="" class="customization_block_input" />{if $field.required}<sup>*</sup>{/if}
							<div class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your hard drive'}{/if}</div></div>
						
						{counter}
					{/if}
				{/foreach}
			[/list]
			{/if}
			<div class="clear"></div>
			{if $product->text_fields|intval}
			<h2>{l s='Texts'}</h2>
			<ul id="text_fields">
				{counter start=0 assign='customizationField'}
				{foreach from=$customizationFields item='field' name='customizationFields'}
					{if $field.type == 1}
						<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
							{if !empty($field.name)}{$field.name}{/if}<input type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" value="{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}" class="customization_block_input" />{if $field.required}<sup>*</sup>{/if}
						
						{counter}
					{/if}
				{/foreach}
			[/list]
			{/if}
			<p style="clear: left;" id="customizedDatas">
				<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
				<input type="hidden" name="submitCustomizedDatas" value="1" />
				<input type="button" class="button" value="{l s='Save'}" onclick="javascript:saveCustomization()" />
			</p>
		</form>
		<p class="clear required"><sup>*</sup> {l s='required fields'}</p>
	</div>
{/if}

{/if}

La cosa es que si intento introducir este codigo que deberia ir en el header.tpl me carga la pagina en blanco no se porque

<script type="text/javascript" src=jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript" src="sexylightbox.v2.2.jquery.js"></script>
<link rel="stylesheet" href="sexylightbox.css" type="text/css" media="all" />

<script type="text/javascript">
$(document).ready(function(){
SexyLightbox.initialize();
});
</script>

Agradeceria que me explicarais un poco cual es el problema y ya de paso me aconsejarais un poco sobre las keywords (cuales deberia poner teniendo en cuenta el ambito de la tienda)

Muchas gracias

Un saludo