[SOLUCIONADO] Colocar Efecto SexyLightBox

victor5atodogas · #1 (**permalink**) 01/12/2010, 03:15

En la tienda que estoy creando ElUniversodelperro 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/webdevelop...sexy-lightbox/ en la que explica como hacerlo. He probado con JQuery, y debo modificar los siguientes archivos:

Header.tpl
product.tpl

Con el siguiente contenido:

Código:

<!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 id="background" src="http://www.eluniversodelperro.com/tienda/bg.gif" alt="" title="" />
</div>
<div id="scroller">
<div id="content">
   
<br/> 
<div id="page">

<!--  Dbut Menu -->
<div>
<h1 id="logo"><a href="{$base_dir}" title="{$shop_name|escape:'htmlall':'UTF-8'}"><img src="{$img_dir}logo.png" alt="{$shop_name|escape:'htmlall':'UTF-8'}" /></a></h1>



<br />
<br />
<!--  Fin Menu -->

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

</div>


 <div>
{$HOOK_WIZNAV}
</div>


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

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

victor5atodogas · #2 (**permalink**) 01/12/2010, 03:17

Product.tpl

Código:

{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}

   <!-- right infos-->
   <div id="pb-right-column">
      <!-- product img-->
      <div id="image-block">
      {if $have_image}
            <img src="{$img_prod_dir}{$cover.id_image}-large.jpg" alt="" id="bigpic" title="{$product->name|escape:'htmlall':'UTF-8'}"/>}
         <img src="{$img_prod_dir}{$lang_iso}-default-large.jpg" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" />
      {/if}
      </div>

      {if count($images) > 0}
      <!-- thumbnails -->
      <div id="views_block" {if count($images) < 2}class="hidden"{/if}>
      {if count($images) > 3}<a id="view_scroll_left" title="{l s='Other views'}" href="javascript:{ldelim}{rdelim}">{l s='Previous'}</a>{/if}
      <div id="thumbs_list">
         <ul style="width: {math equation="width * nbImages" width=82 
..........................................................