Aide - Recherche - Membres - Calendrier
Version complète : PB avec jquery zoom [résolu]
Forum osCommerce-fr > Adapter OsCommerce MS2 > Design
did-eye
Bonjour
Après plusieur essais je n'arrive pas à reproduire ceci

mon résultat ressemble plutôt à ça

La loupe fonctionne bien qd je survole les miniatures mais je voudrais que quand je clique sur les miniatures ça active une image que je survole comme sur l'exemple en haut

si quelqu'un l'à déjà installé je le remercie d'avance de me venir en aide

mon petit bout de code

<!--autres vues-->

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<script src="../js/jquery-1.6.js" type="text/javascript"></script>
<script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
var options = {
zoomType: 'standard with thumbnails',
lens:true,
preloadImages: true,
alwaysOn:false,
zoomWidth: 450,
zoomHeight: 450,
xOffset:10,
yOffset:10,
position:'top'
//...MORE OPTIONS
};
$('.jqzoom').jqzoom(options);
});


</script>
<link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">
<div class="clearfix" style="float:center; width:340px;">
<ul id="thumblist" class="clearfix" ><br>
<a href="<?echo DIR_WS_IMAGES . $product_info['products_image_xl_3']; ?>" class="jqzoom" rel='images' >
<img src="<?echo DIR_WS_IMAGES . $product_info['products_image_sm_3']; ?>" style="border: 1px solid #333; "height="70px">
</a>

<a href="<?echo DIR_WS_IMAGES . $product_info['products_image_xl_2']; ?>" class="jqzoom" rel='images' >
<img src="<?echo DIR_WS_IMAGES . $product_info['products_image_sm_2']; ?>" style="border: 1px solid #333;"height="70px">
</a>

<a href="<?echo DIR_WS_IMAGES . $product_info['products_image_xl_1']; ?>" class="jqzoom" rel='images' >
<img src="<?echo DIR_WS_IMAGES . $product_info['products_image_sm_1']; ?>" style="border: 1px solid #333;"height="70px">
</a>
<a href="<?echo DIR_WS_IMAGES . $product_info['products_image_lrg']; ?>" class="jqzoom" rel='images' >
<img src="<?echo DIR_WS_IMAGES . $product_info['products_image_med']; ?>" style="border: 1px solid #333;" height="70px">
</a>

</div>
did-eye
j'ai un peu avancé depuis tout à l'heure, g bien une image moyenne et mes vignettes mais je n'arrive pas à passer d'une vignette à l'autre
Code
  <!--autres vues-->
<div class="clearfix" style="float:center; width:340px;">
    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="jqzoom.pack.1.0.1.js" type="text/javascript"></script>
<script src="../js/jquery-1.6.js" type="text/javascript"></script>    
<script src="../js/jquery.jqzoom-core.js" type="text/javascript"></script>
<script>
     $(document).ready(function(){
    var options = {
            zoomType: 'standard with thumbnails',
            lens:true,
            preloadImages: true,
            alwaysOn:false,
            zoomWidth: 450,
            zoomHeight: 450,
            xOffset:10,
            yOffset:10,
            position:'left'
            //...MORE OPTIONS
    };
    $('.jqzoom').jqzoom(options);
});
  

</script>

