Sujet fermé
Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5

[RESOLU] Galerie photo sur hover le title apparait.
#1

Citation :#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
#~ Version du CMS: 1.7.0
#~ Nom de l'hébergeur :
#~ Informations Système :
#~~~~~ NE PAS SUPPRIMER CE BLOC ~~~~~
Bonjour, j'utilise les albums photos et sur le hover des thumbnails y apparait en title tout ce qui se trouve dans la boite commentaire. J'ai un tableau descriptif dans mon commentaire et on y vois le code source du tableau. Comment faire pour désactiver le title.

Voici une capture d'écran
http://www.joly-design.com/test/erreur/g...-title.jpg

merci
#2

Code du gabarit album utilisé ?
#3

J'utilise Gabarit lightbox.

Code :
{* Include JS files. You can move this to the head of your page template if you want *}
<!--Lightbox 2.0.2-->
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/lightbox.js"></script>
<script language="javascript" type="text/javascript" src="modules/Album/templates/db/js/SMRcode.js"></script>

{if $pictureid !=0}

{* Big Picture *}
<div style="text-align:center">
<p class="bigpicturecaption"><strong>{$picture->name}</strong><br />
{$picture->comment}<br />
<span class="bigpicturenav">
{if $link.picture.previous}<a href="{$link.picture.previous}" title="Previous picture">< Previous</a>{/if}
<span class= "albumpicturecount">( Picture {$picturenumber}/{$picturecount} )</span>
{if $link.picture.next}<a href="{$link.picture.next}" title="Next picture">Next ></a></span>{/if}
</p>
<a href="" onmouseover="SMR_setLink(this);" target="_blank"><img src="{$picture->picture}" alt="{$picture->name|escape:'html'} - {$picture->comment|escape:'html'}" onload="SMR_resize(this, {$max_image_size});" title="{$picture->name|escape:'html'}  - {$picture->comment|escape:'html'}" /></a>
</div>
{/if}

{* Album List *}
{if !$album}
<ul class="albumlist">
    {foreach from=$albums item=album}
    <li class="thumb">
     <a href="{$album->link}">
<img src="{$album->thumbnail}" alt="{$album->name|escape:'html'}" title="{$album->name|escape:'html'} - {$album->comment|escape:'html'}"{$album->autothumbnailsize} /></a>

<p class="albumname">{$album->name}<br />
<span class="albumpicturecount">({$album->picturecount} images)</span><br />
<span class="albumcomment">{$album->comment}</span></p>
</li>
    {/foreach}
</ul>

{else}

{* Photo List *}
<p><strong>{$album->name}</strong><br />
{$album->comment}<br />
<span class="instructiontext">Cliquer sur la photo pour agrandir. Cliquer sur le bouton "close" pour fermer. {if $returnlink}<a href="{$returnlink}">Retour aux albums</a>{/if}</span></p>

    {if $pagecount>1}
    <p class="albumnav">
        <a href="{$link.page.first}" title="first page"><< </a>
        {if $link.page.previous}<a href="{$link.page.previous}" title="previous page">< </a>{/if}
        page {$pagenumber}/{$pagecount}
        {if $link.page.next}<a href="{$link.page.next}" title="next page"> ></a>{/if}
        <a href="{$link.page.last}" title="last page"> >></a>
    </p>
    {/if}

<ul class="picturelist">
    {foreach from=$pictures item=picturesrow}
        {foreach from=$picturesrow item=onepicture}
        <li class="thumb"><a href="{$onepicture->picture}" rel="lightbox[{$album->name|escape:'html'}]" title="{$onepicture->name|escape:'html'} {if ($onepicture->comment != "")}- {$onepicture->comment|escape:'html'}{/if}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"{$onepicture->autothumbnailsize} /></a>
          </li>

      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
        {/foreach}
    {/foreach}
</ul>
<div style="clear:both;"></div>
{if $picturecount==0}No image{/if}
{/if}

