Agrandissement image dans CSM

[binco]

Bonjour

 

Je suis débutant en informatique.

 

J'ai crée une page CSM dans laquelle je veux placer des image qui vont s'agrandir au survol.

 

En analysant le code source des pages prestashop des éléments de la page Produit semblent correspondre à ce que je souhaite:

 

1) l'image avec un lien:

<a href="http://localhost/41-thickbox_default/sahmaran-shahmeran.jpg" data-fancybox-group="other-views" class="fancybox shown" title=""Şahmaran (Shahmeran)"">
    <img class="img-responsive" id="thumb_41" src="http://localhost/41-cart_default/sahmaran-shahmeran.jpg" alt=""Şahmaran (Shahmeran)"" title=""Şahmaran (Shahmeran)"" itemprop="image" height="80" width="80">
</a>

 

2) l'agrandissement de l'image:

<div style="opacity: 1; overflow: visible; height: auto; width: 830px; position: fixed; top: 82px; left: 600px;" class="fancybox-wrap fancybox-desktop fancybox-type-image fancybox-opened" tabindex="-1">
    <div style="padding: 15px; width: auto; height: auto;" class="fancybox-skin">
        <div class="fancybox-outer">
            <div style="overflow: visible; width: 800px; height: 800px;" class="fancybox-inner">
                <img class="fancybox-image" src="http://localhost/41-thickbox_default/sahmaran-shahmeran.jpg" alt="">
            </div>
        </div>
        <div class="fancybox-title fancybox-title-float-wrap">
            <span class="child">"Şahmaran (Shahmeran)"</span>
        </div>
        <a title="Fermer" class="fancybox-item fancybox-close" href="javascript:;">
        Fermer
        </a>
    </div>
</div>
<div style="display: block; width: auto; height: auto;" class="fancybox-overlay fancybox-overlay-fixed">
</div>

 

Comment lier ces 2 morceaux de code pour que quand je clic sur l'image celle-ci s'agrandisse?

 

 

 

 

 

 

[Olivier CLEMENCE]

Bonjour,

vous devriez essayer cette méthode plutôt:

http://blog.rolandl.fr/77-prestashop-1-4-utiliser-thickbox-dans-les-pages-cms

 

Valable pour 1.4 mais je penses adaptable en 1.5 ou 1.6

[binco]

Merci Olivier

 

1) J'ai créer un fichier php nommé CMSController.php placé dans override\controllers contenant le code:

<?php
class CmsController extends CmsControllerCore {
    public function setMedia() {
        parent::setMedia();

        Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
        Tools::addJS(array(_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js',
                           _PS_JS_DIR_.'jquery/jquery.serialScroll-1.2.2-min.js',
                           _THEME_JS_DIR_.'product.js'));

        if (Configuration::get('PS_DISPLAY_JQZOOM') == 1) {
            Tools::addCSS(_PS_CSS_DIR_.'jqzoom.css', 'screen');
            Tools::addJS(_PS_JS_DIR_.'jquery/jquery.jqzoom.js');
        }
    }
}
 

2) Dans ma page CMS je clic sur le bouton Code source et je colle le code suivant:

<a class="thickbox" href="http://localhost/41-cart_default/sahmaran-shahmeran.jpg">
  <img alt="mon image" src="http://localhost/41-cart_default/sahmaran-shahmeran.jpg" />
</a>
 

3) Je retourne sur ma page web (cms) concernée:

L'image apparait et quand je clic dessus elle apparait sans rien, c'est à dire:

-sans cadre transparent autour ou on verrait  la page précédente

-sans le bouton fermer

-sans la croix pour fermer le cadre contenant l'image

C'est comme si l'image apparaissait dans une page web vide et non dans le cadre transparent "agrandir l'image"

Edited September 12, 2014 by binco (see edit history)

[Olivier CLEMENCE]

Il faudrait pouvoir voir le site.

A mon avis c'est que la fonction javascript n'est pas appelée et c'est le lien qui est appelé à la place.

Il faut vérifier que jqzoom est bien appelé.

Et lors du clic voir si la fonction js est appelée également.

[binco]

Merci Olivier

 

Le souci c'est que je suis en local

 

Version de PrestaShop 1.6.0.9

URL boutique http://localhost/

Nom du thème utilisé default-bootstrap

 

Peux tu me guider pour faire ces vérifications?

(si oui il faut me détailler les étapes: je fais de l'informatique en amateur ...)

 

Cordialement

[loulou66]

coucou

 

il faut addapter pour la 1.6 ^^ ex dans classes/controllers/frontcontroller.php classes/controllers/AdminController.php et controllers/front/ProductControlers.php

essayes de remplacer
Tools::addCSS(_PS_CSS_DIR_.'jquery.fancybox-1.3.4.css', 'screen');
 Tools::addJS(array(_PS_JS_DIR_.'jquery/jquery.fancybox-1.3.4.js',
        _PS_JS_DIR_.'jquery/jquery.serialScroll-1.2.2-min.js',
        _THEME_JS_DIR_.'product.js'));

        if (Configuration::get('PS_DISPLAY_JQZOOM') == 1) {
            Tools::addCSS(_PS_CSS_DIR_.'jqzoom.css', 'screen');
            Tools::addJS(_PS_JS_DIR_.'jquery/jquery.jqzoom.js');
        }

par
$this->addjquery();
$this->addjqueryPlugin('scrollTo','fancybox');
$this->addJS(_THEME_JS_DIR_.'product.js');
    if (Configuration::get('PS_DISPLAY_JQZOOM') == 1)
		$this->addJqueryPlugin('jqzoom');

@++

 

Loulou66

[binco]

Merci loulou66

J'ai modifié le fichier php nommé CMSController.php placé dans override\controllers contenant le code:

<?php
class CmsController extends CmsControllerCore {
    public function setMedia() {
        parent::setMedia();
        
$this->addjquery();
$this->addjqueryPlugin('scrollTo','fancybox');
$this->addJS(_THEME_JS_DIR_.'product.js');
    if (Configuration::get('PS_DISPLAY_JQZOOM') == 1)
        $this->addJqueryPlugin('jqzoom');        
    }
}

 

Résultat: pas de changement

[binco]

... y a t'il d'autres astuces SVP

[binco]

J'ai pensé à une autre astuce mais je sais pas si c'est faisable:

 

peut-on dupliquer la "page boutique" et son fichier "product-list.tpl"?

 

Au final j'aurais:

- 1 "page boutique" se référent au fichier "product-list.tpl"

- 1 "page boutique 2" se référent au fichier "product-list-2.tpl" (copie de "product-list.tpl" à laquelle j'apporte des modifications")

 

Cordialement