[MODULO] elevateZoom para Prestashop: efectos de zoom y lupa - Módulos y plantillas gratuitas - PrestaShop

Jump to content

Photo

[MODULO] elevateZoom para Prestashop: efectos de zoom y lupa

elevateZoom gratis zoom lupa efecto efectos imagen imagenes prestashop

#1

Posted 15 January 2014 - 10:12 PM

vblanch

    PrestaShop Enthusiast

  • Members
  • PipPip
  • 138 Active Posts

Hola a tod@s,

 

Me he dado cuenta de que en Prestashop faltan módulos gratuitos para hacer zoom o efecto lupa sobre las imágenes, y el módulo JqZoom que viene con Prestashop me parece algo básico, así que he hecho mi propio módulo y lo cuelgo aquí.

 

El propósito de este módulo es ser capaz de añadir efectos de lupa o zoom a las imágenes de los productos en la página de producto (ver imágenes adjuntas). También tiene una opción extra donde se puede meter código en jQuery para ejecutar el plugin elevateZoom sobre otras imágenes, como las de las listas de productos (nuevos, etc). Hay un ejemplo de esto en el módulo, en la parte de la configuración.

 

Está basado en el plugin jQuery elevateZoom de Andrew Eades (que es software libre). He adaptado el plugin y lo he parcheado para que funcione con Prestashop, y luego lo he comprimido o "minificado" para que se cargue más rápido.

 

El módulo es completamente gratuito y se publica bajo licencia GPL2.

 

Ha sido desarrollado para Prestashop 1.5.x, * EDITADO ahora compatible con 1.4.x, quizás con 1.3.x pero no lo he probado *

El módulo está en tres idiomas: inglés, castellano (español) y catalán. Si alguien quiere traducirlo a otros idiomas, se lo agradecería. Podeis colgar los archivos php de las traducciones en este hilo y las añadiré al módulo.
 
¡Gracias!

 

Código en GitHub - https://github.com/v...ezoom_ps_module
 

Instalación y uso:

 

1. Descomprimir y poner la carpeta "elevatezoom" dentro de la carpeta "modules" en la instalación de Prestashop.

2. Activar el módulo en Módulos (Back office): buscarlo, instalarlo y activarlo con los botones que provee el módulo.
3. En Módulos, hacer click en el botón "Configure" o "Configurar" en el módulo elevateZoom para Prestashop.

4. Poner los ajustes para la página de producto y/o otros zooms y apretar "Guardar".

5. Ver la página de producto y maravillarse B)

 

Por favor, sentíos libres de enviar parches o traducciones en este hilo para que así pueda añadirlas al módulo y daros crédito por ello.

 

Historial de versiones:

1.0.0 Lanzamiento inicial del módulo (atención, solo funciona con 1.5.x)

1.0.1 Añadida compatibilidad con 1.4.x (funciona con ambas versiones)

 

*** Descargas: se puede descargar en el hilo en inglés, en el primer post, donde pone "attached files": http://www.prestasho...ects-on-images/ ***

Attached Files


Edited by vblanch, 16 January 2014 - 09:27 PM.


#2

Posted 15 January 2014 - 10:15 PM

nadie

    PrestaShop Legend

  • Community Moderators
  • 40676 Active Posts
Notificación para vblanch
 
Módulo agregado al índice de módulos gratuitos: http://www.prestasho...s-foro-español/

PD: Gracias por su colaboración con la Comunidad de Prestashop.

Recursos para Prestashop - Víctor José Ródenas Gascó - info@victor-rodenas.com

No ofrezco soporte sobre Prestashop (tanto de forma voluntaria como profesional) desde finales del 2013 e inicios del 2014
victor-rodenas.com/2016/12/05/como-empezo-mi-andadura-en-prestashop-en-el-2010/ | victor-rodenas.com/donar.php


#3

Posted 15 January 2014 - 10:17 PM

vblanch

    PrestaShop Enthusiast

  • Members
  • PipPip
  • 138 Active Posts

Notificación para vblanch
 
Módulo agregado al índice de módulos gratuitos: http://www.prestasho...s-foro-español/

PD: Gracias por su colaboración con la Comunidad de Prestashop.

 

