Changer le src d'une image pour la version en haute résolution

Bonjour,

Je vais réaliser avec jquery et le le plugin cycle une fonction diaporama (comme celle-ci). Voici une galerie photo pour l'exemple.

Pour tout ce qui est la mise en place des modules et de la manière dont ça doit fonctionner, ça devrait aller. Là où je coince c'est sur les fonctions de manipulations de chaînes de caractère. En effet dans ma page galerie, les sources des fichiers images sont du type :

http://lombre.net/dotclear2/public/galeries/Paris2003/.arc-de-triomphe-carroussel_t.jpg

Or, j'ai absolument besoin de transformer les src vers l'image en haute résolution avant de lancer le slideshow avec une source du type :

http://lombre.net/dotclear2/public/galeries/Paris2003/arc-de-triomphe-carroussel.jpg

Il faut donc enlever le point en début de fichier et le underscore+lettre à la fin. Comme je débute en javascript, je ne connais pas la méthode la plus universelle possible pour changer la chaîne de caractère du src. Dois-je utiliser les expressions rationnelles? Et si oui, pourriez-vous me donner un code efficace?

Merci d'avance.

Patidou
Modifié par Patidou (21 May 2008 - 13:48)

Salut,

oui il me semble qu'utiliser les expressions régulières est une bonne idée. Je ne suis pas un expert de ces petites bêbetes mais peut-etre avec ce motif :

^(.*/)\.(.*)_t(\.jpg)$

ou (si les images ne sont pas toutes en jpeg) :

^(.*/)\.(.*)_t(\..{3,4})$

à remplacer par :

$1$2$3

Peut etre une ame charitable voudra bien mettre tout ça en javascript et améliorer le motif initial...

Tes images sont toutes en jpeg?

Oui normalement elles seront toutes en jpg...

Merci.
Modifié par Patidou (21 May 2008 - 14:43)

J'ai un problème avec l'expression régulière, firebug me signale une erreur :

$(document).ready( function () {
    // On ajoute la classe 
	//pour changer l'apparence de la page et styler les nouveaux éléments
	$("html").addClass("dcgalssruning");

    $("div.gallery-thumbnails img").each( function () {
		modele = /^(.*/)\.(.*)_t(\..{3,4})$/;
        	var Texte = $(this).attr("src");
		var modif = Texte.replace(modele,"$1$2$3");
		alert(modif);
    } ) ;


} ) ;

Modifié par Patidou (22 May 2008 - 15:02)

Oups en effet, désolé, c'est parce que j'ai l'habitude d'ecrire mes regexp entre quotes avec php et pas entre slashes. Du coup il faut échapper le slash en plein milieu qui lui désigne le caractère slash...

en remplaçant :

/^(.*/)\.(.*)_t(\..{3,4})$/

par :

/^(.*\/)\.(.*)_t(\..{3,4})$/

Ca devrait aller mieux... tiens moi au courant si ça fonctionne ou pas... ce serait bien la première fois que j'ecris une regexp qui marche sans la tester

Youpie! Ça marche! Merci!

Je mettrai le résultat final une fois tout terminé.


Et dire qu'il va falloir rajouter les points et le _t5 avec la sortie du diaporama...

Voilà le premier jet, le code n'est pas très optimisé mais ça fonctionne… Ce code s'utilise avec le plugin gallery de dotclear2. Quand on arrive sur une page de galerie avec les photos miniatures, le diaporama se lance, change le design avec l'ajout d'une classe sur l'élément html et générère le code html qui va bien pour le plugin cycle. J'ai ajouté un bouton pour arrêter et reprendre le diaporama. Je ferai un tuto sur mon site pour l'installation.

Prochaines évolutions (si j'y arrive) : un code js meilleur et une intégration sous forme de plugin pour DC2 (kofkof).

Encore merci à tous.

P.S. : je ne met pas encore le sujet en résolu, si vous avez des idées pour optimiser le code JS…
Modifié par Patidou (22 May 2008 - 23:56)