<style type="text/css">
<script>
body{margin:0px;padding:0px;font-family:Arial;}
a img,:link img,:visited img { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
:focus { outline: none; }
*{margin:0;padding:0;}
p, blockquote, dd, dt{margin:0 0 8px 0;line-height:1.5em;}
fieldset {padding:0px;padding-left:7px;padding-right:7px;padding-bottom:7px;}
fieldset legend{margin-left:15px;padding-left:3px;padding-right:3px;color:#333;}
dl dd{margin:0px;}
dl dt{}

.clearfix:after{clear:both;content:".";display:block;font-size:0;height:0;line-height:0;visibility:hidden;}
.clearfix{display:block;zoom:1}


ul#thumblist{display:block;}
ul#thumblist li{float:left;margin-right:2px;list-style:none;}
ul#thumblist li a{display:block;border:1px solid #CCC;}
ul#thumblist li a.zoomThumbActive{
    border:1px solid red;
}

.jqzoom{

    text-decoration:none;
    float:left;
}</script>
</style>

<link rel="stylesheet" href="../css/jquery.jqzoom.css" type="text/css">

  <br>
   <a href='<?echo DIR_WS_IMAGES . $product_info['products_image_lrg']; ?>' class = 'jqzoom' id='zoom1'
            rel=" ">
            <img src="<?echo DIR_WS_IMAGES . $product_info['products_image_med']; ?>"style="border: 1px solid #333; " alt='' title="Optional title display" />
        </a><br><br>
        
        
<ul id="thumblist" class="clearfix" >
                        
    <li><a class="zoomThumbActive" href="java script:void(0)"; "<?echo DIR_WS_IMAGES . $product_info['products_image_lrg']; ?>"  rel='images'  >
        <img src="<?echo DIR_WS_IMAGES . $product_info['products_image']; ?>" style="border: 1px solid #333; "height="70px">
      </a></li>
        
    <li><a href="java script:void(0)"; "<?echo DIR_WS_IMAGES . $product_info['products_image_xl_1']; ?>"  rel='images'  >
    <img src="<?echo DIR_WS_IMAGES . $product_info['products_image_sm_1']; ?>"   style="border: 1px solid #333;"height="70px">
    </a></li>
    
    <li><a href="java script:void(0)"; "<?echo DIR_WS_IMAGES . $product_info['products_image_xl_2']; ?>"  rel='images'  >
    <img src="<?echo DIR_WS_IMAGES . $product_info['products_image_sm_2']; ?>"   style="border: 1px solid #333;"height="70px">
    </a></li>
    <li><a href="java script:void(0)"; "<?echo DIR_WS_IMAGES . $product_info['products_image_xl_3']; ?>"  rel='images'  >
    <img src="<?echo DIR_WS_IMAGES . $product_info['products_image_sm_3']; ?>"  style="border: 1px solid #333;" height="70px">
    </a><li>
    
    </ul></div>
did-eye
bon j'y suis arrivé le résultat

me reste me manque juste une solution puisque je ne maitrise pas le php

pr ne pas afficher les miniatures qd elle n'existe pas


Code
<div style="float:left; width:200px;">-->
                <div style="float:left; width:200px;">
   <a href='<?echo DIR_WS_IMAGES . $product_info['products_image_lrg']; ?>' rel='gal1' id='zoom1'>
            <img src="<?echo DIR_WS_IMAGES . $product_info['products_image_med']; ?>"style="border: 1px solid #babab9; "height="180px";" alt='' title="Optional title display" />
        
        </a><br><br><div>
        
    <div class="clearfix" style="float:left; width:430px;">    
<ul id="thumblist" class="clearfix" >
    <br>                    
    <li><a class="zoomThumbActive" href='java script:void(0);' rel="{gallery: 'gal1', smallimage: '<?echo DIR_WS_IMAGES . $product_info['products_image_lrg']; ?>', largeimage: '<?echo DIR_WS_IMAGES . $product_info['products_image_lrg']; ?>' }"  >
        <img src="<?echo DIR_WS_IMAGES . $product_info['products_image']; ?>" style="border: 1px  #babab9; " height="70px">
      </a></li>
        
    <li><a href='java script:void(0);' rel="{gallery: 'gal1', smallimage: '<?echo DIR_WS_IMAGES . $product_info['products_image_xl_1']; ?>', largeimage: '<?echo DIR_WS_IMAGES . $product_info['products_image_xl_1']; ?>' }" >
    <img src="<?echo DIR_WS_IMAGES . $product_info['products_image_sm_1']; ?>"   style="border: 1px  #babab9; " height="70px">
    </a></li>
    
    <li><a href='java script:void(0);' rel="{gallery: 'gal1', smallimage: '<?echo DIR_WS_IMAGES . $product_info['products_image_xl_2']; ?>', largeimage: '<?echo DIR_WS_IMAGES . $product_info['products_image_xl_2']; ?>' }"  >
    <img src="<?echo DIR_WS_IMAGES . $product_info['products_image_sm_2']; ?>"   style="border: 1px  #babab9; " height="70px">
    </a></li>
    <li><a href='java script:void(0);' rel="{gallery: 'gal1', smallimage: '<?echo DIR_WS_IMAGES . $product_info['products_image_xl_3']; ?>', largeimage: '<?echo DIR_WS_IMAGES . $product_info['products_image_xl_3']; ?>' }"  >
    <img src="<?echo DIR_WS_IMAGES . $product_info['products_image_sm_3']; ?>"  style="border: 1px  #babab9; " height="70px">
    </a>
    
    </ul>
    
    

    </div></div>
Bonbec
Bonjour,
Citation (did-eye @ 13 Jun 2012, 01:02) *
bon j'y suis arrivé le résultat
Sympa et joli look du site, j'aime bien smile.gif
Citation
me reste me manque juste une solution puisque je ne maitrise pas le php pour ne pas afficher les miniatures qd elle n'existe pas
Il y a 2 solutions :
1) Soit vérifier que le fichier est physiquement présent
2) Soit vérifier que $product_info['products_image_xl_1ou2ou3'] existe bien dans ta BDD et est non vide (en principe le placement physique de l'image est fait lors de la procédure d'enregistrement en BDD).
Perso je préfère la 2ème solution, çà évite x accès disque en plus mais je te donne les 2 solutions en partant du principe que tu ne veux vérifier que si les images additionnelles products_image_xl_1ou2ou3:

1) file_exists
Code
<?php if(file_exists(DIR_WS_IMAGES . $product_info['products_image_xl_1']){ ?>
    <li><a href='java script:void(0);' rel="{gallery: 'gal1', smallimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_1']; ?>', largeimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_1']; ?>' }" >
    <img src="<?php echo DIR_WS_IMAGES . $product_info['products_image_sm_1']; ?>"   style="border: 1px  #babab9; " height="70px">
    </a></li>
<?php }

if(file_exists(DIR_WS_IMAGES . $product_info['products_image_xl_2']){ ?>
    <li><a href='java script:void(0);' rel="{gallery: 'gal1', smallimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_2']; ?>', largeimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_2']; ?>' }" >
    <img src="<?php echo DIR_WS_IMAGES . $product_info['products_image_sm_2']; ?>"   style="border: 1px  #babab9; " height="70px">
    </a></li>
<?php }

if(file_exists(DIR_WS_IMAGES . $product_info['products_image_xl_3']){ ?>
    <li><a href='java script:void(0);' rel="{gallery: 'gal1', smallimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_3']; ?>', largeimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_3']; ?>' }" >
    <img src="<?php echo DIR_WS_IMAGES . $product_info['products_image_sm_3']; ?>"   style="border: 1px  #babab9; " height="70px">
    </a></li>
<?php } ?>



2) isset && !empty
Code
<?php if(isset($product_info['products_image_xl_1']) && !empty($product_info['products_image_xl_1'])) { ?>
    <li><a href='java script:void(0);' rel="{gallery: 'gal1', smallimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_1']; ?>', largeimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_1']; ?>' }" >
    <img src="<?php echo DIR_WS_IMAGES . $product_info['products_image_sm_1']; ?>"   style="border: 1px  #babab9; " height="70px">
    </a></li>
<?php }

if(isset($product_info['products_image_xl_2']) && !empty($product_info['products_image_xl_2'])) { ?>
    <li><a href='java script:void(0);' rel="{gallery: 'gal1', smallimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_2']; ?>', largeimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_2']; ?>' }" >
    <img src="<?php echo DIR_WS_IMAGES . $product_info['products_image_sm_2']; ?>"   style="border: 1px  #babab9; " height="70px">
    </a></li>
<?php }

if(isset($product_info['products_image_xl_3']) && !empty($product_info['products_image_xl_3'])) { ?>
    <li><a href='java script:void(0);' rel="{gallery: 'gal1', smallimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_3']; ?>', largeimage: '<?php echo DIR_WS_IMAGES . $product_info['products_image_xl_3']; ?>' }" >
    <img src="<?php echo DIR_WS_IMAGES . $product_info['products_image_sm_3']; ?>"   style="border: 1px  #babab9; " height="70px">
    </a></li>
<?php } ?>


J'ai remplacé les <?echo par des <?php echo car ce code n'est pas portable sans soucis d'un serveur à un autre ...
Pour les fonctions Php, voir sur le manuel Php : file_exists, isset, empty
did-eye
biggrin.gif Merci Bonbec ! 9a marche exactement comme je voulais
Bonbec
Re,

Génial ! Il n'y a plus qu'à mettre un joli petit [résolu] dans le sujet en éditant le premier message happy.gif
did-eye
si un admin passe par là et passer ce sujet en résolu
Merci
Bonbec
Re,

Tu peux le faire toi même en suivant la manip que je t'ai indiqué smile.gif

did-eye
Citation (Bonbec @ 13 Jun 2012, 09:42) *
Re,

Tu peux le faire toi même en suivant la manip que je t'ai indiqué smile.gif


Merci encore, je vais pouvoir aller regarder un gros pb d'affichage que je viens juste de remarquer

comme ça et ça
freestyle83
Tiens, ça tombe bien le zoom m'interesse.
Pourrais-tu me donner le lien de l'endroit ou tu as eu la contrib ou le code en question ( si c'est autre chose qu'une contrib).

Pour répondre à ton dernier message, de ce que j'ai vu sur les liens on dirait un manque d'appel au css.

=><link href="templates/Thema/css/style.css" type="text/css" rel="stylesheet" media="screen" charset="iso-8859-1" />

Est-ce la bonne url, le bon nom de fichier.
Après ça peut peut-être être lié à autre chose, mais personnellement je commencerais par regarder de ce côté là
Bonbec
Re,

Cela n'a plus rien à voir avec "PB avec jquery zoom" ... wacko.gif

Pour te mettre sur la piste, le style.css n'est pas trouvé.
Dans les pages qui fonctionnent, c'est templates/Thema/css/style.css qui est appelé, dans une de tes pages qui ne fonctionne pas, c'est tell_a_friend.php/products_id/templates/Thema/css/style.css qui est appelé et non trouvé.
Bonbec
Bonsoir freestyle83,

Pour ta version 2.3, c'est ceci smile.gif
did-eye
merci je vais faire une pause et je reviens vers vous bientot wink.gif et remerci bonbec !
freestyle83
Citation (Bonbec @ 13 Jun 2012, 21:56) *
Re,

Cela n'a plus rien à voir avec "PB avec jquery zoom" ... wacko.gif

Pour te mettre sur la piste, le style.css n'est pas trouvé.
Dans les pages qui fonctionnent, c'est templates/Thema/css/style.css qui est appelé, dans une de tes pages qui ne fonctionne pas, c'est tell_a_friend.php/products_id/templates/Thema/css/style.css qui est appelé et non trouvé.


Bonjour Bonbec smile.gif

Question bête mais comment tu sais que c'est tell_a_friend .... qui n'est pas trouvé? Avec Firebug? Ou autre chose? Si c'est Firebug tu pourrai m'expliquer les manip stp parce que moi je l'ai mais... j'ai jamais trop compris comment il fonctionne.
Sinon merci pour la version que tu m'as donné. C'est très gentil à toi.
Edit : je viens de l'installer : impeccable. Merci
Bonbec
Bonjour freestyle83 smile.gif ,

J'utilise un autre addon Firefox qui s'appelle web developper (là c'est dans l'onglet CSS) que j'aime bien et que je maîtrise beaucoup mieux que FireBug.
freestyle83
Citation (Bonbec @ 14 Jun 2012, 14:37) *
Bonjour freestyle83 smile.gif ,

J'utilise un autre addon Firefox qui s'appelle web developper (là c'est dans l'onglet CSS) que j'aime bien et que je maîtrise beaucoup mieux que FireBug.


Je te répond par mail pour éviter le HS
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'informations, la mise en page et les images, veuillez cliquer ici.
Invision Power Board © 2001-2019 Invision Power Services, Inc.