Gracias por colgarlo en la lista nadie, eres super rápido!!!  :D



#4

Posted 15 January 2014 - 10:22 PM

nadie

    PrestaShop Legend

  • Community Moderators
  • 40676 Active Posts

Gracias por colgarlo en la lista nadie, eres super rápido!!!  :D

Un placer !

 

PD: Por cierto, hacia tiempo que no actualizaba el indice, y casi se me va al infierno xD por el editor del foro jajajaj

 

Lo dicho, para la Comunidad es todo un honor el poder usar tu aporte !


Recursos para Prestashop - Víctor José Ródenas Gascó - info@victor-rodenas.com

No ofrezco soporte sobre Prestashop (tanto de forma voluntaria como profesional) desde finales del 2013 e inicios del 2014
victor-rodenas.com/2016/12/05/como-empezo-mi-andadura-en-prestashop-en-el-2010/ | victor-rodenas.com/donar.php


#5

Posted 15 January 2014 - 10:35 PM

nadie

    PrestaShop Legend

  • Community Moderators
  • 40676 Active Posts

Por cierto, 

 

¿Es posible, que subas también el módulo a github: https://github.com/ para que los usuarios puedan hacer colaboraciones de forma mas organizada, dejando el enlace de github en el primer mensaje, lógicamente también conservando el adjunto de la versión estable (ultima versión) del módulo en el primer mensaje (tal como has realizado ahora) ?

 

Saludos,

 

Gracias !


Recursos para Prestashop - Víctor José Ródenas Gascó - info@victor-rodenas.com

No ofrezco soporte sobre Prestashop (tanto de forma voluntaria como profesional) desde finales del 2013 e inicios del 2014
victor-rodenas.com/2016/12/05/como-empezo-mi-andadura-en-prestashop-en-el-2010/ | victor-rodenas.com/donar.php


#6

Posted 16 January 2014 - 10:16 AM

moraira

    PrestaShop Fanatic

  • Members
  • PipPipPipPip
  • 1048 Active Posts

Víctor eres un tío grande



#7

Posted 16 January 2014 - 10:17 AM

moraira

    PrestaShop Fanatic

  • Members
  • PipPipPipPip
  • 1048 Active Posts

jajaja, iba con truco, va por los 2 Víctor claro :)



#8

Posted 16 January 2014 - 01:42 PM

vblanch

    PrestaShop Enthusiast

  • Members
  • PipPip
  • 138 Active Posts

Por cierto, 

 

¿Es posible, que subas también el módulo a github: https://github.com/ para que los usuarios puedan hacer colaboraciones de forma mas organizada, dejando el enlace de github en el primer mensaje, lógicamente también conservando el adjunto de la versión estable (ultima versión) del módulo en el primer mensaje (tal como has realizado ahora) ?

 

Saludos,

 

Gracias !

 

Hola nadie,

si lo pongo en github puedo poner el enlace en el tema? Lo digo porque según las normas que he leido, está prohibido poner enlaces externos a Prestashop!

Saludos


jajaja, iba con truco, va por los 2 Víctor claro :)

 

Gracias por la parte que me toca ^_^



#9

Posted 16 January 2014 - 01:45 PM

nadie

    PrestaShop Legend

  • Community Moderators
  • 40676 Active Posts

Hola nadie,
si lo pongo en github puedo poner el enlace en el tema? Lo digo porque según las normas que he leido, está prohibido poner enlaces externos a Prestashop!
Saludos


Si adjuntas una versión estable del módulo en el mismo foro, tal como tienes ahora, puedes poner el enlace a github como complementario sin problemas y ir añadiendo por ejemplo cada semana, o cada dos días, etc.., en el primer post, los cambios nuevos que se han ido realizando en github. (No pasa nada, no te preocupes)

jajaja, iba con truco, va por los 2 Víctor claro :)


Mi nombre es Nadie, no Victor.  :P

Recursos para Prestashop - Víctor José Ródenas Gascó - info@victor-rodenas.com

No ofrezco soporte sobre Prestashop (tanto de forma voluntaria como profesional) desde finales del 2013 e inicios del 2014
victor-rodenas.com/2016/12/05/como-empezo-mi-andadura-en-prestashop-en-el-2010/ | victor-rodenas.com/donar.php


