11521 sujets

JavaScript, DOM et API Web HTML5

Comment Modifier une partie de l'url de backrgound-image (javascript)

Pour Flickr, pour avoir une image plus grande.
Je veux modifier toutes les images .context-thumb dont l'attribut "style" background-image: ur(...) finit par:
_t.jpg ou _s.jpg
par celui-ci:
_z.jpg
Exemple de code a modifier:
<a class="context-thumb emptyImage no-outline" href="/photos/28634079@N08/10472240346/in/pool-portrait_faces_open_minded_/" data-track="contextSliderNextPhotoClick" style="background-image: url(//jubilee-live.flickr.com/3736/10472240346_1062884eef_t.jpg); left: -65px" data-photo-id="10472240346" title="00019186000422344_c" tabindex="-1"> </a>

merci
ben je suis tout neuf.
Je commence par modifier des bouts de code, mais pas toujours avec de bons résultats.
J'ai testé ça, mais cela ne marche pas:

$(function () {

	$( 'context-thumb' ).each( function (i) {
		function() {
				$('context-thumb').attr(
					'style',
					$( this ).attr('style').replace('_t.jpg', '_z.jpg') // Replace the template part in the style image background
				);
			}
});


Si cela peut aider voici le lien de la photo (les images à modifier sont dans le mini thumbnail sous la photo principale.
https://www.flickr.com/photos/92347281@N02/10548837784/in/pool-portrait_faces_open_minded_|92347281@N02
Modifié par decembre (11 Sep 2019 - 15:55)
Modérateur
Ok tu utilise Jquery. Bah tu avais le bon raisonnement ! C'est cool ! il manque juste un peu de pratique dans l'utilisation des fonction etc. Je dirais que ça doit ressembler à ça : 

$('.context-thumb').each(function() {
    var url = $(this).css('background-image');
    var newurl = url.replace('_t.jpg', '_z.jpg');
    $(this).css('background-image', newurl);
});

https://jsfiddle.net/undless/utqpf8g1/

Pour chaque élément avec la classe ".context-thumb" (ne pas oublier le point dans le sélecteur) on éxecute une fonction.
Dans cette fonction on récupère la valeur du background-image dans une variable.
On change la partie du texte qui nous interesse.
On remet la nouvelle url dans le background image.
Modifié par _laurent (11 Sep 2019 - 16:06)
Merci pour l'aide!
Bon, je suis sur la bonne voie :
C'est encourageant.
Pour la pratique c'est évident, je ne comprend pas tres bien la structure pour écrire du JavaScript.
je me débrouille pas mal avec CSS, mais JavaScript, ben...

J'ai testé ta proposition, mais cela ne marche pas.
Peut-être la structure de mon script ?:

// ==UserScript==
// @name        Flickr - TEST - Photo page Mini Thumbnail enlarge v.1 - NOT work
// @namespace   decembre
// @description Photo page : enlarge mini thumbnail style image background
// @include      https://www.flickr.com/photos/*
 
// @version     1
// @grant       none
// ==/UserScript==
/*
// FROM:  https://forum.alsacreations.com/topic-5-85617-1-Comment-Modifier-une-partie-de-lurl-de-backrgound-image-javascript.html
 
// 
*/


$('.context-thumb').each(function() {
    var url = $(this).css('background-image');
    var newurl = url.replace('_t.jpg', '_z.jpg');
    $(this).css('background-image', newurl);
});


J'ai testé dans Waterfox (greasemonkey) et Chrome (TamperMonkey).
Dans Chrome, TamperMonkey signale 3 erreurs:
$ "is not defined"

Modifié par decembre (11 Sep 2019 - 16:29)
Modérateur
Ah ! Mais c'est du JQuery ce que tu m'a donné et ce que je t'ai fais. Mais si tu n'a pas importé JQuery c'est normal. C'est pas du Javascript natif quoi..

Tu peux ajouter JQuery en rajoutant :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

dans ton header ou ne téléchargeant les fichiers ici https://jquery.com/download/ et en les incluant en local :
<script src="pathtojquery/jquery.min.js"></script>


Et ensuite mettre ton code JS quelquepart.
$(function() {
$('.context-thumb').each(function() {
    var url = $(this).css('background-image');
    var newurl = url.replace('_t.jpg', '_z.jpg');
    $(this).css('background-image', newurl);
});
});


d'ailleurs tu le colles ou ce code ?


Sinon il faut refaire la meme fonction mais en Javascript natif.
Modérateur
Premier fois que j'entend parler des userscripts,
En Js pur ca donne :

var list = document.getElementsByClassName("context-thumb");
for (var i = 0; i < list.length; i++) {
  var url = list[i].style.backgroundImage;
  var newurl = url.replace('_t.jpg', '_z.jpg');
  list[i].style.backgroundImage = newurl;
}
Meilleure solution
C'est bien les userscripts!
Cela permet d'ajouter des fonctions aux pages (comme celle-ci...).
Voir les scripts sur GreasyFork.org:
Greasy Fork

Bon, pour ton code merci:
Ta 2éme version marche très bien.... mais qu'avec l'Ardoise Javascript.
C'est la première fois que je utilise cet outil avec succès!

Problème, quand je colle dans mon userscript:
nada !
Mais bon, la solution ne doit pas être très loin.

Ps:
Ta première version ne marche pas avec l'ardoise javascript...[/b]
Modifié par decembre (12 Sep 2019 - 13:46)
Modérateur
Bah c'est juste une script Js comme on utiliserait sur une site. Je ne peut pas t'aider plus loin je ne connais pas du tout les userscript, ce qu'il est possible de faire, si il y a JQuery, comment l'utiliser, s'il ya des limitation etc.... désolé Smiley ohwell

Bonne continuation !
Merci de ton aide.
Je vais voir comment implémenter correctement ton code dans un userscript.
Cela ne doit pas être trop compliqué maintenant que tu as fais tout le boulot:
Smiley cligne
Mais avant de se quitter, une dernière demande:
J'ai besoin aussi de changer les deux:
_t.jpg ET _s.jpg
en:
_z.jpg ....
Modifié par decembre (12 Sep 2019 - 14:04)
Ben, j'ai encore à apprendre.
C'est bien du regex?
\ pour escape
|_s pour joindre ?
Mais pourquoi il n'y a pas besoin de ' pour la premiére partie de replace dans:
var newurl = url.replace(
/_t\.jpg|_s\.jpg/g
, '_z.jpg');
Alors qu'il y en a dans:
var newurl = url.replace('_t.jpg', '_z.jpg');

Pour l'instant, j'ai fais une version bookmarklet de ton code (re-edit avec la derniére version) :
javascript:{var%20list%20=%20document.getElementsByClassName("context-thumb");%20for%20(var%20i%20=%200;%20i%20<%20list.length;%20i++)%20{%20%20%20var%20url%20=%20list[i].style.backgroundImage;%20var%20newurl%20=%20url.replace(/_t\.jpg|_s\.jpg/g,%20'_z.jpg');%20%20%20list[i].style.backgroundImage%20=%20newurl;%20};t()}}

Cela marche !
Merci de ta patience...
Modifié par decembre (12 Sep 2019 - 15:18)
Modérateur
decembre a écrit :
C'est bien du regex?

Yes Smiley smile

Si tu regarde la doc de replace : https://www.w3schools.com/jsref/jsref_replace.asp tu peux lui donner une valeur ou bien une regex.
Ici comme on veut coller a deux cas c'est plus pratique de lui coller une regex.

On aurait très bien pu faire les deux replace avec un string à la suite :
  var newurl;
  newurl = url.replace('_t.jpg', '_z.jpg');
  newurl = newurl.replace('_s.jpg', '_z.jpg');

Mais ça prend un peu plus de place.


decembre a écrit :
\ pour escape
oui
decembre a écrit :
|_s pour joindre ?
juste le pipe pour faire un OU (comme dans beaucoup de langages).
decembre a écrit :
Mais pourquoi il n'y a pas besoin de ' pour la premiére partie de replace dans:
var newurl = url.replace(
/_t\.jpg|_s\.jpg/g
, '_z.jpg');
Alors qu'il y en a dans:
var newurl = url.replace('_t.jpg', '_z.jpg');

Entre quote c'est un string. La c'est une regex. Si tu la met entre quote cela sera interprété comme du texte et donc pas exécuté. Comme quand tu colles une variable, tu ne la mets pas entre quote ! Smiley smile

decembre a écrit :
Cela marche !
Smiley biggthumpup

Bonne continuation
J'ai Re testé la version JQuery que tu m'a proposée :
Finalement elle marche aussi dans avec l" Ardoise Javascript"!
Je ne sait pas pourquoi elle n'a pas marché la première fois.

Mais cela m'a donné l'occasion de noter que la fonction ne s'applique qu'aux images déjà chargées.
Aussi, quand elles continuent de se charger dans la page, elles ne sont pas touchées par le script.

Comment faire pour continuer a appliquer la fonction sur les nouvelles images ?
Modifié par decembre (13 Sep 2019 - 19:22)
Modérateur
Lancer le script a intervalle régulier... mais c'est pas spécialement joli...
Sinon détecter un nouveau chargement... mais ça je sais pas comment faire...
Sujet clos
Aller à