THELIA Forum

Welcome to the THELIA support and discusssion forum

Announcement

Rejoignez la communauté sur le Discord Thelia : https://discord.gg/YgwpYEE3y3

Offline

#1 Utilisation de Magic Zoom

(02-12-2014 19:00:28)

Bonjour,

J'aimerai utiliser MagicZoom avec Thelia v2.04

C'est un zoom très utilisé par les sites ecommerce
:https://www.magictoolbox.com/magiczoom … stallation


Ou est ce que je copie  le dossier MagicZoom que je télécharge

J'ai mis le 

<link type="text/css" rel="stylesheet" href="assets/css/magiczoom/magiczoom.css"/>
<script type="text/javascript" src="assets/css/magiczoom/magiczoom.js"></script>

dans layout.tpl

Ensuite comment intégrer à la loop le:

 <a href="big.jpg" class="MagicZoom"><img src="small.jpg"/></a>

si je mets:

<figure class="product-image">
                    {loop type="image" name="image.main" product="{$ID}" width="560" height="445" resize_mode="borders" limit="1"}
                      <a href="{$ORIGINAL_IMAGE_URL }">  <img src="{$IMAGE_URL}" alt="{$TITLE}" class="img-responsive" itemprop="image" data-toggle="magnify"></a>
                            <p class="text-center">{$TITLE}2</p>
                    {/loop}
                </figure>

Une nouvelle fenêtre s'ouvre avec la photo plus grande mais pas de zoom du tout.

Quelqu'un utilise t-il  Magic Zoom.

Merci

Offline

#2 Re: Utilisation de Magic Zoom

(02-12-2014 22:31:17)

Ou est ce que je copie  le dossier MagicZoom que je télécharge

Il te faut placer le dossier "magiczoom" dans template/default/assets.

Ensuite, dans layout.tpl, tu vas inclure tout d'abord le CSS, après {block name="stylesheet"}{/block} :

{stylesheets file='assets/magiczoom/magiczoom.css'}
        <link rel="stylesheet" href="{$asset_url}">
{/stylesheets}

Ensuite, tu vas inclure le JS, juste avant {block name="after-javascript-include"}{/block}

{javascripts file='assets/magiczoom/magiczoom.js'}
    <script src="{$asset_url}"></script>
{/javascripts}

Enfin, tu vas intégrer magiczoom à tes images. Ajoute class="MagicZoom" au lien, et enlève data-toggle="magnify" à l'image.

<a href="{$ORIGINAL_IMAGE_URL }" class="MagicZoom">
<img src="{$IMAGE_URL}" alt="{$TITLE}" class="img-responsive" itemprop="image">
</a>

Ca ne devrait pas être loin de marcher.

OpenStudio Toulouse

Offline

#3 Re: Utilisation de Magic Zoom

(03-12-2014 11:19:21)

Merci,

Effectivement ça fonctionne .

Offline

#4 Re: Utilisation de Magic Zoom

(03-12-2014 15:37:06)

Bonjour,

cela fonctionne, il y a bien le zoom.

Par contre sur la page produit,
si je place  le zoom dans ma premiere loop qui est :

 {ifloop rel="image.main"}
                <figure class="product-image">
                    {loop type="image" name="image.main" product="{$ID}" width="560" height="445" resize_mode="borders" limit="1"}
                    <a href="{$ORIGINAL_IMAGE_URL }" class="MagicZoom">
                     <img src="{$IMAGE_URL}" alt="{$TITLE}" class="img-responsive" itemprop="image">{$ID}<!--</a>-->
                            <p class="text-center">{$TITLE}2</p>
                    {/loop}
                </figure>
                {/ifloop}

J'ai bien le zoom,mais quand je clique sur un élément de ma gallery d'image,l'image "main" ne se modifie pas, le zoom est maitre