#10

Posted 16 January 2014 - 02:47 PM

vblanch

    PrestaShop Enthusiast

  • Members
  • PipPip
  • 138 Active Posts

Si adjuntas una versión estable del módulo en el mismo foro, tal como tienes ahora, puedes poner el enlace a github como complementario sin problemas y ir añadiendo por ejemplo cada semana, o cada dos días, etc.., en el primer post, los cambios nuevos que se han ido realizando en github. (No pasa nada, no te preocupes)


Mi nombre es Nadie, no Victor.  :P

 

Hola Nadie,

acabo de poner el enlace al GitHub, voy a hacer lo mismo en el otro módulo.

¡Saludos!



#11

Posted 16 January 2014 - 03:37 PM

nadie

    PrestaShop Legend

  • Community Moderators
  • 40676 Active Posts

Hola Nadie,

acabo de poner el enlace al GitHub, voy a hacer lo mismo en el otro módulo.

¡Saludos!

 

Perfecto !

 

Gracias por su colaboración con la Comunidad de Prestashop.


Recursos para Prestashop - Víctor José Ródenas Gascó - info@victor-rodenas.com

No ofrezco soporte sobre Prestashop (tanto de forma voluntaria como profesional) desde finales del 2013 e inicios del 2014
victor-rodenas.com/2016/12/05/como-empezo-mi-andadura-en-prestashop-en-el-2010/ | victor-rodenas.com/donar.php


#12

Posted 16 January 2014 - 09:30 PM

vblanch

    PrestaShop Enthusiast

  • Members
  • PipPip
  • 138 Active Posts

Hola gente,

lo he hecho compatible con 1.4.x, espero que os sea muy útil.

 

Si algun valiente quiere probar con la 1.3.x, lo que tiene que hacer es cambiar en "elevatezoom.php":

1.4.0.0

por

1.3.0.0

En la función  "public function __construct()". Luego solo hay que instalarlo y probarlo.

Agradecería que alguien lo hiciera y me dijera si va bien o no, ya tengo 2 prestashops instalados y no tengo ganas de más...

Saludos



#13

Posted 18 January 2014 - 05:41 PM

vblanch

    PrestaShop Enthusiast

  • Members
  • PipPip
  • 138 Active Posts

Hola a todos,

los que hayan instalado este módulo, por favor actualicen a la versión 1.0.2 (está colgada en el post en inglés).

Las versiones anteriores dan problemas en Chrome y Opera por un bug en el css que ya está resuelto.

Recuerdo también que el módulo funciona tanto en la 1.4.x como en la 1.5.x.

Saludos :)



#14

Posted 10 February 2014 - 02:42 PM

ghoose

    PrestaShop Apprentice

  • Members
  • PipPip
  • 68 Active Posts

Hola!!

 

Este módulo en principio resuelve todos los problemas que tenía con un trabajo que estoy desarrollando. Y digo en principio, porque ya lo instalé y configuré y no hay manera de que funcione. :S

 

ME interesa que ejecute la ampliación tanto en el product.tpl como en el product_list.tpl Ambos están modificados, te pego la parte implicada:

 

<!-- Products list -->
<ul id="product_list" class="clear">
 
 
 
{foreach from=$products item=product name=products}
 
 
<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
 
<div class="left_block">
{if isset($comparator_max_item) && $comparator_max_item}
<div class="compare">
<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} autocomplete="off"/> 
<label for="comparator_item_{$product.id_product}">{l s='Seleccione para comparar neumáticos'}</label>
</div>
{/if}
</div>
<div class="center_block">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
</a>
 
Y el product.tpl :
 
<!-- product img-->
<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}"/>
<span class="span_link">{l s='Maximize'}</span>
</span>
{else}
<span id="view_full_size">
<img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" />
<span class="span_link">{l s='Maximize'}</span>
</span>
{/if}
</div>
 
Agradezco muchisimo la ayuda !

 

 

 

http://vlmotorsport.com/

 

 

AdminInformation.gif Información sobre su configuración Información del servidor

Información del servidor: Linux #1 SMP Wed Aug 21 04:03:57 EDT 2013 i686

Versión del servidor web: Apache

Versión de PHP: 5.3.28

Límite de memoria: 265M

Tiempo Máximo de ejecución: 30

Configuración de la base de datos

Versión de MySQL: 5.5.35-33.0

Motor MySQL: InnoDB

Prefijo de las tablas: ps_

Configuración la tienda

Versión de PrestaShop: 1.5.5.0

Enlace de su tienda: http://vlmotorsport.com/

Tema actual: ruedas

Configuración de email

Modo de envío de emails: Utiliza la función email() de PHP

Sus datos

Navegador utilizado: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.102 Safari/537.36

 

AdminInformation.gif Compruebe su configuración

Parámetros requeridos: OK

Parámetros opcionales: Por resuelva los siguientes errores

  • magicquotes
  •  

Edited by ghoose, 26 February 2015 - 11:07 AM.


#15

Posted 22 February 2014 - 07:53 PM

Manurf

    PrestaShop Newbie

  • Members
  • Pip
  • 20 Active Posts

Acabo de probarlo y la verdad está fenomenal. Un pedazo de trabajo Victor.

Mil gracias



#16

Posted 23 February 2014 - 12:39 AM

vblanch

    PrestaShop Enthusiast

  • Members
  • PipPip
  • 138 Active Posts

 

Hola!!

 

Este módulo en principio resuelve todos los problemas que tenía con un trabajo que estoy desarrollando. Y digo en principio, porque ya lo instalé y configuré y no hay manera de que funcione. :S

 

ME interesa que ejecute la ampliación tanto en el product.tpl como en el product_list.tpl Ambos están modificados, te pego la parte implicada:

 

<!-- Products list -->
<ul id="product_list" class="clear">
 
 
 
{foreach from=$products item=product name=products}
 
 
<li class="ajax_block_product {if $smarty.foreach.products.first}first_item{elseif $smarty.foreach.products.last}last_item{/if} {if $smarty.foreach.products.index % 2}alternate_item{else}item{/if} clearfix">
 
<div class="left_block">
{if isset($comparator_max_item) && $comparator_max_item}
<div class="compare">
<input type="checkbox" class="comparator" id="comparator_item_{$product.id_product}" value="comparator_item_{$product.id_product}" {if isset($compareProducts) && in_array($product.id_product, $compareProducts)}checked="checked"{/if} autocomplete="off"/> 
<label for="comparator_item_{$product.id_product}">{l s='Seleccione para comparar neumáticos'}</label>
</div>
{/if}
</div>
<div class="center_block">
<a href="{$product.link|escape:'htmlall':'UTF-8'}" class="product_img_link" title="{$product.name|escape:'htmlall':'UTF-8'}">
<img src="{$link->getImageLink($product.link_rewrite, $product.id_image, 'home_default')|escape:'html'}" alt="{$product.legend|escape:'htmlall':'UTF-8'}" {if isset($homeSize)} width="{$homeSize.width}" height="{$homeSize.height}"{/if} />
{if isset($product.new) && $product.new == 1}<span class="new">{l s='New'}</span>{/if}
</a>
 
Y el product.tpl :
 
<!-- product img-->
<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}"/>
<span class="span_link">{l s='Maximize'}</span>
</span>
{else}
<span id="view_full_size">
<img src="{$img_prod_dir}{$lang_iso}-default-large_default.jpg" id="bigpic" alt="" title="{$product->name|escape:'htmlall':'UTF-8'}" width="{$largeSize.width}" height="{$largeSize.height}" />
<span class="span_link">{l s='Maximize'}</span>
</span>
{/if}
</div>
 
Agradezco muchisimo la ayuda !

 

 

 

http://vlmotorsport.com/neumaticos

 

 

AdminInformation.gif Información sobre su configuración Información del servidor

Información del servidor: Linux #1 SMP Wed Aug 21 04:03:57 EDT 2013 i686

Versión del servidor web: Apache

Versión de PHP: 5.3.28

Límite de memoria: 265M

Tiempo Máximo de ejecución: 30

Configuración de la base de datos

Versión de MySQL: 5.5.35-33.0

Motor MySQL: InnoDB

Prefijo de las tablas: ps_

Configuración la tienda

Versión de PrestaShop: 1.5.5.0

Enlace de su tienda: http://vlmotorsport.com/neumaticos/

Tema actual: ruedas

Configuración de email

Modo de envío de emails: Utiliza la función email() de PHP

Sus datos

Navegador utilizado: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_8) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/32.0.1700.102 Safari/537.36

 

AdminInformation.gif Compruebe su configuración

Parámetros requeridos: OK

Parámetros opcionales: Por resuelva los siguientes errores

  • magicquotes
  •  

 

 

Hola,

En el backend, en la parte de configuración, hay un ejemplo de cómo usarlo para las listas de productos. Si tu tema no deriva de un "default" tendrás que modificar las llamadas jQuery. No resulta complicado, pero tienes que saber algo de jQuery. Lo siento pero no puedo dedicarme a resolver esta clase de problemas, te sugiero que contactes con un programador.

 

Acabo de probarlo y la verdad está fenomenal. Un pedazo de trabajo Victor.

Mil gracias

 

Me alegro de que te sirva ^_^  Tened en cuenta que en Safari* va un poco lento, no tengo claro porqué... sospecho que al arreglar el código para dar soporte a Chrome (no iba bien). Si algún gurú del jQuery quiere echarle un vistazo y encuentra la solución que me lo diga, y así entre todos hacemos un módulo mejo :D

 

Saludos

 

*Editado: quería decir Safari!


Edited by vblanch, 23 February 2014 - 12:40 AM.


#17

Posted 06 April 2014 - 07:19 PM

Antonio S

    PrestaShop Apprentice

  • Members
  • PipPip
  • 49 Active Posts

Buenas a todos

pues yo también soy novatillo en todo esto pero apasionado.

El tema es que quería probar este módulo, lo descargo sin problemas y lo cargo en prestashop de forma existosa

 

Pero luego no me aparece en el listado. Es como un fantasma. No puedo encontrarlo en la lista de módulos y por tanto no puedo activarlo

 

alguna idea???



#18

Posted 07 April 2014 - 04:41 PM

vblanch

    PrestaShop Enthusiast

  • Members
  • PipPip
  • 138 Active Posts

Buenas a todos

pues yo también soy novatillo en todo esto pero apasionado.

El tema es que quería probar este módulo, lo descargo sin problemas y lo cargo en prestashop de forma existosa

 

Pero luego no me aparece en el listado. Es como un fantasma. No puedo encontrarlo en la lista de módulos y por tanto no puedo activarlo

 

alguna idea???

 

Hola Antonio S,

lo primero, qué versión de Prestashop usas?

Has copiado el módulo en /modules/?

Debería salirte /modules/elevatezoom/[todos los archivos del módulo]

Una vez hecho esto, tienes que irte a módulos y usar la búsqueda. Busca "elevatezoom" y debería salirte.

 

Si no es así, algo has hecho mal. Fijate también en no haber copiado el módulo en una subcarpeta dentro de elevatezoom (a veces al descomprimir se crea otra carpeta).

 

Saludos



#19

Posted 08 April 2014 - 04:14 PM

askinjew

    PrestaShop Addict

  • Members
  • PipPipPip
  • 759 Active Posts

superr thanks alot nice modül. :)


''Bilgi Kutsaldır, Paylaşıldıkça Değeri Artar" ...
www.askinhobi.com


#20

Posted 09 April 2014 - 12:18 AM

Antonio S

    PrestaShop Apprentice

  • Members
  • PipPip
  • 49 Active Posts

Hola Antonio S,

lo primero, qué versión de Prestashop usas?

Has copiado el módulo en /modules/?

Debería salirte /modules/elevatezoom/[todos los archivos del módulo]

Una vez hecho esto, tienes que irte a módulos y usar la búsqueda. Busca "elevatezoom" y debería salirte.

 

Si no es así, algo has hecho mal. Fijate también en no haber copiado el módulo en una subcarpeta dentro de elevatezoom (a veces al descomprimir se crea otra carpeta).

 

Saludos

Pues era eso

es que en el .zip había dos módulos, uno del zoom y otro que se llama screenhot, que no se para que es...

 

muchas gracias





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cookies help us deliver our services. By using our services, you agree to use our cookies.     Learn more