modification style

data-title

Sujet résolu

3 août 2018 à 16:19:03

bonjour,

J'ai un code php me permettant d'afficher le contenu des "exif" dans une lightbox .

<div class="row">
	<hr>
		<div class="gal col-md-10 col-md-offset-1"> 
		<?php
		$repfleurssauvages ='fleurssauvages';
		$dir = 'img/'.$repfleurssauvages.'/*.{jpg,jpeg,gif,png,JPG}'; 
		 foreach (glob($dir , GLOB_BRACE) as $filename) {  
		GetImageSize ($filename,$info);

		if (isset($info["APP13"])) 
		{
		   $iptc = iptcparse ($info["APP13"]);
		   
		   $titre = (isset($iptc["2#105"][0])) ? $iptc["2#105"][0] : 'Le champ titre est vide';
		   $auteur = (isset($iptc["2#122"][0])) ? $iptc["2#122"][0] : 'Le champ auteur est vide';
		}
		else
		{
		  
		  echo 'Aucun IPTC n\'est rempli';
		 } ?>
		 
		<a href="https://www.visionphotojura.fr/<?= $filename; ?>"  style="color:red;font-style:italic;font-weight:bold;" data-lightbox="example-set" data-title=" <?= $titre; ?> - <?= $auteur; ?>">
					<img src="<?= $filename; ?>" class="img-responsive thumbnail hoverable" alt="fleurs sauvages du jura">
					</a> 
				 <?php }?> 
	</div>
</div>

Je voudrais au niveau du "data-title" modifier le style css
et dans la variable que je récupère ($titre), tenir compte des caractères spéciaux pour ne pas avoir ce résultat:

caractères accentués

Merci d'avance pour vos conseils

eclairia

3 août 2018 à 16:36:24

Bonjour,

Que viens faire le JS là dedans?

Pour le premier point, le mieux est de mettre le code css dans un fichier .css.

De plus, je ne comprends pas ce que tu essayes de faire. Actuellement ton code css ne sera pas pris en compte parce que tu l'appliques sur une image.

Pour le deuxième problème, il faut rajouter une balise <meta> dans le <head> comme ceci:

<meta charset="utf-8" />

"Ils ne savaient pas que c'était impossible, alors ils l'ont fait" Mark Twain

dom39210

3 août 2018 à 16:46:48

dans le data-title, je récupère la valeur d'une variable contenue dans l'exif de la photo. C'es cette variable qui contient du texte que je veux customiser. en essayant de ra jouter style="etc", rien ne change . data-title, c'est du CSS, je croyais que c'était du js?

l'UTF8 c'est déjà fait

Benzouye

3 août 2018 à 17:06:26

Bonjour,

Tu sembles mélanger un peu les choses ...

Concernant les caractères spéciaux peu importe le charset de la page web (balise meta) ou l'encodage du fichier PHP, le iptcparse agit sur le fichier image, donc récupères des données dans l'encodage de ce fichier (j'imagine donc ISO-8859-1) ... A mon avis il faudrait essayer utf8_encode dans un premier temps :

$titre = (isset($iptc["2#105"][0])) ? utf8_encode( $iptc["2#105"][0] ) : 'Le champ titre est vide';
$auteur = (isset($iptc["2#122"][0])) ? utf8_encode( $iptc["2#122"][0] ) : 'Le champ auteur est vide';

Si cela ne fonctionne pas il faudra déterminer l'encodage de ton fichier image et utiliser mb_convert_encoding je suppose ...

Ensuite pour la question du data-title, l'information est traitée par ton plugin lightbox, c'est lui qui exploite l'attribut data-title et crée l'élément HTML dynamiquement. Donc comme le dis eclairia, identifie la classe CSS générée par ton plugin lightbox (avec l'outil de développement de ton navigateur par exemple) et ajoute une règle CSS sur cette classe dans ton fichier de style CSS pour modifier l'apparence du titre.

Ou alors, si tu es courageux, modifies directement le code de ton plugin lightbox pour ajuster le style ... (il doit y avoir un fichier CSS associé je suppose) ...

Dans tous les cas :

Mauvais forum

Le sujet est déplacé de la section Javascript vers la section HTML / CSS

-
Edité par Benzouye 3 août 2018 à 17:07:33

Seul on va plus vite, ensemble on va plus loin ... A maîtriser : Conception BDD, MySQL, PHP/MySQL

dom39210

3 août 2018 à 23:59:03

YES

MERCI ET JE ME PENCHE SUR LE CSS POUR LE RESTE