{if $picture->id>0}
{/if}
#4

Pendant que je regarde, profites pour nettoyer tes vieux post, j'en ai déjà remontés quelques-un Wink
#5

Ca doit être le :
title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"

Dans la balise IMG. Essaye peut-être de supprimer " - {$onepicture->comment|escape:'html'}"

Il doit donc te rester :
title="{$onepicture->name|escape:'html'}"
#6

Code :
<a href="" onmouseover="SMR_setLink(this);" target="_blank"><img src="{$picture->picture}" alt="{$picture->name|escape:'html'} - {$picture->comment|escape:'html'}" onload="SMR_resize(this, {$max_image_size});" [color=red]title="{$picture->name|escape:'html'}  - {$picture->comment|escape:'html'}"[/color] /></a>
</div>
Supprime - {$picture->comment|escape:'html'}
Code :
{* Album List *}
{if !$album}
<ul class="albumlist">
    {foreach from=$albums item=album}
    <li class="thumb">
     <a href="{$album->link}">
<img src="{$album->thumbnail}" alt="{$album->name|escape:'html'}" title="{$album->name|escape:'html'} - {$album->comment|escape:'html'}"{$album->autothumbnailsize} /></a>
idem : title="{$album->name|escape:'html'} - {$album->comment|escape:'html'

Si tu veux le garder, essaye en modifiant |escape:'html' en |escape:'htmlall'
#7

Bonjour, j'ai fait les modifications mais sans succès.


Vos suggestions.
Code :
{* Include JS files. You can move this to the head of your page template if you want *}
<!--Lightbox 2.0.2-->
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/lightbox.js"></script>
<script language="javascript" type="text/javascript" src="modules/Album/templates/db/js/SMRcode.js"></script>

{if $pictureid !=0}

{* Big Picture *}
<div style="text-align:center">
<p class="bigpicturecaption"><strong>{$picture->name}</strong><br />
{$picture->comment}<br />
<span class="bigpicturenav">
{if $link.picture.previous}<a href="{$link.picture.previous}" title="Previous picture">< Previous</a>{/if}
<span class= "albumpicturecount">( Picture {$picturenumber}/{$picturecount} )</span>
{if $link.picture.next}<a href="{$link.picture.next}" title="Next picture">Next ></a></span>{/if}
</p>
<a href="" onmouseover="SMR_setLink(this);" target="_blank"><img src="{$picture->picture}" alt="{$picture->name|escape:'html'} - {$picture->comment|escape:'html'}" onload="SMR_resize(this, {$max_image_size});" /></a>
</div>
{/if}

{* Album List *}
{if !$album}
<ul class="albumlist">
    {foreach from=$albums item=album}
    <li class="thumb">
     <a href="{$album->link}">
<img src="{$album->thumbnail}" alt="{$album->name|escape:'html'}"{$album->autothumbnailsize} /></a>

<p class="albumname">{$album->name}<br />
<span class="albumpicturecount">({$album->picturecount} images)</span><br />
<span class="albumcomment">{$album->comment}</span></p>
</li>
    {/foreach}
</ul>

{else}

{* Photo List *}
<p><strong>{$album->name}</strong><br />
{$album->comment}<br />
<span class="instructiontext">Cliquer sur la photo pour agrandir. Cliquer sur le bouton "close" pour fermer. {if $returnlink}<a href="{$returnlink}">Retour aux albums</a>{/if}</span></p>

    {if $pagecount>1}
    <p class="albumnav">
        <a href="{$link.page.first}" title="first page"><< </a>
        {if $link.page.previous}<a href="{$link.page.previous}" title="previous page">< </a>{/if}
        page {$pagenumber}/{$pagecount}
        {if $link.page.next}<a href="{$link.page.next}" title="next page"> ></a>{/if}
        <a href="{$link.page.last}" title="last page"> >></a>
    </p>
    {/if}

<ul class="picturelist">
    {foreach from=$pictures item=picturesrow}
        {foreach from=$picturesrow item=onepicture}
        <li class="thumb"><a href="{$onepicture->picture}" rel="lightbox[{$album->name|escape:'html'}]" title="{$onepicture->name|escape:'html'} {if ($onepicture->comment != "")}- {$onepicture->comment|escape:'html'}{/if}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"{$onepicture->autothumbnailsize} /></a>
          </li>

      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
        {/foreach}
    {/foreach}
</ul>
<div style="clear:both;"></div>
{if $picturecount==0}No image{/if}
{/if}

{if $picture->id>0}
{/if}
Lorsque je regarde le code source je vois un <ul class="picturelist"> j'ai donc essayé d'enlevé ce bout de code mais là mes petites images ne s'affichaient plus.
Code :
title="{$onepicture->name|escape:'html'} {if ($onepicture->comment != "")}- {$onepicture->comment|escape:'html'}{/if}"
Adresse du site web pour voir le code source.
http://24x15degres.com/index.php?page=projets
#8

Comme on n'avait pas de lien, on ne pouvait savoir si c'étaient les thumbs de l'albums ou les thumb des images de l'album qui coinçaient.
Le seul code que tu dois modifier est celui-ci :
Code :
<ul class="picturelist">
    {foreach from=$pictures item=picturesrow}
        {foreach from=$picturesrow item=onepicture}
        <li class="thumb"><a href="{$onepicture->picture}" rel="lightbox[{$album->name|escape:'html'}]" title="{$onepicture->name|escape:'html'} {if ($onepicture->comment != "")}- {$onepicture->comment|escape:'html'}{/if}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"{$onepicture->autothumbnailsize} /></a>
          </li>

      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
        {/foreach}
    {/foreach}
</ul>
à remplacer par :
Code :
<ul class="picturelist">
    {foreach from=$pictures item=picturesrow}
        {foreach from=$picturesrow item=onepicture}
        <li class="thumb"><a href="{$onepicture->picture}" rel="lightbox[{$album->name|escape:'html'}]" title="{$onepicture->name|escape:'html'}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'}" title="{$onepicture->name|escape:'html'}"{$onepicture->autothumbnailsize} /></a>
          </li>

      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
        {/foreach}
    {/foreach}
</ul>
#9

Sans succès.
J'ai bien changé ce que tu as dis... en rouge est-ce que je devais supprimer ce code. Car c'est ce que j'ai fait.

Je comprend pas trop pourquoi on fait des modifications dans <ul class="albumlist"> car c'est plutôt <ul class="picturelist"> qui apparait dans le code source.

Code :
{* Include JS files. You can move this to the head of your page template if you want *}
<!--Lightbox 2.0.2-->
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/prototype.js"></script>
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/lightbox.js"></script>
<script language="javascript" type="text/javascript" src="modules/Album/templates/db/js/SMRcode.js"></script>

{if $pictureid !=0}

{* Big Picture *}
<div style="text-align:center">
<p class="bigpicturecaption"><strong>{$picture->name}</strong><br />
{$picture->comment}<br />
<span class="bigpicturenav">
{if $link.picture.previous}<a href="{$link.picture.previous}" title="Previous picture">< Previous</a>{/if}
<span class= "albumpicturecount">( Picture {$picturenumber}/{$picturecount} )</span>
{if $link.picture.next}<a href="{$link.picture.next}" title="Next picture">Next ></a></span>{/if}
</p>
<a href="" onmouseover="SMR_setLink(this);" target="_blank"><img src="{$picture->picture}" alt="{$picture->name|escape:'html'} - {$picture->comment|escape:'html'}" onload="SMR_resize(this, {$max_image_size});" title="{$picture->name|escape:'html'}  - {$picture->comment|escape:'html'}" /></a>
</div>
{/if}

{* Album List *}
{if !$album}
<ul class="albumlist">
    {foreach from=$albums item=album}
    <li class="thumb">
     <a href="{$album->link}">
