PB avec jquery zoom [résolu], bonjour je n'arive pas à gérer les vignette Options

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

Ce message a été modifié par did-eye - 13 Jun 2012, 10:08.

[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,

bon j'y suis arrivé le résultat

Sympa et joli look du site, j'aime bien

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

Ce message a été modifié par Bonbec - 13 Jun 2012, 07:13.

[did-eye]

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

[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é

[did-eye]

Re,

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

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à

Ce message a été modifié par freestyle83 - 13 Jun 2012, 21:56.

[Bonbec]

Re,

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

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

[did-eye]

merci je vais faire une pause et je reviens vers vous bientot et remerci bonbec !

[freestyle83]

Re,

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

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

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

Ce message a été modifié par freestyle83 - 14 Jun 2012, 13:28.

[Bonbec]

Bonjour freestyle83 ,

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]

Bonjour freestyle83 ,

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