{ifloop rel="image.carousel"}
                <div id="product-thumbnails" class="slide" style="position:relative;">
                    <div class="carousel-inner">
                        <div class="item active">
                            <ul>
                                {loop name="image.carousel" type="image" product="{$ID}"  width="560" height="445" resize_mode="borders" limit="5"}
                                <li>
                                    <a href="{$IMAGE_URL}" class="thumbnail {if $LOOP_COUNT == 1}active{/if}">
                                        {loop type="image" name="image.thumbs" id="{$ID}" product="$OBJECT_ID" width="118" height="85" resize_mode="borders"}
                                            <img src="{$IMAGE_URL}" alt="{$TITLE}">25{$ID}
                                        {/loop}
                                    </a>
                                </li>
                                {/loop}
                            </ul>
                        </div>
                        {ifloop rel="image.carouselsup"}
                        <div class="item">
                            <ul>
                                {loop name="image.carouselsup" type="image" product="{$ID}"  width="560" height="445" resize_mode="borders" offset="5"}
                                    <li>
                                        <a href="{$IMAGE_URL}" class="thumbnail">
                                            {loop type="image" name="image.thumbssup" id="{$ID}" product="$OBJECT_ID" width="118" height="85" resize_mode="borders"}
                                                <img src="{$IMAGE_URL}" alt="{$TITLE}">
                                            {/loop}
                                        </a>
                                    </li>
                                {/loop}
                            </ul>
                        </div>
                        {/ifloop}
                    </div>
                    {ifloop rel="image.carouselsup"}
                        <a class="left carousel-control" href="#product-thumbnails" data-slide="prev"><i class="icon-prev"></i></a>
                        <a class="right carousel-control" href="#product-thumbnails" data-slide="next"><i class="icon-next"></i></a>
                    {/ifloop}
                </div>
                {/ifloop}

Je pense que je dois modifier ou faire une loop supplémentaire mais je ne vois pas où et comment.
Il me semble que c'est le a href de ma loop image.main qui ne va pas.  Je cafouille depuis ce matin

Une piste ?

Merci

Offline

#5 Re: Utilisation de Magic Zoom

(03-12-2014 17:37:03)

Pas besoin de bpucle supplémentaire, il suffit d'etudier le code javascript de mise a jour de l'image, et de le modifier pour le rendre compatible avec Magiczoom.

OpenStudio Toulouse

Offline

#6 Re: Utilisation de Magic Zoom

(03-12-2014 18:14:20)

Bonsoir,

Merci,

ce doit être par là :

// Product details Thumbnails
         $(document).on('click.thumbnails', '#product-thumbnails .thumbnail', function () {
                if ($(this).hasClass('active')) { return false; }

                var $productGallery = $(this).closest("#product-gallery"); 
                $('.product-image > img', $productGallery).attr('src',$(this).attr('href'));
                $('.thumbnail', $productGallery).removeClass('active');
                $(this).addClass('active');

                return false;
            });

mais c'est juste du chinois pour moi.

je lis des choses qui sont dans ma boucle image.main, mais il me semble que c'est ma boucle image.carousel qui ne veut pas afficher mon image dans la boucle  image.main ( Quand je clique sur une image du carousel, mon navigateur m'indique bien l'adresse où est la photo qui devrait apparaitre à l'endroit de image.main mais sans effet.

Un peu perdue

Offline

#7 Re: Utilisation de Magic Zoom

(10-06-2015 19:28:32)

Bonjour,

Quelqu'un peut il me dire si c'est bien à cet endroit qu'il faut que je cherche ?
parce que c'est toujours du chinois pour moi.
Ou trouver pour étudier le code javascript de l'image et je ne parle même pas de le modifier?

Dans le site de demo de Thelia2 il n'y a pas de zoom mais quand on clique sur une image product-thumbnail elle devient image product-image.
J'aimerai ca combiné au zoom.
Merci

Offline

#8 Re: Utilisation de Magic Zoom

(19-12-2015 00:46:00)

Je modifie ma réponse après avoir lu la doc de MagicZoom smile
https://www.magictoolbox.com/magiczoom/integration/#api

change la ligne 

 $('.product-image > img', $productGallery).attr('src',$(this).attr('href'));

par 

MagicZoom.update('zoom', $(this).attr('href'), $(this).attr('href'));

Dans le html, il faut donc s'assurer qu'en plus d'avoir la class="MagicZoom", ton ancre ait un id="zoom" (ou un id de ton choix)

Par contre, perso, le magiczoom n'a pas l'air de fonctionner de mon côté, malgré une intégration simple, qui correspond aux indications données ci-dessus. Pas de logs dans la console. Je vais essayer de trouver...

Last edited by neywen (19-12-2015 02:13:24)

Offline

#9 Re: Utilisation de Magic Zoom

(19-12-2015 02:15:11)

et donc, le MagicZoom fonctionne bien sur l'image #product-image si on est en pleine page, mais pas si le template product.html est chargé dans une popup (click sur l'image du produit dans la page category).