Consulta sobre Slider

nivelsur · October 2, 2012

Hola a todos soy nuevo en prestashop y en este sistema, y aunque trabajo con un cms que practicamente esta en php la manera de modificar una plantilla difiere y en gran manera, pero bueno... voy al punto.

estoy tratando de modificar el tema original y en ves de que tenga un fondo blanco quiero ponerle un slider full screenque rote. ahora ....tengo un inconveniente, no se como se relacionan los archivos. como llamar desde el heder a los diferentes archivos y que los muestre en las secciones. si alguno me tiende una mano se los agradeceria, despues paso la plantilla sin costo .

Saludos

shacker · October 4, 2012

los css y js se cargan en el header.tpl, por ejemplo

base_dir es el directorio raiz, de ahi puedes dirigirlo hacia donde vayan los archivos. Haz lo mismo para las url de las imagenes

nivelsur · October 4, 2012

Gracais shacker voy a probar y si sale lo comparto , saludos

nivelsur · October 9, 2012

Bueno finalmente me doy!!! no he podido. dejo el codigo para que me orienten en que falle.

Esto ya lo implemente en impresspages cms www.xoono.com.ar/WEB2/

y aca tengo mi instalacion de prestashop www.xoono.com.ar/presta/

presta/themes/prestashop/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>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
 <meta name="description" content="{$meta_description|escape:html:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
 <meta name="keywords" content="{$meta_keywords|escape:html:'UTF-8'}" />
{/if}
 <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="{$img_ps_dir}favicon.ico?{$img_update_time}" />
 <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico?{$img_update_time}" />
 <script type="text/javascript">
  var baseDir = '{$content_dir}';
  var static_token = '{$static_token}';
  var token = '{$token}';
  var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
  var priceDisplayMethod = {$priceDisplay};
  var roundMode = {$roundMode};
 </script>
{if isset($css_files)}
{foreach from=$css_files key=css_uri item=media}
<link href="{$css_uri}" rel="stylesheet" type="text/css" media="{$media}" />
{/foreach}
{/if}
{if isset($js_files)}
{foreach from=$js_files item=js_uri}
<script type="text/javascript" src="{$js_uri}"></script>
{/foreach}
{/if}
 {$HOOK_HEADER}
