Récupérer les tag "Title" et "Alt" sur un diaporama d'images

Récupérer les tag "Title" et "Alt" sur un diaporama d'images - Javascript/Node.js - Programmation

Marsh Posté le 04-04-2017 à 18:13:25    

Bonjour,
 
J'utilise un script pour une galerie photo (diaporama avec un effet de fondu au noir)
Ce code m'affiche le tag "title" de chaque image en superposition de chaque image, mais j'aimerais aussi pouvoir récupérer le tag "alt" de ces images pour afficher aussi son contenu en complément.
 
La suite des images est listée comme ceci : (avec autant de lignes que d'images)

Code :
  1. <div class="content"><div><a href="images/large/image1.jpg"><img src="images/thumbs/image1_rs.jpg" title="texte zone title" alt="texte zone alt" class="thumb" /></a></div></div>


 
Voici les 2 parties de code qui me semble récupérer le tag "title" et l'afficher :

Code :
  1. function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
  2. $this.fadeOut("fast",function(){
  3.  $this.attr("src", "" ).attr("src", imgSrc); //change image source
  4.  FullScreenBackground($this,imageWidth,imageHeight); //scale background image
  5.  $preloader.fadeOut("fast",function(){$this.fadeIn("slow" );});
  6.  var imageTitle=$img_title.data("imageTitle" );
  7.  if(imageTitle){
  8.   $this.attr("alt", imageTitle).attr("title", imageTitle);
  9.   $img_title.fadeOut("fast",function(){
  10.    $img_title.html(imageTitle).fadeIn();
  11.   });
  12.  } else {
  13.   $img_title.fadeOut("fast",function(){
  14.    $img_title.html($this.attr("title" )).fadeIn();
  15.   });
  16.  }
  17. });
  18. }


 

Code :
  1. //get image title
  2. function GetImageTitle(elem){
  3. var title_attr=elem.children("img" ).attr("title" ); //get image title attribute
  4. $img_title.data("imageTitle", title_attr); //store image title
  5. }


 
Je n'arrive pas à créer / compléter la fonction me permettant ce complément d'affichage de ce tag "alt" en plus de "title" :(
que faire, je débute et je n'y arrive pas ?
Merci d'avance pour toutes pistes et aides


Message édité par dann le 04-04-2017 à 18:35:08
Reply

Marsh Posté le 04-04-2017 à 18:13:25   

Reply

Marsh Posté le 05-04-2017 à 09:23:15    

Bonjour,
 
Alt est une balise sémantique qui permet d'afficher un contenu lorsque ton image n'est pas lu par le navigateur. Pourquoi veux-tu l'afficher comme un second champs au lieu de tout mettre dans "title" ?
 
Concernant ton problème, les fonctions que tu nous montres indiquent simplement comme le script récupère le titre de l'image. Mais il n'explique pas comment il l'utilise.
En effet, récupérer l'information est relativement simple. Il suffit de rajouter trois lignes dans la première fonction que tu nous a donné.  
 
Mais la bonne question serait, comment afficher l'attribut une fois récupéré.
Malheureusement, je n'ai pas assez d'information sur le script pour t'aider. Tu peux nous fournir son nom ?
 
L'autre solution serait de le faire à la main ...  
 
Tor

Message cité 1 fois

---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 05-04-2017 à 10:10:25    

Pour moi cette ligne:

Code :
  1. $this.attr("alt", imageTitle).attr("title", imageTitle);


mets le même contenu dans le 'title' et le 'alt'.

 

Du coup pourquoi vouloir afficher les deux, vu que c'est la même chose?

Message cité 1 fois
Message édité par h3bus le 05-04-2017 à 10:11:05

---------------
sheep++
Reply

Marsh Posté le 05-04-2017 à 12:07:40    

torwood3 a écrit :

Bonjour,
Alt est une balise sémantique qui permet d'afficher un contenu lorsque ton image n'est pas lu par le navigateur. Pourquoi veux-tu l'afficher comme un second champs au lieu de tout mettre dans "title" ?


Merci de vos réponses à tous les deux.
Ce serait donc pour afficher la donnée "Alt" sur l'image, mais en dessous de la donnée "Title", et avec une police de caractères plus petite / ou autre css.
 
Le script original est ici (j'ai juste rajouté un timer pour en faire un diaporama -en gardant les vignettes) et modifié la présentation (et les photos bien sûr).
Le source est librement modifiable par son créateur.
http://manos.malihu.gr/tuts/malihu [...] llery.html
 

h3bus a écrit :

Pour moi cette ligne:

Code :
  1. $this.attr("alt", imageTitle).attr("title", imageTitle);


mets le même contenu dans le 'title' et le 'alt'.
Du coup pourquoi vouloir afficher les deux, vu que c'est la même chose?


Oui cette ligne me semble prendre le contenu des 2 champs (ou de l'un et/ou de l'autre) ?
Mais le script n'affiche cependant que le contenu de la balise "Title" ... ?!
Mais le but pour moi, c'est d'afficher ces 2 balises avec des données différenciées et pas au même endroit ni même présentation... (voir plus haut)


Message édité par dann le 05-04-2017 à 13:00:57
Reply

Marsh Posté le 05-04-2017 à 13:46:09    

Ok, rien de bien compliqué.
Il te faut rajouter un attribut à tes images car alt a déjà une utilité (Tu vas pas utiliser ta voiture pour cuir un oeuf :!)
Donc rajoute un attribut sur les images comme "subtitle", tu met un élément dans le dom pour l'afficher. Et ensuite tu connectes le tout au niveau du JS.
 
Dans la partie HTML, tu remplaces  

Code :
  1. <div id="img_title"></div>
  2. <!-- La ligne à rajouter -->
  3. <div id="img_subtitle"></div>
  4. <div id="toolbar"><a href="#" title="Maximize" onClick="ImageViewMode('full');return false"><img src="toolbar_fs_icon.png" width="50" height="50"  /></a></div>


 
Rajoutons un attribut subtitle

Code :
  1. <div class="content">
  2.       <div>
  3.          <a href="images/large/image1.jpg">
  4.              <img src="images/thumbs/image1_rs.jpg" title="texte zone title" alt="texte zone alt" subtitle="Text en petit" class="thumb" />
  5.          </a>
  6.       </div>
  7.     </div>


 
Concernant le JS :  

Code :
  1. var $img_sub_title = $("#img_subtitle" );
  3. function GetImageTitle(elem){
  4. var title_attr=elem.children("img" ).attr("title" ); //get image title attribute
  5. var sub_title_attr=elem.children("img" ).attr("subtitle" );
  6. $img_title.data("imageTitle", title_attr); //store image title
  7. $img_sub_title.data("imageSubTitle", sub_title_attr); //store image subtitle
  8. }


 
Ensuite  

Code :
  1. function BackgroundLoad($this, imageWidth, imageHeight, imgSrc){
  2.     $this.fadeOut("fast",function(){
  3.         $this.attr("src", "" ).attr("src", imgSrc); //change image source
  4.         FullScreenBackground($this,imageWidth,imageHeight); //scale background image
  5.         $preloader.fadeOut("fast",function(){$this.fadeIn("slow" );});
  7.         var imageTitle=$img_title.data("imageTitle" );       
  8.         var imageSubTitle=$img_title.data("imageSubTitle" );
  10.         if(imageTitle){
  11.             $this.attr("alt", imageTitle).attr("title", imageTitle);
  12.             $img_title.fadeOut("fast",function(){
  13.                 $img_title.html(imageTitle).fadeIn();
  14.             });
  15.         } else {
  16.            $img_title.fadeOut("fast",function(){
  17.                $img_title.html($this.attr("title" )).fadeIn();
  18.             });
  19.         }
  20.         $img_sub_title.fadeOut("fast",function(){
  21.             $img_sub_title.html($this.attr("subtitle" )).fadeIn();
  22.         });
  23.     });
  24. }


 
Voila, je te laisse mettre ça au bonne endroit, de faire le style qui te plait et revenir vers moi si ca fonctionne pas (je dirais 50/50).
Je tiens quand même a dire que le code qui est proposé par cette personne est affreux (en restant courtois).
 
Tor
 
Edit : Mise en forme


Message édité par torwood3 le 05-04-2017 à 13:57:55

---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 05-04-2017 à 13:49:57    

Wouah ! Merci "torwood3"
 
Je fais la modif dans la journée et je te dis !
C'est super sympa, et ça me permet de comprendre un peu mieux ce code et d'avancer petit à petit
 
GRAND MERCI !


Message édité par dann le 05-04-2017 à 13:50:58
Reply

Marsh Posté le 05-04-2017 à 14:07:31    

Comme indiqué, l'attribut alt est utilisé pour afficher un msg quand le navigateur ne peut afficher l'image. Si une description doit être mise sur une image, c'est dans l'attribut "title" si cette description est relativement courte, dans l'attribut "longdesc" si la description est longue (mais dans ce cas, longdesc contient en fait une url vers une page contenant une longue description de l'image).
 
Donc d'un point de vue sémantique, tu ne devrais pas mélanger le contenu de ces 2 attributs car ils n'ont pas du tout le même but. A noter que IE avait la fâcheuse tendance à inverser le rôle de ces 2 attributs, ce qui a contribuer à ajouter un peu plus de confusion chez certains :/


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Marsh Posté le 05-04-2017 à 15:50:39    

Bon zut, ça ne fonctionne pas  
La zone "subtitle" s'affiche bien là ou je veux, mais ne change pas et reste sur le premier subtitle donné à la première image ...
 
J'ai bien essayé de suivre le code, modifié quelques trucs, mais nada
 
je me demandais s'il n'y avait pas un petit soucis ici

Code :
  1. var imageTitle=$img_title.data("imageTitle" );     
  2. var imageSubTitle=$img_title.data("imageSubTitle" );


 
j'ai essayé ça, qui me paraissait plus "logique" mais ça ne change rien ...

Code :
  1. var imageTitle=$img_title.data("imageTitle" );     
  2. var imageSubTitle=$img_sub_title.data("imageSubTitle" );


 
J'ai aussi aussi tenté de mettre cette ligne en plus, mais sans succès ...

Code :
  1. //cache vars
  2. $thumbnails_wrapper=$("#thumbnails_wrapper" );
  3. $outer_container=$("#outer_container" );
  4. $thumbScroller=$(".thumbScroller" );
  5. $thumbScroller_container=$(".thumbScroller .container" );
  6. $thumbScroller_content=$(".thumbScroller .content" );
  7. $thumbScroller_thumb=$(".thumbScroller .thumb" );
  8. $preloader=$("#preloader" );
  9. $toolbar=$("#toolbar" );
  10. $toolbar_a=$("#toolbar a" );
  11. $bgimg=$("#bgimg" );
  12. $img_title=$("#img_title" );
  13. $img_sub_title=$("#img_sub_title" );
  14. $nextImageBtn=$(".nextImageBtn" );
  15. $prevImageBtn=$(".prevImageBtn" );


Message édité par dann le 05-04-2017 à 15:51:49
Reply

Marsh Posté le 05-04-2017 à 16:04:23    

Il ne doit pas manquer grand chose pour que ça fonctionne parfaitement, mais je ne trouve pas

Reply

Marsh Posté le 05-04-2017 à 16:18:40    

@Rufo Merci de l'info :), mais du coup dans le cas suivant, quelle serait la meilleure approche :
- on rajoute un attribut data-* ?
- on utilise longdesc + title ?
 
Bien vu pour le code, j'ai répondu (trop) rapidement.
 
Pour le soucis, il faut que tu regardes quelles sont les informations contenu dans le "$this" de la fonction "BackgroundLoad"
 
Pour cela je te propose de rajouter des console.log.
=> F12 pour afficher la console dans un navigateur https://www.alsacreations.com/astuc [...] cript.html
 
Donc rajoute ceci à la fin de la fonction BackgroundLoad (juste après le if(imageTitle) {}else{} :

Code :
  1. console.log($this);


Tu fais défiler seulement 2 photos puis tu nous copies colle le résultat de la console ici ok ?
 
Juste tu as bien rajouté juste après le if else de la fonction BackgroundLoad ceci ?

Code :
  1. $img_sub_title.fadeOut("fast",function(){
  2.             $img_sub_title.html($this.attr("subtitle" )).fadeIn();
  3.         });


 
Tor

Message cité 1 fois

---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 05-04-2017 à 16:18:40   

Reply

Marsh Posté le 05-04-2017 à 16:28:46    

Alors ça me donne ça  
 

Code :
  1. Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:4:0
  2. Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. jquery.min.js:2:8283
  3. Object { length: 1, context: HTMLDocument → index2.html, selector: "#bgimg", 1 more… } index2.html:574:2


 

Reply

Marsh Posté le 05-04-2017 à 16:44:24    

Ouai, pas trop utile.
 
Ok je pense avoir trouvé  

Code :
  1. function BackgroundLoad($this, imageWidth, imageHeight, imgSrc){
  2.         $this.fadeOut("fast",function(){
  3.             $this.attr("src", "" ).attr("src", imgSrc); //change image source
  4.             FullScreenBackground($this,imageWidth,imageHeight); //scale background image
  5.             $preloader.fadeOut("fast",function(){$this.fadeIn("slow" );});
  6.             var imageTitle=$img_title.data("imageTitle" );     
  7.             var imageSubTitle=$img_sub_title.data("imageSubTitle" );
  8.             if(imageTitle){
  9.                 $this.attr("alt", imageTitle).attr("title", imageTitle);
  10.                 $img_title.fadeOut("fast",function(){
  11.                     $img_title.html(imageTitle).fadeIn();
  12.                 });
  13.             } else {
  14.                $img_title.fadeOut("fast",function(){
  15.                    $img_title.html($this.attr("title" )).fadeIn();
  16.                 });
  17.             }
  19.             if(imageSubTitle){
  20.                 $this.attr("subtitle", imageSubTitle);
  21.                 $img_sub_title.fadeOut("fast",function(){
  22.                     $img_sub_title.html(imageSubTitle).fadeIn();
  23.                 });
  24.             } else {
  25.                $img_sub_title.fadeOut("fast",function(){
  26.                     $img_sub_title.html($this.attr("subtitle" )).fadeIn();
  27.                });
  28.             }
  29.            
  30.         });
  31.     }


Message édité par torwood3 le 05-04-2017 à 16:49:34

---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 05-04-2017 à 16:48:44    

ça me donne cela :
j'ai juste fait une copie de l'index2.html > vers index3.html pour rajouter ton code console (au même endroit)
 

Code :
  1. Using //@ to indicate sourceMappingURL pragmas is deprecated. Use //# instead jquery.min.js:4:0
  2. Use of getPreventDefault() is deprecated.  Use defaultPrevented instead. jquery.min.js:2:8283
  3. width 986.6108786610878 index3.html:580:11
  4. height 655 index3.html:580:11
  5. id bgimg index3.html:580:11
  6. title Jazz Photography - © Dan index3.html:580:11
  7. alt Jazz Photography index3.html:580:11
  8. subtitle Text en petit index3.html:580:11
  9. src "file:///D:/PagesWeb/malihu/images/jazz/large/image1.jpg" index3.html:580:11
  10. style margin-left: 147px; margin-top: 0px; index3.html:580:11

Reply

Marsh Posté le 05-04-2017 à 16:50:16    

J'ai édité ma réponse précédente :p


---------------
"La valeur d'un homme tient dans sa capacité à donner et non dans sa capacité à recevoir." Albert Einstein / "Dans la nature, tout a toujours une raison. Si tu comprends cette raison, tu n'as plus besoin de l'expérience." Léonard De Vinci
Reply

Marsh Posté le 05-04-2017 à 16:53:08    

Ayé, ça marche !
Tu es trop fort "Tor" !

Reply

Marsh Posté le 05-04-2017 à 17:08:03    

J'ai vite re-récupéré l'attribut "alt" pour ne pas devoir tout renommer avec "subtitle", je verrais par la suite en reprenant "subtitle" mais ça marche déjà très bien pour tester.
Pour le code, je n'arrive pas à juger de sa qualité, mais cette galerie fonctionne de façon fluide partout, et ça me va donc ...
Elle reprend le look d'une ancienne galerie en flash que j'utilisais précédemment mais donc sans les soucis de compatibilité de flash
 
Voici le résultat, je ne suis qu'un petit photographe amateur passionné de Jazz ...
https://tinyurl.com/luws25p
 
La donnée "Alt" (je mettrais à jour vers "subtitle" pour suivre et respecter les conseils) me permet donc d'afficher le lieu de la prise de vue :)
Le "Title" au-dessus affiche le nom du musicien
et en modifiant un fast par un slow, ça peut même s'afficher en 2 temps, je fignolerai encore


Message édité par dann le 05-04-2017 à 19:23:20
Reply

Marsh Posté le 05-04-2017 à 17:22:27    

Je vais bien regarder ce nouveau code, et ça m'aide à avancer !
Et je ne sais pas de quel coin tu es "torwood3" ?, mais je t'offre volontiers un verre ou autre à l'occasion.
Un grand merci en attendant (et aussi à tous les participants)


Message édité par dann le 05-04-2017 à 18:56:45
Reply

Marsh Posté le 06-04-2017 à 10:59:46    

torwood3 a écrit :

@Rufo Merci de l'info :), mais du coup dans le cas suivant, quelle serait la meilleure approche :
- on rajoute un attribut data-* ?
- on utilise longdesc + title ?
 
[...]


A mon sens, plutôt utiliser "title" + un attribut data-* pour l'aspect sémantique, d'autant que, comme indiqué, l'attribut longdesc attend une url d'une page web expliquant en détail le contenu de l'image, ce qui n'est pas, a priori, le but recherché ici.


---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed