Jump to content

[Tips] Lightbox & Thickbox & Prestashop

hairvay
 Share

Recommended Posts

hairvay Newbie

hairvay

Posted
Posted

Salut à tous,

Hi everyone,

 

petit tutoriel pour installer Lightbox ou Thickbox (en fonction de vos goûts et de vos habitudes) sur ce bel outil. Je pense que certains vont être content !

A little tutorial for installing Lightbox or Thickbox (according to your tastes and habits) into this great app. A few of you are bound to be pleased I think!

 

Attention, je fais la modif uniquement que sur un seul fichier. A vous par la suite d'aller fouiller à droite et à gauche.

Please note: here I modify just one file. After that it's up to you to dig around for more.

 

On va commencer par le plus simple : Thickbox -> La librairie jquery est déjà installée dans prestashop. Voici la marche à suivre.

Let's start with the easier one: Thickbox -> The jquery library is already installed in PrestaShop. Here are the steps to follow.

 

1/ Ouvrez le fichier themes/default/product.tpl

1/ Open the themes/default/product.tpl file.

2/ En première ligne, remplacez :

2/ In the first line, replace:

<script type="text/javascript" src="{$js_dir}getimage.js"></script>

par / with

<script type="text/javascript" src="{$base_dir}js/jquery/jquery.pack.js"></script>
<script type="text/javascript" src="{$base_dir}js/jquery/thickbox-compressed.js"></script>
<link rel="stylesheet" href="{$base_dir}css/thickbox.css" type="text/css" media="screen" />

 

3/ Cherchez la ligne suivante :

3/ Look for the following line:

<img id="bigpic" src="{$img_prod_dir}{$cover.id_image}-large.jpg" alt="{$product->link_rewrite}" title="{$product->link_rewrite}" 
			onclick="window.open('zoom.php?id_image='+getE('bigpic').id_image, '', 'width=auto, height=auto, resizable=yes');" onmouseover="style.cursor='pointer';" />

et remplacez par : / and replace it with:

<a class="thickbox" href="{$img_prod_dir}{$cover.id_image}.jpg" rel="lightbox" title="{$product->link_rewrite}">
                <img rel="lightbox" id="bigpic" border="0" src="{$img_prod_dir}{$cover.id_image}-large.jpg" title="{$product->link_rewrite}"/>
                </a>

4/ Cherchez la ligne suivante :

4/ Look for the following line:

<img id="minImage_{$image.id_image}" class="min_image" src="{$img_prod_dir}{$product->id}-{$image.id_image}-small.jpg" alt="{$image.legend}" title="{$image.legend}" onclick="onClickImage('{$image.id_image}', '{$image.legend}', '{$img_prod_dir}{$product->id}-{$image.id_image}-large.jpg')" />

et remplacez par : / and replace it with:

<a class="thickbox" title="{$image.legend}" href="{$img_prod_dir}{$product->id}-{$image.id_image}.jpg" rel="lightbox" ><img src="{$img_prod_dir}{$product->id}-{$image.id_image}-small.jpg"/></a>

 

5/ Dernière étape : enlever le code désormais superflu.

5/ Last step: Take out the now-superfluous code.

 

Fin de la première étape avec l'installation de la thickbox. Je reviens un peu plus tard pour Lightbox.

That's the end of the first step, installing Thickbox. I'll be back a little later with Lightbox.

 

@+

cya

Link to comment
Share on other sites
Peter Wilson Newbie

Peter Wilson

Posted
Posted

Merci hairvay :)

 

Pour info :

 

Si vous vous servez de Lightbox pour votre boutique en ligne, vous serez obligé(e) de citer le nom de l'auteur original, Lokesh Dhakar, selon la Paternité 2.5 Générique. Une donation est facultative.

 

Quant à Thickbox, c'est de l'open-source donc utilisable sans contrainte. Une donation est facultative.

 

 

FYI :

 

If you use Lightbox for your store, on your Front Office/Web storefront you must include attribution to the creator, Lokesh Dhakar, as per its Attribution 2.5 Generic license. Donations are requested but optional.

 

Thickbox uses an MIT License/GNU License, i.e., free to use without restriction, although donations are requested.

Link to comment
Share on other sites
hairvay Newbie

hairvay

Posted
  • Author
Posted

Mise à jour le 24/01

 

Deuxième partie sur Lightbox avec la condition énoncée ci dessus par Peter. Comme Lightbox n'est pas inséré d'origine à PS, je l'ai mis dans les dossiers du thème.

Second part on Lightbox with the condition announced above by Peter. Since Lightbox isn't included natively in PS, I put it into the Theme folders.

 

1/ Première étape, placez les fichiers ci-joints dans les dossiers correspondants :

1/ First of all, put the attached files into their corresponding folders:

lightbox.js -> themes/default/js

prototype.js -> themes/default/js

scriptaculous.js -> themes/default/js

lightbox.css -> themes/default/css

 

2/ Ouvrez le fichier themes/default/header.tpl

2/ Open the themes/default/header.tpl file.

Ajoutez dans le <head>

Add the <head> section :

 

<link href="{$css_dir}lightbox.css" rel="stylesheet" type="text/css" />

 

3/ Ouvrez le fichier themes/default/product.tpl

3/ Open the themes/default/product.tpl file.

 

4/ En première ligne, remplacez :

4/ In the first line, replace:

 

<script type="text/javascript" src="{$js_dir}getimage.js"></script>

 

par / with

<!--<script type="text/javascript" src="{$js_dir}prototype.js"></script>
<script type="text/javascript" src="{$js_dir}scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="{$js_dir}lightbox.js"></script>

 

5/ Cherchez la ligne suivante :

5/ Look for the following line:

 

<img id="bigpic" src="{$img_prod_dir}{$cover.id_image}-large.jpg" alt="{$product->link_rewrite}" title="{$product->link_rewrite}" 
			onclick="window.open('zoom.php?id_image='+getE('bigpic').id_image, '', 'width=auto, height=auto, resizable=yes');" onmouseover="style.cursor='pointer';" />

 

et remplacez par : / and replace it with:

<a href="{$img_prod_dir}{$cover.id_image}.jpg" rel="lightbox" title="{$product->link_rewrite}">
                <img rel="lightbox[galerie]" id="bigpic" border="0" src="{$img_prod_dir}{$cover.id_image}-large.jpg" title="{$product->link_rewrite}"/>
                </a>

 

6/ Cherchez la ligne suivante :

6/ Look for the following line:

<img id="minImage_{$image.id_image}" class="min_image" src="{$img_prod_dir}{$product->id}-{$image.id_image}-small.jpg" alt="{$image.legend}" title="{$image.legend}" onclick="onClickImage('{$image.id_image}', '{$image.legend}', '{$img_prod_dir}{$product->id}-{$image.id_image}-large.jpg')" />

 

et remplacez par : / and replace it with:

<a title="{$image.legend}" href="{$img_prod_dir}{$product->id}-{$image.id_image}.jpg" rel="lightbox[galerie]" ><img src="{$img_prod_dir}{$product->id}-{$image.id_image}-small.jpg"/></a>

 

7/ Dernière étape : enlever le code désormais superflu.

7/ Last step: Take out the now-superfluous code.

 

Voili, voilou pour la lightbox !

That about does it for Lightbox!

lightbox.js

prototype.js

scriptaculous.js

lightbox.css

Link to comment
Share on other sites
hairvay Newbie

hairvay

Posted
  • Author
Posted

Salut,

 

j'ai oublié de préciser qu'il fallait mettre la feuille de style dans le header.  :P

 

voici la rectification :

 

dans themes/default/header.tpl

 

dans le <head>, ajoutez :

<link rel="stylesheet" href="{$css_dir}ligthbox.css" type="text/css" media="screen" />

 

J'ai modifié le post précédent.

 

@+

Link to comment
Share on other sites
Bernie Noël Newbie

Bernie Noël

Posted
Posted

Merci pour ce hack bien utile , mais je rebondis sur ce post car apres l'installation tres rapide de Thickbox pour la fiche produit , je me suis rendu compte que les 2 boutons latéraux de changement d'images ne fonctionnent plus et que le bouton "voir plus grand " renvoie toujours le popup traditionel .

 

Ma question était de savoir si il etait possible que la fonction Thickbox ou lightbox soit active uniquement sur le lien "voir plus grand "  de cette maniere nous ne perdons pas l'option de voir les photos complémentaires (miniatures)en mode large sans passer par le popup.

 

une photo sera plus parlant:

light.jpg

 

 

Link to comment
Share on other sites
wouter Newbie

wouter

Posted
Posted

The tips on lightbox are not complete. If u have more then 1 image for your product, thickbox only uses the first one. To fix that, give the <A> around your big picture and id 'linkpic'. And then add the following code at the bottom of getimage.js in the function onClickImage:

 

var linkpic = getE('linkpic');

linkpic.href = link;

Link to comment
Share on other sites
Peter Wilson Newbie

Peter Wilson

Posted
Posted

Je cite wouter, de cette discussion.

 

The tips on lightbox are not complete. If u have more then 1 image for your product, thickbox only uses the first one. To fix that, give the <A> around your big picture and id 'linkpic'. And then add the following code at the bottom of getimage.js in the function onClickImage:

 

var linkpic = getE('linkpic');

linkpic.href = link;

 

C'est-à-dire :

 

Les infos sur Lightbox ne sont pas complètes. Si l'on dispose de plus d'une image d'un produit, Thickbox ne se sert que de la première. Pour régler ça, ajoutez au <A> autour de ta grande image le id 'linkpic'. Ensuite il faut ajouter le code suivant vers la fin de getimage.js dans la fonction onClickImage:

 

var linkpic = getE('linkpic');

linkpic.href = link;

Link to comment
Share on other sites
norbert Newbie

norbert

Posted
Posted

Add the <head> section :

 

Code:

 

<link href="{$css_dir}lightbox.css" rel="stylesheet" type="text/css" />

 

where in the header sahll i exactely add this?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<base href="http://{$smarty.server.HTTP_HOST}{$base_dir}" />

<title>{$meta_title|utf8_encode}</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

{if isset($meta_description)}<meta name="description" content="{$meta_description}" />{/if}

{if isset($meta_keywords)}<meta name="keywords" content="{$meta_keywords}" />{/if}

<meta name="robots" content="{if isset($nobots)}no{/if}index,follow" />

<link rel="shortcut icon" href="{$img_dir}favicon.ico" />

<link href="{$css_dir}style.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="{$js_dir}layer.js"></script>

<script type="text/javascript" src="{$base_dir}js/tools.js"></script>

<script type="text/javascript" src="{$base_dir}js/attributesFront.js"></script>

<script type="text/javascript" src="{$base_dir}js/jquery/jquery.pack.js"></script>

</head>

 

<body>

<div id="page">

<!-- Header -->

<form action="{$request_uri}" method="post">

<div id="header">

{$HOOK_HEADER}

 

<h1 class="real_h1" title="{$shop_name}">

<a href="{$base_dir}" title="{$shop_name}"><img alt="{$shop_name}" src="{$base_dir}img/logo.jpg"/></a>

</h1>

 

<div id="header_nav" class="header_nav">

{l s='Welcome'}, {if $logged}<b>{$customerName}</b> (<a href="index.php?mylogout">{l s='Log out'}</a>){else}<a href="my-account.php">{l s='Log in'}</a>{/if}<br />

<a href="my-account.php">{l s='Your Account'}</a>

<span class="pipe_spacer"></span>|<span class="pipe_spacer"></span>

<a href="order.php"><img src="{$img_dir}icon/basket.png" alt="{l s='Your Shopping Cart'}" title="{l s='Your Shopping Cart'}" class="bottom" /></a>

<a href="order.php">{l s='Cart:'}</a> {if $cart_qties > 0}{$cart_qties} {if $cart_qties > 1}{l s='products'}{else}{l s='product'}{/if}

({convertPrice price=$cart->getOrderTotal(true, 4)}){else}{l s='(empty)'}{/if}

</div>

{if sizeof($languages) != 1}

<div id="languages">

<b>{l s='Language:'}</b><br />

<div class="tspace">

{foreach from=$languages key=k item=language}

<a href="{$link->getLanguageLink($language.id_lang, $language.name)}"><img src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.name}" title="{$language.name}"

{if $language.iso_code == $lang_iso}class="selected_language"{/if} /></a>

{/foreach}

</div>

</div>

{/if}

{if sizeof($currencies) != 1}

<div id="currencies">

<b>{l s='Currency:'}</b><br />

<select name="id_currency" class="currency_select tspace">

{foreach from=$currencies key=k item=currency_browsed}

<option value="{$currency_browsed.id_currency}"{if $id_currency_cookie == $currency_browsed.id_currency} selected="selected"{/if}>{$currency_browsed.name}</option>

