Piwigo.org

cmail · 2009-01-23 11:56:04

Sur la page d'accueil (puis dans les sous catégories), comment écrire le code javascript adequat (j'ai fait quelques essais mais cela bloque car mes compétences sont très limitées) pour rendre effectif le paramètre onclick="" des .content div.thumbnailCategory?

En effet cela serait beaucoup plus ergonomique que d'aller cliquer sur le lien ou l'image comme actuellement? Cela faciliterait énormément l'appropriation de l'interface invité par des visiteurs peu au courant des règles de navigation sur le web.

Je réalise bien que ma question est un peu "esotérique", mais je suppose que certains gourous de PWG comprendront...

Dernière modification par cmail (2009-01-29 13:51:22)

nicolas · 2009-01-23 12:00:37

Je ne suis pas sûr de réellement comprendre ce que tu veux dire. Peux-tu préciser ?

VDigital · 2009-01-23 12:22:42

Si je comprends bien :

http://demo.phpwebgallery.net/

et que je prends le cas simple de Asia, tu veux pouvoir cliquer à coté de la miniature pour accéder à Asia malgré tout.

Oui, mais dans le cas de Seas & Oceans: as-tu vu le lien vers Islands?
Comment fait-on pour conserver la possibilité d'avoir des liens dans les descriptions...?

nicolas · 2009-01-23 12:40:09

Vincent, avec ton explication je comprends cette fois.
Et pour le problème des liens dans la description il suffit d'en faire un cas particulier.

Pour répondre à la question, le code javascript tient en une ligne si on utilise jquery, en trois ou quatre sinon.

ddtddt · 2009-01-23 13:20:40

Si je comprends bien ta demande tu peux commencer par lire [Forum, topic 14497] [RESOLU]Ajouter lien sur le rectangle d'une catégorie

nicolas · 2009-01-23 13:38:10

ddtddt a écrit:
Si je comprends bien ta demande tu peux commencer par lire [Forum, topic 14497] [RESOLU]Ajouter lien sur le rectangle d'une catégorie

Oui c'est effectivement le même sujet mais le code html proposé n'est pas valide et ne respecte pas la dtd. On ne peut pas mettre une balise de type block dans une balise inline (pas de div dans un a)

VDigital · 2009-01-23 14:45:49

On va attendre que cmail comprenne ou nous pose des questions s'il ne comprend pas notre langage... Je crois que c'est lui le plus intéressé.

cmail · 2009-01-23 16:37:20

Merci pour vos réponses qui éclaire la question:
1/ En réponse de VDigital :

http://demo.phpwebgallery.net/
et que je prends le cas simple de Asia, tu veux pouvoir cliquer à coté de la miniature pour accéder à Asia malgré tout.

C'est exactement cela. Mais effectivement il y a le cas très particulier d'introduction de lien dans les descriptions. =( Particularisme que je n'utiliserai pas dans mon projet, pour ne pas perturber la logique de circulation qui se veut simplissime... A voir http://cmail.graphi.0lx.net/piwigo/ tout en sachant que c'est encore en phase de réflexion.

2/ En réponse à ddtddt:
Il y a bien cette question évoquée par Dourssin avec une ébauche de réponse en html, mais comme le souligne nicolas cela introduit des problèmes de conformités...

3/ C'est pour cela qu'une petite instruction javascript associée (qui saurait reprendre les paramètres de transmission URL) au paramètre onclick="" me paraissait astucieuse et acceptable par la PWG team? Non?

Mais je ne maitrise pas tout dans ce codage et dans vos visions d'avenir de votre projet.

cmail · 2009-01-25 12:58:08

Pour Nicolas...
Peux-tu me donner quelques pistes sur le codage en jquery dont tu parlais...
Merci

cmail · 2009-01-29 11:28:14

Qui pourrait me relancer dans ma demande de rendre actif les div.thumbnailCategory par une instruction javascript sur le paramètre onclick?
Je suis de bonne volonté, mais j'ai quelques difficultés pour cerner le template que je dois transformer. Viendra ensuite le codage à proprement parler du onclick...
SVP, une première piste de réflexion, si vous n'êtes pas en grève... :=)

cmail · 2009-01-29 12:05:16

Dans le fichier original mainpage_categories.tpl de PWG 2.0.0RCA

<ul class="thumbnailCategories">
{foreach from=$category_thumbnails item=cat}
<li>
<div class="thumbnailCategory">
<div class="illustration">
<a href="{$cat.URL}">
<img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{'hint_category'|@translate}">
</a>
</div>
<div class="description">
<h3>
<a href="{$cat.URL}">{$cat.NAME}</a>
{$cat.ICON_TS}
</h3>
<div class="text">
{if isset($cat.INFO_DATES) }
<p class="dates">{$cat.INFO_DATES}</p>
{/if}
<p class="Nb_images">{$cat.CAPTION_NB_IMAGES}</p>
{if not empty($cat.DESCRIPTION)}
<p>{$cat.DESCRIPTION}</p>
{/if}
</div>
</div>
</div>
</li>
{/foreach}
</ul>

J'ajoute sur le modèle de ce que je comprends à http://forum.phpwebgallery.net/viewtopi … 97&p=1 :

<ul class="thumbnailCategories">
{foreach from=$category_thumbnails item=cat}
<li>
<div class="thumbnailCategory">
<a href="{$cat.URL}" style="cursor:pointer">
<div class="illustration">
<a href="{$cat.URL}">
<img src="{$cat.TN_SRC}" alt="{$cat.TN_ALT}" title="{'hint_category'|@translate}">
</a>
</div>
<div class="description">
<h3>
<a href="{$cat.URL}">{$cat.NAME}</a>
{$cat.ICON_TS}
</h3>
<div class="text">
{if isset($cat.INFO_DATES) }
<p class="dates">{$cat.INFO_DATES}</p>
{/if}
<p class="Nb_images">{$cat.CAPTION_NB_IMAGES}</p>
{if not empty($cat.DESCRIPTION)}
<p>{$cat.DESCRIPTION}</p>
{/if}
</div>
</div>
</a>
</div>
</li>
{/foreach}
</ul>

Cela ne donne rien. Avec différentes variances de codage pour trouver le hic.. Un petit conseil serait bien utile pour gagner du temps et de l'énergie

cmail · 2009-01-29 13:14:20

Une réponse perso pour donner une solution à mon problème afin d'aider de futurs besogneux, et éventuellement pour avoir un avis technique (compatibilité, standard, etc.) de la PHP team sur cette solution.

Effacer les lignes en rouge dans le message précédent et rajouter: style="cursor:pointer" onclick="document.location ='{$cat.URL}'" dans <div class="thumbnailCategory" > ce qui donnera au final :
<div class="thumbnailCategory" style="cursor:pointer" onclick="document.location ='{$cat.URL}'">

Cela répond assez bien à ce que je voulais initialement.

ddtddt · 2009-01-29 13:20:47

Merci pour ta solution :)

N'hésite pas à marquer [résolu] dans le titre du post

cmail · 2009-01-29 13:50:52

Je complète un peu:
1/ Pour garder la même logique ergonomique, il faudrait faire la même manip pour le fichier thumbnails.tpl.
A la ligne 8 de l'original : <span class="wrap2"> écrire <span class="wrap2" onclick="document.location ='{$thumbnail.URL}'">

2/ Cela suppose qu'on a versé le style du curseur dans le CSS perso où on écrit :
.content UL.thumbnails span.wrap2{
cursor:pointer; }

3/ Faire de même (effacer style="cursor:pointer" dans mainpage_categories.tpl traité dans le message précédent et déplacer ce paramètre dans le CSS perso sous la forme de :
.content div.thumbnailCategory {
cursor:pointer;}

nicolas · 2009-01-29 14:04:38

A la condition d'activer jquery, cela peut ressembler à ça :

Code:

$(function() {
  $('ul.thumbnailCategories .thumbnailCategory')
    .click(function(e) {
      $.href = $(this).find('.illustration a').attr('href');
      document.location.href = $.href;
    })
});

Piwigo.org

Annonce

#1 2009-01-23 11:56:04

[RESOLU] PWG 2.0.0RC4 onclick sur div

#2 2009-01-23 12:00:37

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#3 2009-01-23 12:22:42

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#4 2009-01-23 12:40:09

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#5 2009-01-23 13:20:40

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#6 2009-01-23 13:38:10

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

ddtddt a écrit:

#7 2009-01-23 14:45:49

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#8 2009-01-23 16:37:20

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#9 2009-01-25 12:58:08

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#10 2009-01-29 11:28:14

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#11 2009-01-29 12:05:16

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#12 2009-01-29 13:14:20

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#13 2009-01-29 13:20:47

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#14 2009-01-29 13:50:52

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

#15 2009-01-29 14:04:38

Re: [RESOLU] PWG 2.0.0RC4 onclick sur div

Code:

Pied de page des forums