Annonce

Écrire une réponse

Veuillez écrire votre message et l'envoyer

Cliquez dans la zone sombre de l'image pour envoyer votre message.

Retour

Résumé de la discussion (messages les plus récents en premier)

patfrwar
2014-04-11 21:11:12

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

Code:

 {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

flop25
2014-04-11 12:03:59

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_**

flop25
2014-04-11 12:01:59

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

patfrwar
2014-04-11 11:53:21

bonjour

j'ai pas tout compris avec image preview

sur mode je progresse mais je butte ici :

Code:

<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

flop25
2014-04-10 18:08:22

Bonjour
oui regarde le code d'image Preview pour comprendre le raisonnement
piwigo intègre de base des bibliothèques de tooltip aussi

patfrwar
2014-04-10 17:36:33

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 :

Code:

{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://

Pied de page des forums

Propulsé par FluxBB

github twitter newsletter Faire un don Piwigo.org © 2002-2024 · Contact