<img src="{$album->thumbnail}" alt="{$album->name|escape:'html'}" title="{$album->name|escape:'html'}"{$album->autothumbnailsize} /></a>

<p class="albumname">{$album->name}<br />
<span class="albumpicturecount">({$album->picturecount} images)</span></p>
</li>
    {/foreach}
</ul>

{else}

{* Photo List *}
<p><strong>{$album->name}</strong><br />
{$album->comment}<br />
<span class="instructiontext">Cliquer sur la photo pour agrandir. Cliquer sur le bouton "close" pour fermer. {if $returnlink}<a href="{$returnlink}">Retour aux albums</a>{/if}</span></p>

    {if $pagecount>1}
    <p class="albumnav">
        <a href="{$link.page.first}" title="first page"><< </a>
        {if $link.page.previous}<a href="{$link.page.previous}" title="previous page">< </a>{/if}
        page {$pagenumber}/{$pagecount}
        {if $link.page.next}<a href="{$link.page.next}" title="next page"> ></a>{/if}
        <a href="{$link.page.last}" title="last page"> >></a>
    </p>
    {/if}

<ul class="picturelist">
    {foreach from=$pictures item=picturesrow}
        {foreach from=$picturesrow item=onepicture}
        <li class="thumb"><a href="{$onepicture->picture}" rel="lightbox[{$album->name|escape:'html'}]" title="{$onepicture->name|escape:'html'} {if ($onepicture->comment != "")}- {$onepicture->comment|escape:'html'}{/if}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"{$onepicture->autothumbnailsize} /></a>
          </li>

      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
        {/foreach}
    {/foreach}
</ul>
<div style="clear:both;"></div>
{if $picturecount==0}No image{/if}
{/if}

{if $picture->id>0}
{/if}
#10

Effectivement, j'ai modifié le message du dessus.
#11

Cela fait perdre mes commentaires lorsque je clique sur la photo pour l'avoir en grand format.
J'aimerais garder les commentaires de la grande photo. C'est juste le title sur le hover des thumbnails que je veux faire disparaitre.
#12

En fait, je suppose que c'est le script Jquery Lightbox qui reprend cette valeur dans la balise A.

As-tu essayé de supprimer le title de la balise IMG en conservant le title de la balise A ?
#13

Code :
<ul class="picturelist">
    {foreach from=$pictures item=picturesrow}
        {foreach from=$picturesrow item=onepicture}
        <li class="thumb"><a href="{$onepicture->picture}" rel="lightbox[{$album->name|escape:'html'}]" title="{$onepicture->name|escape:'html'} {if ($onepicture->comment != "")}- {$onepicture->comment|escape:'html'}{/if}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"{$onepicture->autothumbnailsize} /></a>
          </li>

      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
        {/foreach}
    {/foreach}
</ul>
En enlevant ce code ca ne fonctionne pas : sur <img>
Code :
title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"
#14

Dans tous les cas, ton code est invalide car il est interdit de mettre des balises dans un title.
C'est d'ailleurs pour éviter ce problème que l'auteur du module a créé 3 commentaires, pour le passage à la ligne, par contre, il n'aurait pas du mettre de whysiwig
Alors, soit tu utilises autre chose que album, il y a assez de jquery qui te permettent ces fantaisies, soit tu peux résoudre à moitié en faisant ceci :
Code :
<li class="thumb">
<a href="{$onepicture->picture}" rel="lightbox[{$album->name|escape:'html'}]" title="{$onepicture->name|escape:'html'} {if ($onepicture->comment != "")}- {$onepicture->comment|escape:'html'}{/if}">
<img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'} - {$onepicture->comment|strip_tags:false}" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|strip_tags:false}"{$onepicture->autothumbnailsize} />
</a>
</li>
C'est une demi solution, car comme le js prend le title du a href, on ne peut modifier ce dernier.
Donc si tu passes le curseur au-dessus de l'image, ça passe, en dehors, ça casse.
#15

Pour que cela fonctionne il faut garder le title avec le "name", si le "name" et le "comment" est supprimé ca ne fonctionne pas.
Il faut juste supprimer le title comment.

Voilà le bon code. Merci à tous d'avoir participer.

Code :
<ul class="picturelist">
    {foreach from=$pictures item=picturesrow}
        {foreach from=$picturesrow item=onepicture}
        <li class="thumb"><a href="{$onepicture->picture}" rel="lightbox[{$album->name|escape:'html'}]" title="{$onepicture->name|escape:'html'} {if ($onepicture->comment != "")}- {$onepicture->comment|escape:'html'}{/if}"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}" title="{$onepicture->name|escape:'html'} - {$onepicture->comment|escape:'html'}"{$onepicture->autothumbnailsize} /></a>
          </li>

      {if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
        {/foreach}
    {/foreach}
</ul>
#16

Bin non, car ton comment apparaît lorsque le curseur est au-dessus du <a href (en dehors de l'image, sur le background blanc).
#17

J'ai trouvé la solution complète, mais il faut passer par une très légère modif du modules/Album/templates/db/lightbox/js/lightbox.js
lignes 331 et 339, remplacer title par name
Code :
imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));
remplacer title par name
Code :
imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('name')));
Ensuite, le gabarit :
Code :
<li class="thumb"><a href="{$onepicture->picture}" rel="lightbox[{$album->name|escape:'html'}]" title="{$onepicture->name|escape:'html'}" {if ($onepicture->comment != "")} name='{$onepicture->comment|escape:'html'}'{/if}> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name|escape:'html'}" title="{$onepicture->name|escape:'html'}" {$onepicture->autothumbnailsize} /></a>
          </li>
Attention à ne pas utiliser de simple quote dans le commentaire, uniquement des doubles (ou alors tu modifies le gabarit : name="")

Have fun Smile
#18

Génial, ca fonctionne super bien.
#19

Il te reste un problème : le lightbox ne fonctionne pas sous IE6 sur ton site.
Si quelqu'un avait IE7 ou IE8, il serait intéressant de voir s'il s'affiche.
Sur mon site, il n'y a aucun problème sous IE6.
#20

Effectivement sur IE6 et IE7 le lightbox cause problème. Ceci doit être dû au fait que j'ai supprimé les css pour ie6. Puis-je avoir ton URL afin de comparer.

J'ai ajouté ceci à mon gabarit mais sans succès.

Code :
<!--[if IE 6]>
<script type="text/javascript" src="modules/MenuManager/CSSMenu.js"></script>
<![endif]-->


<!--[if IE 6]>
<script type="text/javascript"  src="uploads/NCleanBlue/js/ie6fix.js"></script>
<script type="text/javascript">
// argument is a CSS selector
DD_belatedPNG.fix('.sbar-top,.sbar-bottom,.main-top,.main-bottom,#version');
</script>
<style type="text/css">
/* enable background image caching in IE6 */
html {filter:expression(document.execCommand("BackgroundImageCache", false, true));}
</style>
<![endif]-->
#21

Il est en local, mais je vais le placer en ligne, laisse-moi 5 minutes.
#22

Voilà, il n'y a de commentaire que sur la 1e photo :
http://www.menus-cmsms-madesimple.be/ind...9&page=159

La solution est bonne, mais n'est pas valide xhtml à cause des caractères spéciaux dans name.
J'essayerai de l'améliorer en modifiant le js.
#23

Je vois une différence entre nos fichiers
<script type="text/javascript" src="modules/Album/templates/db/lightbox/js/prototype.js">
J'ai la version 1.6.1 et toi 1.4.0.
Crois-tu que ceci à un impact?
#24

J'update, minute.
#25

Pas de différence, c'est toujours bon.
Sujet fermé


Atteindre :


Utilisateur(s) parcourant ce sujet : 4 visiteur(s)