•  » Styles
  •  » Integration d'un Tooltip jquery su le thumbails sur Stripped

#1 2014-04-10 17:36:33

patfrwar
Membre
Tours
2011-05-24
164

Integration d'un Tooltip jquery su le thumbails sur Stripped

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


Images attachées

Hors ligne

#2 2014-04-10 18:08:22

flop25
Équipe Piwigo
2006-07-06
6428

Re: Integration d'un Tooltip jquery su le thumbails sur Stripped

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

#3 2014-04-11 11:53:21

patfrwar
Membre
Tours
2011-05-24
164

Re: Integration d'un Tooltip jquery su le thumbails sur Stripped

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

Hors ligne

#4 2014-04-11 12:01:59

flop25
Équipe Piwigo
2006-07-06
6428

Re: Integration d'un Tooltip jquery su le thumbails sur Stripped

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

#5 2014-04-11 12:03:59

flop25
Équipe Piwigo
2006-07-06
6428

Re: Integration d'un Tooltip jquery su le thumbails sur Stripped

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

#6 2014-04-11 21:11:12

patfrwar
Membre
Tours
2011-05-24
164

Re: Integration d'un Tooltip jquery su le thumbails sur Stripped

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


Images attachées

Dernière modification par patfrwar (2014-04-11 21:11:46)

Hors ligne

  •  » Styles
  •  » Integration d'un Tooltip jquery su le thumbails sur Stripped

Pied de page des forums

Propulsé par FluxBB

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