Bonjour
toujours en court de personnalisation du thème piwigo pour ma galerie je tente de faire quelque chose de nouveau
à savoir sur la page ou il y a les "Thumbails" je souhaite faire apparaitre au survol un tooltip avec des infos comme par exemples, le nombre de visite, ou le nombre de commentaire , ou la note , ...... , ou autre
pour cela j'ai trouvé sur la toile un pluginjQuery : http://iamceege.github.io/tooltipster/
donc avec le plugin de piwigo AddHeadElement, j'ai ajouté les lignes de déclaration du script et de son css
et je suis allé dans le template des thumbails :
voici le code que j'ai écrit :
{footer_script} var error_icon = "{$ROOT_URL}{$themeconf.icon_dir}/errors_small.png", max_requests = {$maxRequests}; {/footer_script} {if !empty($thumbnails)}{strip} <ul class="thumbList"> {foreach from=$thumbnails item=thumbnail} {assign var=derivative value=$pwg->derivative($stripped.thumbSize, $thumbnail.src_image)} {if !$derivative->is_cached()} {combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} {combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} {/if} {literal} <script> $(document).ready(function() { $('.my-tooltip').tooltipster({ content: $('<span><img src="./upload/2013/07/11/20130711110940-9607e4b8.jpg"> <strong>{/literal}{$pwg->l10n_dec('%d hit', '%d hits',$thumbnail.NB_HITS)}{literal}</strong><br><strong>{/literal}{$pwg->l10n_dec('%d comment', '%d comments',$thumbnail.NB_COMMENTS)}{literal}</strong></span>') }); }); </script> {/literal} <li class="my-tooltip"> <span class="wrap1"> <span class="wrap2 {if !($stripped.showThumbLegend)}wrap2full{/if}"> <a href="{$thumbnail.URL}"><div class="thumbframe"><div class="thumbpos"> <img class="thumbnail"{if $derivative->is_cached()}src="{$derivative->get_url()}"{else}src="{$ROOT_URL}{$themeconf.icon_dir}/img_small.png" data-src="{$derivative->get_url()}"{/if} alt="{$thumbnail.TN_ALT}" title="{if isset($thumbnail.NAME)}{$thumbnail.NAME|@replace:'"':' '}{else}{$thumbnail.TN_TITLE}{/if}"> {if (isset($stripped.imagePreload) & isset($stripped.imagePreloadThumbs))} {assign var=preload value=$pwg->derivative($stripped.imageSize, $thumbnail.src_image)} <div class="preload" style="display:none;">{$preload->get_url()}</div> {/if} </div></div></a> </span> <span class="thumbLegend {if !($stripped.showThumbLegend)}noLegend{/if}"> <span class="thumbCaption">{if isset($thumbnail.NAME)}{$thumbnail.NAME}{/if}</span> {if !empty($thumbnail.icon_ts)} <img title="{$thumbnail.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent.png" class="icon" alt="(!)"> {/if} <div class="thumbStats"> {if isset($thumbnail.NB_COMMENTS)} <span class="{if 0==$thumbnail.NB_COMMENTS}zero {/if}nb-comments"> {$pwg->l10n_dec('%d comment', '%d comments',$thumbnail.NB_COMMENTS)} </span> {/if} {if isset($thumbnail.NB_HITS)} <span class="{if 0==$thumbnail.NB_HITS}zero {/if}nb-hits"> {$pwg->l10n_dec('%d hit', '%d hits',$thumbnail.NB_HITS)} </span> {/if} </div> </span> </span> </li> {/foreach} </ul> {/strip}{/if}
mon tooltip apparait bien ( j'ai mis une image fixe, c'est pour tester ) seulement, voila le Nombre de Vue et le Nombre de commentaire sont toujours ceux de la première Thumbail )
en fait le " $(document).ready(function() {
$('.my-tooltip').tooltipster({
modifie une fois la class : my-tooltip qui est utilisée dans la boucle foreach
auriez vous une idée pour m'aider ?
Version de Piwigo: 2.6.2
Version de PHP:
Version de MySQL:
URL Piwigo: http://
Hors ligne
Bonjour
oui regarde le code d'image Preview pour comprendre le raisonnement
piwigo intègre de base des bibliothèques de tooltip aussi
Hors ligne
bonjour
j'ai pas tout compris avec image preview
sur mode je progresse mais je butte ici :
<script> $(document).ready(function() { var maclass={/literal}{$my_class}{literal} $("."+maclass).tooltipster({ content: $('<span><img src="./upload/2013/07/11/20130711110940-9607e4b8.jpg"> <strong>{/literal}{$pwg->l10n_dec('%d hit', '%d hits',$thumbnail.NB_HITS)}{literal}</strong><br><strong>{/literal}{$pwg->l10n_dec('%d comment', '%d comments',$thumbnail.NB_COMMENTS)}{literal}</strong></span>') }); }); </script>
le pb se situe : var maclass={/literal}{$my_class}{literal}
$("."+maclass).tooltipster({
mes connaissances sont limitées à ce niveau
alors si qqun pouvait m'indiquer gentille-ment l’erreur je lui en serait reconnaissant
cdlt
Hors ligne
le problème est conceptuel je pense
il ne faut pas pour chaque minitaure déclarer une tolltip mais dire que pour tous les .thumbList img prendre l'attribut data-tooltip ou data-content ou data-truc de la .thumbList img en cours (this)
ex: http://piwigo.org/dev/browser/extension … _js.tpl#L7 'imgsrc' et "data-tittle" http://piwigo.org/dev/browser/extension … nc.php#L57
Dernière modification par flop25 (2014-04-11 12:04:46)
Hors ligne
ha et Piwigo intégre déjà http://piwigo.org/dev/browser/trunk/the … inified.js utilisé en admin et par certains comme les OS_**
Hors ligne
bonjour
Bon j'ai réussi à intégrer ce script sur la page des Thumbails
il ne reste plus qu'a le peupler
voici une partie du code utilisée
{foreach from=$thumbnails item=thumbnail} {assign var=my_class value="my_tooltip"|cat:$num_class} {assign var=derivative value=$pwg->derivative($stripped.thumbSize, $thumbnail.src_image)} {if !$derivative->is_cached()} {combine_script id='jquery.ajaxmanager' path='themes/default/js/plugins/jquery.ajaxmanager.js' load='footer'} {combine_script id='thumbnails.loader' path='themes/default/js/thumbnails.loader.js' require='jquery.ajaxmanager' load='footer'} {/if} <!--- {($thumbnail.DESCRIPTION|regex_replace:"/[\r\t\n]/":" ")|@debug_print_var}<br>*/ ---> {assign var=my_desc value=$thumbnail.DESCRIPTION|regex_replace:"/[\r\t\n]/":" "} {literal} <script> $(document).ready(function() { var maclass={/literal}"{$my_class}"{literal} $("."+maclass).tooltipster({ content: $('<span><img src="{/literal}{$derivative->get_url()}{literal}"><br><strong>{/literal}{$pwg->l10n_dec('%d hit', '%d hits',$thumbnail.NB_HITS)}{literal}</strong><br><strong>{/literal}{$pwg->l10n_dec('%d comment', '%d comments',$thumbnail.NB_COMMENTS)}{literal}</strong><br><strong>{/literal}{$my_desc}{literal}</strong></span>'), position: "bottom-right", contentAsHTML: true, interactive: true, theme: 'tooltipster-shadow' }); }); </script> {/literal} <li class="{$my_class}"> .......... ......... </li> {assign var="num_class" value=($num_class+1)} {/foreach}
je souhaiterais savoir si il y a une variable accessible dans cette page pour afficher les notes et une autre pour afficher si la photo est dans les favoris , voir même la date de prise de vue.
merci d'avance
cdlt
Dernière modification par patfrwar (2014-04-11 21:11:46)
Hors ligne