{/foreach}

</select>

<input type="image" src="{$img_dir}btn-ok.gif" name="SubmitCurrency" class="text-bottom" />

</div>

{/if}

</div>

</form>

 

<!-- Content -->

<div id="content">

 

<!-- Left -->

<div id="left">

{$HOOK_LEFT_COLUMN}

 

<!-- Sitemap -->

<div class="sitemap">

<a href="sitemap.php"><img src="{$img_dir}icon/sitemap.png" alt="{l s='sitemap'}" title="{l s='sitemap'}" /></a> 

<a href="sitemap.php">{l s='sitemap'}</a>

</div>

<!-- Contact -->

<div class="contact">

<a href="contact-form.php"><img src="{$img_dir}icon/contact.png" alt="{l s='contact'}" title="{l s='contact'}" /></a> 

<a href="contact-form.php">{l s='contact'}</a>

</div>

 

</div>

<!-- Center -->

<div id="center">

 

 

 

Link to comment
Share on other sites
  • 1 month later...
  • 2 months later...
BeStMaker Newbie

BeStMaker

Posted
Posted

Merci pour ce hack bien utile , mais je rebondis sur ce post car apres l'installation tres rapide de Thickbox pour la fiche produit , je me suis rendu compte que les 2 boutons latéraux de changement d'images ne fonctionnent plus et que le bouton "voir plus grand " renvoie toujours le popup traditionel .

 

Ma question était de savoir si il etait possible que la fonction Thickbox ou lightbox soit active uniquement sur le lien "voir plus grand "  de cette maniere nous ne perdons pas l'option de voir les photos complémentaires (miniatures)en mode large sans passer par le popup.

 

une photo sera plus parlant:

light.jpg

 

 

 

I have the same problem; how we fix it?

Link to comment
Share on other sites
  • 4 months later...
Fabrice Newbie

Fabrice

Posted
Posted

bon, j'y suis presque arrivé.

j'arrive à obtenir l'effet souhaité (ou presque)

je souhaite poser un code qui appelle une variable.
si je le pose dans le TPL directement, ça fonctionne.

par contre si je le pose dans l'éditeur via html dans smarty, le code est interprêté.

comment puis-je m'y prendre pour éviter cela ? merci !!

2288_WK9zzr43KOSxN8hwyFXx_t

Link to comment
Share on other sites
Fabrice Newbie

Fabrice

Posted
Posted

Salut Nommam,

oui, j'ai vu. moi j'essaie de poser un lien dans l'éditeur (piloté par smarty)

mais impossible : tous mes liens rel_ sont interprétés.
je ne sais plus comment faire pour que l'appel de l'url passe par la box.

tu aurais ue idée comment on peut faire avec smarty ?
j'ai bien essayé {ldelim} et {rdelim} ou aussi {literal} et {/literal} mais que dalle.
tu aurais une idée? suis coincé à mort là.
merci !

Link to comment
Share on other sites
Nommam Newbie

Nommam

Posted
Posted

FancyBox Avance Voir http://www.psfrance.org/forums/showthread.php?p=1916#post1916


Non Aucune idée, si j'ai bien tout pigé, quand tu tape ta description dans la fiche article, tu place ton lien avec le rel, et a l'affichage de la page il n'y est plus !
As tu regardé dans ta base mysql ( table ps_product_lang -> avec l'id_product tu va vite le retrouver ) si il y est ( car si il n'y est pas c'est un probleme avec tinymce, et plus avec smarty )

Link to comment
Share on other sites
Fabrice Newbie

Fabrice

Posted
Posted

merci pour ta réponse.
oui, tu as bien compris. mais je ne suis pas allé aussi loin : c'est au niveau de l'éditeur que ça merde.
en fait, essaye voir avec ça :
<*a href="http://www.agence-eureka.com" title="CAPTION" rel="gb_page[200, 200]">HTML

place-le dans un éditeur (l'éditeur de la page d'accueil fera l'affaire)
clic sur HTML, pose le code, valide, revient dans le html, et hop : disparu.

c'est bien smarty qui merde là non ?
une idée ?
j'ai cherché un peu partout sans trouver de soluce.

penses-tu qu'il soit possible d'appeler cette page avec un autre code ?

merci pour toute suggestion.

Link to comment
Share on other sites
  • 3 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...