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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Récupérer les tag "Title" et "Alt" sur un diaporama d'images

dann

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 :

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

function BackgroundLoad($this,imageWidth,imageHeight,imgSrc){
$this.fadeOut("fast",function(){
$this.attr("src", "" ).attr("src", imgSrc); //change image source
FullScreenBackground($this,imageWidth,imageHeight); //scale background image
$preloader.fadeOut("fast",function(){$this.fadeIn("slow" );});
var imageTitle=$img_title.data("imageTitle" );
if(imageTitle){
$this.attr("alt", imageTitle).attr("title", imageTitle);
$img_title.fadeOut("fast",function(){
$img_title.html(imageTitle).fadeIn();
});
} else {
$img_title.fadeOut("fast",function(){
$img_title.html($this.attr("title" )).fadeIn();
});
}
});
}

Code :

//get image title
function GetImageTitle(elem){
var title_attr=elem.children("img" ).attr("title" ); //get image title attribute
$img_title.data("imageTitle", title_attr); //store image title
}

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

Publicité

torwood3

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

h3bus

Troll Inside

Pour moi cette ligne:

Code :

$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++

dann

torwood3 a écrit :

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 :

$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

torwood3

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 :

<div id="img_title"></div>
<div id="img_subtitle"></div>
<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 :

<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" subtitle="Text en petit" class="thumb" />
</a>
</div>
</div>

Concernant le JS :

Code :

var $img_sub_title = $("#img_subtitle" );
function GetImageTitle(elem){
var title_attr=elem.children("img" ).attr("title" ); //get image title attribute
var sub_title_attr=elem.children("img" ).attr("subtitle" );
$img_title.data("imageTitle", title_attr); //store image title
$img_sub_title.data("imageSubTitle", sub_title_attr); //store image subtitle
}

Ensuite

Code :

function BackgroundLoad($this, imageWidth, imageHeight, imgSrc){
$this.fadeOut("fast",function(){
$this.attr("src", "" ).attr("src", imgSrc); //change image source
FullScreenBackground($this,imageWidth,imageHeight); //scale background image
$preloader.fadeOut("fast",function(){$this.fadeIn("slow" );});
var imageTitle=$img_title.data("imageTitle" );
var imageSubTitle=$img_title.data("imageSubTitle" );
if(imageTitle){
$this.attr("alt", imageTitle).attr("title", imageTitle);
$img_title.fadeOut("fast",function(){
$img_title.html(imageTitle).fadeIn();
});
} else {
$img_title.fadeOut("fast",function(){
$img_title.html($this.attr("title" )).fadeIn();
});
}
$img_sub_title.fadeOut("fast",function(){
$img_sub_title.html($this.attr("subtitle" )).fadeIn();
});
});
}

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

dann

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

rufo

Pas me confondre avec Lycos!

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

dann

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 :

var imageTitle=$img_title.data("imageTitle" );
var imageSubTitle=$img_title.data("imageSubTitle" );

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

Code :

var imageTitle=$img_title.data("imageTitle" );
var imageSubTitle=$img_sub_title.data("imageSubTitle" );

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

Code :

//cache vars
$thumbnails_wrapper=$("#thumbnails_wrapper" );
$outer_container=$("#outer_container" );
$thumbScroller=$(".thumbScroller" );
$thumbScroller_container=$(".thumbScroller .container" );
$thumbScroller_content=$(".thumbScroller .content" );
$thumbScroller_thumb=$(".thumbScroller .thumb" );
$preloader=$("#preloader" );
$toolbar=$("#toolbar" );
$toolbar_a=$("#toolbar a" );
$bgimg=$("#bgimg" );
$img_title=$("#img_title" );
$img_sub_title=$("#img_sub_title" );
$nextImageBtn=$(".nextImageBtn" );
$prevImageBtn=$(".prevImageBtn" );

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

dann

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

torwood3

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

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 :

$img_sub_title.fadeOut("fast",function(){
$img_sub_title.html($this.attr("subtitle" )).fadeIn();
});

Tor

Message cité 1 fois

Publicité

dann

Alors ça me donne ça

Code :

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

torwood3

Ouai, pas trop utile.

Ok je pense avoir trouvé

Code :

function BackgroundLoad($this, imageWidth, imageHeight, imgSrc){
$this.fadeOut("fast",function(){
$this.attr("src", "" ).attr("src", imgSrc); //change image source
FullScreenBackground($this,imageWidth,imageHeight); //scale background image
$preloader.fadeOut("fast",function(){$this.fadeIn("slow" );});
var imageTitle=$img_title.data("imageTitle" );
var imageSubTitle=$img_sub_title.data("imageSubTitle" );
if(imageTitle){
$this.attr("alt", imageTitle).attr("title", imageTitle);
$img_title.fadeOut("fast",function(){
$img_title.html(imageTitle).fadeIn();
});
} else {
$img_title.fadeOut("fast",function(){
$img_title.html($this.attr("title" )).fadeIn();
});
}
if(imageSubTitle){
$this.attr("subtitle", imageSubTitle);
$img_sub_title.fadeOut("fast",function(){
$img_sub_title.html(imageSubTitle).fadeIn();
});
} else {
$img_sub_title.fadeOut("fast",function(){
$img_sub_title.html($this.attr("subtitle" )).fadeIn();
});
}
});
}

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

dann

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

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

torwood3

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

dann

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

dann

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

dann

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

rufo

Pas me confondre avec Lycos!

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.

FORUM HardWare.fr

Programmation

Javascript/Node.js

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

Sujets relatifs
Récupérer Nom Collaborateur utilisant un fichier	Récupérer un projet ?
recupérer une chaine de texte d'un variable FOR	Folder d'images sous JSF
Fonction JS pour récupérer le tag image "Alt" sur un diaporama	[BATCH] récupérer la liste des compilateurs
Récupérer le dernier "bloc" de chaque ligne d'un fichier	Recuperer les donnes + mages et les sauvegardez
Plus de sujets relatifs à : Récupérer les tag "Title" et "Alt" sur un diaporama d'images

Page générée en 0.113 secondes