utilisation de fancybox pour affichage d'une image sur la page produit

[vinasse]

Bonjour à tous,

 

une question sans doute simple mais je n'y connais rien en javascript et je n'arrive pas à trouver d'info la-dessus...

sur la page produit, je voudrais reproduire le comportement "fancy box" que l'on obtient lorsque l'on clique sur "le lien view full size" (cf c-dessous le bout de code de product.tpl correspondant) de sorte que lorsqu'on clique sur le lien "mon lien" cela ouvre "mon image" en mode "fancy box".

 

En gros je cherche à comprendre comment le js est appelé et comment il est paramétré (pour ouvrir une image donnée) ...

 

Est ce que l'un d'entre vous saurait m'expliquer comment m'y prendre?

 

Merci beaucoup,

C.

 

 

<!-- usefull links-->

<ul id="usefull_link_block">

{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}

<li><a href="javascript:print();">{l s='Print'}</a><br class="clear" /></li>

{if $have_image && !$jqZoomEnabled}

<li><span id="view_full_size" class="span_link">{l s='View full size'}</span></li>

{/if}

</ul>

[Broceliande]

Bonjour à tous,

 

une question sans doute simple mais je n'y connais rien en javascript et je n'arrive pas à trouver d'info la-dessus...

sur la page produit, je voudrais reproduire le comportement "fancy box" que l'on obtient lorsque l'on clique sur "le lien view full size" (cf c-dessous le bout de code de product.tpl correspondant) de sorte que lorsqu'on clique sur le lien "mon lien" cela ouvre "mon image" en mode "fancy box".

 

En gros je cherche à comprendre comment le js est appelé et comment il est paramétré (pour ouvrir une image donnée) ...

 

Est ce que l'un d'entre vous saurait m'expliquer comment m'y prendre?

 

Merci beaucoup,

C.

 

 

<!-- usefull links-->

<ul id="usefull_link_block">

{if $HOOK_EXTRA_LEFT}{$HOOK_EXTRA_LEFT}{/if}

<li><a href="javascript:print();">{l s='Print'}</a><br class="clear" /></li>

{if $have_image && !$jqZoomEnabled}

<li><span id="view_full_size" class="span_link">{l s='View full size'}</span></li>

{/if}

</ul>

 

salut, là ce que tu donnes c'est le contenu du tpl , or les fancybox se gère depuis le javascript (cf product.js)

 

C'est du jquery.

L'idée est de sélectionner les élements du dom que tu veux "fancyboxer" , un exemple de code :

 

$('#idmonbloc").fancybox();

 

ou idmonbloc est l'id de ton div ou de ton img

 

Faut regarder les sélecteurs jquery, si tu veux fancyboxer toutes les images de classe toto ça va être :

 

$('.toto').fancybox();

 

évidemment il y a des paramètres à transmettre dans les parenthèses si tu veux personnaliser la box ...

 

de plus il faut que la page soit chargée avant d'appeler ce code , donc on met ça dans l'évenement domready :

 

$(document).ready(function() {   $('.toto').fancybox(); });

 

bref c'est du javascript , particulièrement du jquery ... c'est simple mais ça demande pas mal de notions, je sais pas si ça t'aide.

[vinasse]

Merci Broceliande pour ces précisions.

Effectivement j'avais bien en tête que c'était du javascript mais comme je n'y connais rien ta réponse me donne de bons élements de compréhension.

Je comprends donc qu'il faut que j'utilise une fonction du style de:

$(document).ready(function() {$('#div_monimage').fancybox(); });

à mettre dans le fichier product.js

de façon à fancyboxer l'image que je veux afficher.

Mais le code précédent va fancyboxer mon image des que le DOM est ready.

Alors que moi je voudrais que l'image apparaisse avec un effet fancybox seulement lorsqu'on clique sur un lien.

(Je cherche précisement à reproduire l'effet qu'on obtient en cliquant sur le "view full size" de la page produit.)

 

Voilà je ne sais pas si je suis clair maiss merci en tout cas.

Je vais tacher de me familiariser avec le jquery!

Edited October 12, 2012 by vinasse (see edit history)

[Centaure]

Bonjour,

cela m'intéresse aussi et je voulais savoir si tu as trouvé la solution ...

merci par avance