</head>
<link href="{$base_dir}presta/themes/prestashop/slideshow/css/supersized.css" rel="stylesheet" type="text/css">
<link href="{$base_dir}/presta/themes/prestashop/slideshow/themes/supersized.shutter.css" rel="stylesheet" type="text/css">
<SCRIPT type="text/javascript" src="{$base_dir}/presta/themes/prestashop/slideshow/js/supersized.3.2.7.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="{$base_dir}/presta/themes/prestashop/slideshow/themes/supersized.shutter.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="{$base_dir}/presta/themes/prestashop/slideshow/js/jquery.easing.min.js"></SCRIPT>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
 <script type="text/javascript">

  jQuery(function($){

   $.supersized({

 // Functionality
 slide_interval		  :   3000,  // Length between transitions
 transition			  :   1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
 transition_speed  : 700,  // Speed of transition

 // Components	  
 slide_links    : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
 slides	  :   [   // Slideshow Images
		  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', },
		  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', }, 
		  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', },
		  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', },
		  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', },
		  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', },
		  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', },
		  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', },
		  {image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', }
	    ]

   });
  });

 </script>
<body {if $page_name}id="{if $page_name == '404'}p{/if}{$page_name|escape:'htmlall':'UTF-8'}"{/if}>
{if !$content_only}
 {if isset($restricted_country_mode) && $restricted_country_mode}
 <div id="restricted-country">
  <p>{l s='You cannot place a new order from your country.'} <span class="bold">{$geolocation_country}</span></p>
 </div>
 {/if}
 <div id="page">
  <!-- Header -->
  <div id="header">
   <a id="header_logo" href="{$link->getPageLink('index.php')}" title="{$shop_name|escape:'htmlall':'UTF-8'}">
 <img class="logo" src="{$img_ps_dir}logo.jpg?{$img_update_time}" alt="{$shop_name|escape:'htmlall':'UTF-8'}" {if $logo_image_width}width="{$logo_image_width}"{/if} {if $logo_image_height}height="{$logo_image_height}" {/if} />
   </a>
   <div id="header_right">
 {$HOOK_TOP}
   </div>
  </div>
  <div id="columns">
   <!-- Left -->
   <div id="left_column" class="column">
 {$HOOK_LEFT_COLUMN}
   </div>
   <!-- Center -->
   <div id="center_column">
{/if}

consultas...shacker en su contestacion dijo que base_dir es el directorio raiz y puesto que veo dos css y dos js uno en raiz y otro en theme me preguntaba si me equivoque en algo.

sugerencias por favor.... gracias

shacker · October 9, 2012

en el script, debe ir con literal asi

{literal}

jQuery(function($){

$.supersized({

// Functionality

slide_interval : 3000, // Length between transitions

transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left

transition_speed : 700, // Speed of transition

// Components

slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')

slides : [ // Slideshow Images

{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg', },

{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg', },

{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg', title : 'Image Credit: Maria Kazvan', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg', },

{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg', },

{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg', },

{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg', title : 'Image Credit: Colin Wojno', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg', },

{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg', },

{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg', },

{image : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg', title : 'Image Credit: Brooke Shaden', thumb : 'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg', }

]

});

</script>

{/literal}

nivelsur · October 10, 2012

gracias shacker, podrias decirme a algo mas? si el base_dir del que me hiciste referencia quiere decir que mis archivos js y css los tengo que poner en las respectivas carpetas de raiz y no en mi theme o entendi cualquier cosa.....lo mas seguro

nadie · October 10, 2012

gracias shacker, podrias decirme a algo mas? si el base_dir del que me hiciste referencia quiere decir que mis archivos js y css los tengo que poner en las respectivas carpetas de raiz y no en mi theme o entendi cualquier cosa.....lo mas seguro

Con:

{$base_dir}

Indicas la url de tu web.

Es decir si la url de tu tienda es:

http://www.prueba.com

La variable,

{$base_dir}

te sacara tal url.

Si escribieras:

{$base_dir}css/

Estarias haciendo referencia a:

http://www.prueba.com/css/

Es decir al directorio css del raiz de tu tienda.

ect...

shacker · October 10, 2012

exacto

nivelsur · October 10, 2012

gracias a los dos por los aportes, voy a romperme un rato mas la cabeza.

nivelsur · October 10, 2012

una pregunta antes de seguir, entendi pero tengo otra duda "nadie", ahora .....si mi web es

http://www.prueba.com/presta/

el base_dir aplica tambien a esta estencion "/presta" ?

digamos que si yo digo

{$base_dir}/css/

seria

http://www.prueba.com/presta/css/

si esta bien por favor decime, gracias

nadie · October 10, 2012

una pregunta antes de seguir, entendi pero tengo otra duda "nadie", ahora .....si mi web es
http://www.prueba.com/presta/
el base_dir aplica tambien a esta estencion "/presta" ?

digamos que si yo digo
{$base_dir}/css/
seria
http://www.prueba.com/presta/css/
si esta bien por favor decime, gracias

Si, efectivamente ) (Pero sin /) Es decir {$base_dir}css

nivelsur · October 10, 2012

Teniendo esto presente el error entonces esta en otro lado, he hecho como me aclarastes y nada

comento.... el sitio web es

http://www.xoono.com.ar/presta/

y el slider tiene varios archivos

css > css/supersized.css

css > css/supersized.shutter.css

Js > js/supersized.3.2.7.min.js

Js > js/supersized.shutter.min.js

y tiene dos mas que no las pongo porque el prestashop las incorpora y tengo entendido de que crea problemas repetir codigo

> easing 1.3

> jquery 1.6.1

teniendo esto presentes les digo donde y como lo puse

01- abro el header.tpl desde el theme original que viene por defecto

http://www.xoono.com.ar/presta/themes/prestashop/header.tpl

y siguiendo las instrucciones que me dio shacker llamo a los archivos del slider asi

<link href="{$base_dir}css/supersized.css" rel="stylesheet" type="text/css">
<link href="{$base_dir}css/supersized.shutter.css" rel="stylesheet" type="text/css">
<SCRIPT type="text/javascript" src="{$base_dir}js/supersized.3.2.7.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="{$base_dir}js/supersized.shutter.min.js"></SCRIPT>

y el siguiente scrip me dijo shacker que le ponga con un {literal} antes del codigo y por supuesto lo cierre con un

{/literal}

{literal}
[color=#000088]<script[/color][color=#000000] [/color][color=#660066]type[/color][color=#666600]=[/color][color=#008800]"text/javascript"[/color][color=#000088]>[/color]

[color=#000000]jQuery[/color][color=#666600]([/color][color=#000088]function[/color][color=#666600]([/color][color=#000000]$[/color][color=#666600]){[/color]

[color=#000000]$[/color][color=#666600].[/color][color=#000000]supersized[/color][color=#666600]({[/color]

[color=#880000]// Functionality[/color]
[color=#000000]slide_interval [/color][color=#666600]:[/color][color=#000000] [/color][color=#006666]3000[/color][color=#666600],[/color][color=#000000] [/color][color=#880000]// Length between transitions[/color]
[color=#000000]transition [/color][color=#666600]:[/color][color=#000000] [/color][color=#006666]1[/color][color=#666600],[/color][color=#000000] [/color][color=#880000]// 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left[/color]
[color=#000000]transition_speed [/color][color=#666600]:[/color][color=#000000] [/color][color=#006666]700[/color][color=#666600],[/color][color=#000000] [/color][color=#880000]// Speed of transition[/color]

[color=#880000]// Components [/color]
[color=#000000]slide_links [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'blank'[/color][color=#666600],[/color][color=#000000] [/color][color=#880000]// Individual links for each slide (Options: false, 'num', 'name', 'blank')[/color]
[color=#000000]slides [/color][color=#666600]:[/color][color=#000000] [/color][color=#666600][[/color][color=#000000] [/color][color=#880000]// Slideshow Images[/color]
[color=#666600]{[/color][color=#000000]image [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-1.jpg'[/color][color=#666600],[/color][color=#000000] title [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'Image Credit: Maria Kazvan'[/color][color=#666600],[/color][color=#000000] thumb [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-1.jpg'[/color][color=#666600],[/color][color=#000000] [/color][color=#666600]},[/color]
[color=#666600]{[/color][color=#000000]image [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-2.jpg'[/color][color=#666600],[/color][color=#000000] title [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'Image Credit: Maria Kazvan'[/color][color=#666600],[/color][color=#000000] thumb [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-2.jpg'[/color][color=#666600],[/color][color=#000000] [/color][color=#666600]},[/color][color=#000000] [/color]
[color=#666600]{[/color][color=#000000]image [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/kazvan-3.jpg'[/color][color=#666600],[/color][color=#000000] title [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'Image Credit: Maria Kazvan'[/color][color=#666600],[/color][color=#000000] thumb [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/kazvan-3.jpg'[/color][color=#666600],[/color][color=#000000] [/color][color=#666600]},[/color]
[color=#666600]{[/color][color=#000000]image [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-1.jpg'[/color][color=#666600],[/color][color=#000000] title [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'Image Credit: Colin Wojno'[/color][color=#666600],[/color][color=#000000] thumb [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-1.jpg'[/color][color=#666600],[/color][color=#000000] [/color][color=#666600]},[/color]
[color=#666600]{[/color][color=#000000]image [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-2.jpg'[/color][color=#666600],[/color][color=#000000] title [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'Image Credit: Colin Wojno'[/color][color=#666600],[/color][color=#000000] thumb [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-2.jpg'[/color][color=#666600],[/color][color=#000000] [/color][color=#666600]},[/color]
[color=#666600]{[/color][color=#000000]image [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/wojno-3.jpg'[/color][color=#666600],[/color][color=#000000] title [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'Image Credit: Colin Wojno'[/color][color=#666600],[/color][color=#000000] thumb [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/wojno-3.jpg'[/color][color=#666600],[/color][color=#000000] [/color][color=#666600]},[/color]
[color=#666600]{[/color][color=#000000]image [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-1.jpg'[/color][color=#666600],[/color][color=#000000] title [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'Image Credit: Brooke Shaden'[/color][color=#666600],[/color][color=#000000] thumb [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-1.jpg'[/color][color=#666600],[/color][color=#000000] [/color][color=#666600]},[/color]
[color=#666600]{[/color][color=#000000]image [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-2.jpg'[/color][color=#666600],[/color][color=#000000] title [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'Image Credit: Brooke Shaden'[/color][color=#666600],[/color][color=#000000] thumb [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-2.jpg'[/color][color=#666600],[/color][color=#000000] [/color][color=#666600]},[/color]
[color=#666600]{[/color][color=#000000]image [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/slides/shaden-3.jpg'[/color][color=#666600],[/color][color=#000000] title [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'Image Credit: Brooke Shaden'[/color][color=#666600],[/color][color=#000000] thumb [/color][color=#666600]:[/color][color=#000000] [/color][color=#008800]'http://buildinternet.s3.amazonaws.com/projects/supersized/3.2/thumbs/shaden-3.jpg'[/color][color=#666600],[/color][color=#000000] [/color][color=#666600]}[/color]
[color=#666600]][/color]

[color=#666600]});[/color]
[color=#666600]});[/color]

[color=#000088]</script>[/color]
{/literal}

He hecho todo esto pero sin resultados, lo unico que se me ocurre es que le este errando donde pongo este codigo. yo lo quiero poner en el fondo del sitio

Edited October 10, 2012 by nivelsur (see edit history)

shacker · October 10, 2012

ojo, que si pones {$base_dir}/css/ esta mal, la primer barra no va

es asi

{$base_dir}css/

por ultimo, fijate que tu slider funciona con jquery 1.4, que es del presta version 1.4, si necesita una version mayor, no te funcionara asi

nivelsur · October 10, 2012

si esta bien, lo puse asi {$base_dir}css/

y en cuanto a la version de mi prestashop es la 1.4.9.0 y segun el prestashop/js/jquery/jquery.min es version 1.7.2

Consulta sobre Slider

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites