Jump to content

utiliser thickbox et jqzoom ensemble

onetidd
 Share

Recommended Posts

Trolet Newbie

Trolet

Posted
Posted

bonjour,

cette fonction est activée à l'origine. Après si tu penses l'avoir désactivée tu vas dans le Back Office --> Préférences --> Produits et là tu as

Activer JqZoom au lieu de Thickbox sur les pages produits :
il te suffit de cocher NON.

après ça dépend peut-être de ta version et des modifs faites...si tu veux plus d'aide il va falloir être plus loquace ! :cheese:
Link to comment
Share on other sites
onetidd Newbie

onetidd

Posted
  • Author
Posted

Bonjour,

Merci de votre réponse, mais je ne comprends pas car malgré que je l'ai désactivé sa ne fonctionne toujours pas.... en fait je n'ai que la thickbox d'activée...

http://perso.ovh.net/~baobag/product.php?id_product=16

Ce serait possible de les activer en meme temps? C'est à dire de proposer juste au clic d'utiliser le thickbox, sinon au survol de la souris proposer le jqzoom.

Link to comment
Share on other sites
Trolet Newbie

Trolet

Posted
Posted

Ah OK en gros tu veux utiliser les deux méthodes en même temps je croyais que tu ne n'arrivais pas à utiliser ThickBox.

Alors pour ça je ne sais pas mais je te conseille de renommer le sujet car ce n'est pas très explicite. Peut-être qu'avec quelquechose du style : "utiliser thickbox et jqzoom ensemble" ça parlera plus

désolé mais j'avoue avoir atteint mon niveau d'incompétence :lol:

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted

Salut,

Essaye ça :


ouvre le fichier product.tpl de ton thème et cherche les lignes suivantes :


getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="{if !$jqZoomEnabled}thickbox{/if} {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">
getImageLink($product->link_rewrite, $imageIds, 'medium')}" alt="{$image.legend|htmlspecialchars}" height="{$mediumSize.height}" width="{$mediumSize.width}" />



localise surtout ce bout de code :

class="{if !$jqZoomEnabled}thickbox{/if} {if $smarty.foreach.thumbnails.first}shown{/if}"



et remplace le par :

class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}"



Puis enregistre et test.

N'oublie pas d'activer l'effet zoom dans tes préférences produits.

V++

Atch

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted

Pour ma part, j'ai répondu à la première question du premier message lol

J'ai testé en local et cela fonctionne parfaitement.

Maintenant, s'il y a eu des modifications sur le theme je ne peux pas plus t'aider sans savoir ce que tu as fais.

PS : As tu activé "jqzoom"?



Edit: si cela à l'air d'être activé on voit le script.

Par contre tu dois avoir une boulette dans ton header.tpl

Tous tes appels de scripts et css ce font dans la balise body alors qu'ils devraient être dans <head>.
quand on édite, on s'aperçoit que tu as un

qui démarre dans <head>

C'est assez bizarre.


V++

Atch
Link to comment
Share on other sites
onetidd Newbie

onetidd

Posted
  • Author
Posted

Bonjour, oui j'ai activé le jqzoom... et pouvez m'aider à corriger l'erreur svp car c'est un template acheté qui est là.

merci

VOICI MON HEADER.tpl


<html >
   <head>
       <title>{$meta_title|escape:'htmlall':'UTF-8'}</title>
{if isset($meta_description) AND $meta_description}
       <meta name="description" content="{$meta_description|escape:htmlall:'UTF-8'}" />
{/if}
{if isset($meta_keywords) AND $meta_keywords}
       <meta name="keywords" content="{$meta_keywords|escape:htmlall:'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" />
       <link rel="shortcut icon" type="image/x-icon" href="{$img_ps_dir}favicon.ico" />
       <link href="{$base_dir}js/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />
{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}
       [removed][removed]
       [removed]
           var baseDir = '{$content_dir}';
           var static_token = '{$static_token}';
           var token = '{$token}';
           var priceDisplayPrecision = {$priceDisplayPrecision*$currency->decimals};
       [removed]
       [removed][removed]
       [removed][removed]
       [removed][removed]
       [removed][removed] 
       [removed][removed]
{if isset($js_files)}
   {foreach from=$js_files item=js_uri}
   [removed][removed]
   {/foreach}
{/if}
       {$HOOK_HEADER}
   </head>



   <body {if $page_name}id="{$page_name|escape:'htmlall':'UTF-8'}"{/if}>


<!--  Dbut Menu -->





       {$HOOK_TOP}
        



{l s='Home'}
{l s='About us'}
{l s='New products'}
{l s='Legal notice'}
{l s='Contact us'}





<!--  Fin Menu -->



           <!-- Left -->

               {$HOOK_LEFT_COLUMN}

           <!-- Center -->
Link to comment
Share on other sites
onetidd Newbie

onetidd

Posted
  • Author
Posted

hum j'ai cherché mis je ne trouve pas...

Voici le haut de mon product.tpl (jusqu'à ligne 34):

{include file=$tpl_dir./errors.tpl}
{if $errors|@count == 0}
[removed]
// <![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};




mon index.tpl, complet:

{$HOOK_HOME}

Link to comment
Share on other sites
Atch Newbie

Atch

Posted
Posted

Sur ton site, tout en haut.

Un coup de firebug pour le localiser, mais impossible de te dire dans quel fichier il est.

Sinon fait un essai en vidant ton cache smarty, on ne sait jamais.

taboutique/tools/smarty/compile.

efface tout sauf l'index.

V++

Atch

Link to comment
Share on other sites
onetidd Newbie

onetidd

Posted
  • Author
Posted

Bizarre pourtant je l'ai supprimé et je ne le vois plus. Edit... maintenant je vois: id="index">
RE EDIT: j'ai trouvé l'erreur dans le header.tpl... merci, maintenant que dois je faire concernant le jqzoom?

Hum bon voilà j'ai un soucis... lorsque je rectifie le code dans le header.tpl, l'effet de zoom de images enlarge sur les catégories devient incorrect (zoom très mal, pas centré du tout).

Que dois je faire svp?

Link to comment
Share on other sites
  • 1 month later...
pubntrash Newbie

pubntrash

Posted
Posted

Salut,

Dans mon cas, j'ai une thickbox sur mon produit mais un jzzoom sur mes coloris, ça fonctionne.
Dans le BO, j'active ThickBox (c'est plus simple mais je modifie le code de vérification de l'activation de jqzoom

Tu as une modif, entre autres, à faire dans jquery.product.js, dans le dossier TaBoutique\js\jquery


//set jqZoom parameters if needed
// if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled) -> MODIF
// { -> MODIF
$('img.jqzoom').jqueryzoom({
xzoom: 200, //zooming div default width(default width value is 200)
yzoom: 310, //zooming div default width(default height value is 200)
offset: 21 //zooming div default offset(default offset value is 10)
//position: "right" //zooming div position(default position value is "right")
});
// } -> MODIF

Link to comment
Share on other sites
onetidd Newbie

onetidd

Posted
  • Author
Posted

Merci beaucoup de la réponse j'essaye et je vous dis ce qu'il en est ^^.
Edit: Je viens de me rendre compte que je ne possédais pas ce fichier... Est-ce un module spécial? ou une simple modif? Sinon serait-il possible que vous partagiez le votre?

Merci

Link to comment
Share on other sites
pubntrash Newbie

pubntrash

Posted
Posted

Excuses, je n'ai pas été assez clair.

Dans productj.js, aux alentours de la ligne 344 (PrestaShop 1.2.4), tu dois avoir le code suivant (PrestaShop 1.2.4) :

    //set jqZoom parameters if needed
   if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
   {
       $('img.jqzoom').jqueryzoom({
           xzoom: 200, //zooming div default width(default width value is 200)
           yzoom: 310, //zooming div default width(default height value is 200)
           offset: 21 //zooming div default offset(default offset value is 10)
           //position: "right" //zooming div position(default position value is "right")
       });
   }



Il vérifie si jqzoom est coché dans le BackOffice et, dans ce cas, exécute les lignes suivantes.
Or, il faut l'obliger à exécuter le code bien que ThickBox soir paramétré en BO. Il faut donc simplement mettre des // devant le test pour le transformer en simple commentaire. Plus de test ergo le jqzoom est actif.

Tu dois donc modifier les lignes ci-dessus pour avoir :

    //set jqZoom parameters if needed
   // if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
   // {
       $('img.jqzoom').jqueryzoom({
           xzoom: 200, //zooming div default width(default width value is 200)
           yzoom: 310, //zooming div default width(default height value is 200)
           offset: 21 //zooming div default offset(default offset value is 10)
           //position: "right" //zooming div position(default position value is "right")
       });
   // }

Link to comment
Share on other sites
pubntrash Newbie

pubntrash

Posted
Posted

Le product.js de la 1.2.5.0 a 390 lignes et la 344 correspond bien à //set jqZoom parameters if needed

Je viens de télécharger la 1.2.5.0 et tu trouves le fichier à modifier dans prestashop\themes\prestashop\js
(si tu utilises le thème prestashop et si tu as installé ta boutique dans le dossier prestashop)

Link to comment
Share on other sites
David Niry Newbie

David Niry

Posted
Posted

Lorsque j'ai activé jqZoom et Thickbox en même temps, un petit problème se produisait: la première image affichait un ? dans la div jqZoom. Il fallait d'abord faire un hover / agrandir une autre miniature puis revenir sur la première image pour que ça charge.

Corrigé comme suit dans /themes/mon_theme/products.js vers la ligne 315:

$(document).ready(function()
{

// Rajouter cette ligne
$('#bigpic').attr('alt', $('#views_block li:first a').attr('href')); 

...

}

Link to comment
Share on other sites
  • 1 year later...
sandrine1973 Newbie

sandrine1973

Posted
Posted
Excuses, je n'ai pas été assez clair.

Dans productj.js, aux alentours de la ligne 344 (PrestaShop 1.2.4), tu dois avoir le code suivant (PrestaShop 1.2.4) :

    //set jqZoom parameters if needed
   if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
   {
       $('img.jqzoom').jqueryzoom({
           xzoom: 200, //zooming div default width(default width value is 200)
           yzoom: 310, //zooming div default width(default height value is 200)
           offset: 21 //zooming div default offset(default offset value is 10)
           //position: "right" //zooming div position(default position value is "right")
       });
   }



Il vérifie si jqzoom est coché dans le BackOffice et, dans ce cas, exécute les lignes suivantes.
Or, il faut l'obliger à exécuter le code bien que ThickBox soir paramétré en BO. Il faut donc simplement mettre des // devant le test pour le transformer en simple commentaire. Plus de test ergo le jqzoom est actif.

Tu dois donc modifier les lignes ci-dessus pour avoir :

    //set jqZoom parameters if needed
   // if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
   // {
       $('img.jqzoom').jqueryzoom({
           xzoom: 200, //zooming div default width(default width value is 200)
           yzoom: 310, //zooming div default width(default height value is 200)
           offset: 21 //zooming div default offset(default offset value is 10)
           //position: "right" //zooming div position(default position value is "right")
       });
   // }



Je déterre ce topic... Je souhaite egalement activer la thickbox et le jqzoom en meme temps. J'ai fais ta modif ci dessus en laissant activé JQZOOM dans l'administrator. Or cela n'a pas marché :-( Ai-je oublié quelque chose?
Link to comment
Share on other sites
David Niry Newbie

David Niry

Posted
Posted

Aie... Ca fait vraiment longtemps... Ma mémoire est un peu poussiéreuse...

Je ne me souviens plus exactement des modifs que j'avais faites, mais si voulez, vous pouvez aller sur une fiche produit sur www.arthusandco.com et récupérer le code. Note: c'est une 1.2.5 (migration vers 1.4 prévue dans le courant de l'année), donc je ne sais pas ce que cela peut donner sur une 1.3, et encore moins une 1.4. JqZoom est activé dans mon back-office.

Link to comment
Share on other sites
David Niry Newbie

David Niry

Posted
Posted

Bon, je ne garantis rien en l'état, mais voici le code :

/themes/mon_theme/product.tpl:


       <!-- product img-->

       {if $have_image}
getImageLink($product->link_rewrite, $cover.id_image, 'large')}" class="jqzoom" alt="{$link->getImageLink($product->link_rewrite, $cover.id_image, 'jqzoom')}" id="bigpic"/>
       {else}
name|escape:'htmlall':'UTF-8'}" />
       {/if}


       {if count($images) > 0}
       <!-- thumbnails -->



           {assign var=cnt value=1}
               {foreach from=$images item=image name=thumbnails}
               {assign var=imageIds value=`$product->id`-`$image.id_image`}

getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox{if $smarty.foreach.thumbnails.first} shown{/if}" title="{$image.legend|htmlspecialchars}">
getImageLink($product->link_rewrite, $imageIds, 'small')}" alt="{$image.legend|htmlspecialchars}" height="50" width="50" />


               {assign var=cnt value=$cnt+1}
               {/foreach}



       {/if}



/themes/mon_theme/js/product.js:

//To do after loading HTML
$(document).ready(function()
{
   //init the serialScroll for thumbs
   $('#thumbs_list').serialScroll({
       items:'li:visible',
       prev:'a#view_scroll_left',
       next:'a#view_scroll_right',
       axis:'x',
       offset:0,
       start:0,
       stop:true,
       onBefore:serialScrollFixLock,
       duration:700,
       step: 2,
       lazy: true,
       lock: false,
       force:false,
       cycle:false
   }); 

   $('#thumbs_list').trigger('goto', 1);// SerialScroll Bug on goto 0 ?
   $('#thumbs_list').trigger('goto', 0);


   // Init jqZoom first image
   $('#bigpic').attr('alt', $('#views_block li:first a').attr('href'));

   //hover 'other views' images management
   $('#views_block li a').hover(
       function(){displayImage($(this));},
       function(){}
   );

   //set jqZoom parameters if needed
   if (typeof(jqZoomEnabled) != 'undefined' && jqZoomEnabled)
   {
       $('img.jqzoom').jqueryzoom({
           xzoom: 348, //zooming div default width(default width value is 200)
           yzoom: 350, //zooming div default width(default height value is 200)
           offset: 40 //zooming div default offset(default offset value is 10)
           //position: "right" //zooming div position(default position value is "right")
       });
   }

   //add a link on the span 'view full size' and on the big image
   $('span#view_full_size, div#image-block img').click(function(){
       $('#views_block li a.shown').click();
   });

   //catch the click on the "more infos" button at the top of the page
   $('div#short_description_block p a.button').click(function(){
       $('#more_info_tab_more_info').click();
       $.scrollTo( '#more_info_tabs', 1200 );
   });

   // Hide the customization submit button and display some message
   $('p#customizedDatas input').click(function() {
       $('p#customizedDatas input').hide();
       $('p#customizedDatas').append(' ' + uploading_in_progress);
   });

   //init the price in relation of the selected attributes
   if (typeof productHasAttributes != 'undefined' && productHasAttributes)
       findCombination(true);

   //
   $('a#resetImages').click(function() {
       updateColorSelect(0);
   });
});



La partie ajoutée est:

// Init jqZoom first image
$('#bigpic').attr('alt', $('#views_block li:first a').attr('href'));

Link to comment
Share on other sites
Reda OULED Newbie

Reda OULED

Posted
Posted

Bonjour,

j'avais le même problème que vous alors ce que j'ai fait c'est une petite modification dans product.tpl

vous cherché :

getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="[b]{if !$jqZoomEnabled}thickbox{/if}[/b] {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">



et vous le remplacé par :

getImageLink($product->link_rewrite, $imageIds, 'thickbox')}" rel="other-views" class="thickbox {if $smarty.foreach.thumbnails.first}shown{/if}" title="{$image.legend|htmlspecialchars}">



la modification consiste a remplacé {if !$jqZoomEnabled}thickbox{/if} par thickbox

Link to comment
Share on other sites

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...