JQuery - Slideshow - centrer une image dynamiquement

Bonjour à tous !

Je débute sous JQuery et mes bases en Javascript sont très fragiles.. C'est pour cela que je viens quérir humblement un peu d'aide de la communauté Alsacréations.

Voici mon problème, j'ai suivi le tutoriel suivant => a simple jquery slideshow. J'arrive à appliquer le code dans ma page sans souci. Ce que je souhaiterais, c'est pouvoir centrer les images de différentes largeurs qui vont être visualisées de manière dynamique et horizontalement. Ceci en utilisant les méthodes classiques CSS de marges négatives :

left: 50%; margin-left: -(largeur de mon image / 2 );

Voici le code que j'essaie d'appliquer : (désolé aux gurus Javascript, ça va leur faire mal aux yeux...)

<!--

function slideSwitch() {
    var $active = $('#fade img.active');

    if ( $active.length == 0 ) $active = $('#fade img:last');

    var $next =  $active.next().length ? $active.next()
        : $('#fade img:first');
        
    $active.addClass('last-active')
	.css({border: "'+$(couleur)+'", margin: "0 0 0 -'+ (this.width())/2 +'"})    
    ;

    $next.css({left: "50%", opacity: "0.0", border: "3px solid #00ffff", margin: "0 0 0 -'+ ($(next).width())/2 +'px"})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

// -->

Comment récupérer la largeur de ma variable $next et la diviser par 2 dynamiquement pour chaque image de mes galeries ?

En vous remerciant tous par avance !
Modifié par Iswal (23 Sep 2008 - 18:32)

big up!

Si quelqu'un peut juste avoir la gentillesse et la patience de m'expliquer comment rendre opérante une variable dans les propriétés CSS en Javascript car là le résultat que j'obtiens semble rester à NULL.. Je crois que je serai sur la bonne voie.. Je me perds dans la documentation officielle JQuery et tout ce que j'essaie en regardant dans divers tutoriaux ne fonctionne pas..

Voilà ce que j'ai essayé de faire en dernier :

var $largeur= 320;	
	
    $next.css({left: "50%", opacity: "0.0", border: "3px solid #00ffff", margin: "0 0 0 -' + largeur +'px"})

merci encore à tous..
Modifié par Iswal (25 Sep 2008 - 16:00)

Bonsoir à tous,

j'ai un petit peu avancé, voici mon code actuel :

<!--

	function slideSwitch() {
 	
    var $active = $('#fade img.active');
    
    if ( $active.length == 0 ) $active = $('#fade img:last');

    var $next =  $active.next().length ? $active.next()
        : $('#fade img:first');
        
    var $largeur= $next.width()/2;
        
    $active.addClass('last-active');   
					
    $next.css("left","50%","margin-left",$largeur + "px")
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

// -->

La variable "largeur" s'applique à présent bien dans les propriétés CSS mon souci c'est que je n'arrive pas à la rendre négative... Plus étrange, si je ne calcule pas la moitié de la largeur et que j'assigne directement une valeur négative, j'ai le même résultat..... Deuxième mauvaise impression, la moitié de la largeur prise en compte semble seulement être celle de la première image de toute la série.... Je n'arrive pas encore bien à raisonner en terme de "dynamisme" en Javascript, comme je peux le faire en PHP...

Bref si quelqu'un peut m'apporter ses lumières ou travaille sur un projet de galerie images centrées (aux dimensions variables) similaire avec JQuery.. Un peu d'entraide ne serait pas de refus..
Modifié par Iswal (02 Oct 2008 - 22:52)

Iswal a écrit :
Ce que je souhaiterais, c'est pouvoir centrer les images de différentes largeurs qui vont être visualisées de manière dynamique et horizontalement. Ceci en utilisant les méthodes classiques CSS de marges négatives

Le centrage horizontal avec le positionnement absolu est, dans 99% des cas, une bêtise à oublier. Méthode classique? Ha ha.

Parmi les possibilités un peu plus censées:
- text-align: center (ben oui...);
- marges automatiques.

La solution exacte à utiliser va dépendre du fonctionnement du script de slideshow. Si le script de slideshow s'amuse à positionner en absolu des éléments IMG, ça va pas super bien marcher. Gag: c'est le cas (du moins sur la page du script). Donc dans l'idéal: bye-bye le script, ou bien on le réécrit ou on l'adapte pour travailler avec des conteneurs pour les images (des SPAN par exemple), que l'on pourra positionner en absolu et dimensionner aux dimensions de la zone de slideshow.

Pour être plus précis, ce script fonctionne ainsi:
1. en CSS, en positionnant en absolu et au même endroit toute une série d'images;
2. en JavaScript, en faisant varier l'opacité des images (donc en modifiant le CSS à la volée).

Il faudrait que ces deux choses s'appliquent à des conteneurs spécifiques à chaque image (tels que des éléments SPAN) plutôt qu'aux images directement.

Hello,

Vérifie que la valeur que tu obtiens avec .width() soit bien un numérique et non pas une valeur avec un "px" suffixé avant de faire ton calcul
Fait un petit alert(largeur) pour vérifier la valeur que tu obtiens, à mon avis le problème vient de là.

De plus, tu ne peux pas utiliser la syntaxe .css(name, value) que pour définir une seule propriété, si tu veux en définir plusieurs, utilise { name : value, name : value}

Et au passage, il est inutile de mettre des $ devant le nom de variables en javascript ^^

Hey merci tous les 2 !

Florent V., j'ai bien pensé en premier à la propriété "text-align".. Comme tu l'as bien expliqué ce n'est pas en corrélation avec la "position: absolute;". Excuse-moi pour le terme de "méthodes classiques" qui t'a bien fait marrer.. Ce n'est pas évident de faire un billet "parfait".. Devant vos yeux experts ! Mea Culpa.. Peu importe, je suis d'accord avec toi.. Là j'ai pris ce script pour me dégrossir avec JQuery, j'avais auparavant travaillé sur le plugin Cycle.. Mais je m'heurte au même problème car idem "position: absolute;" des images présentes dans le conteneur. En tout cas merci pour le temps que tu as passé à me répondre, sympa ! Je vais étudier ton idée de conteneurs "plus spécifiques".

Tymlis, merci à toi aussi ! J'ai testé auparavant avec la propriété "document.write()", ça tourne en boucle, page blanche, avec écrit "320" qui est bien la moitié de ma première image de 640px de large. Mais je vais tout de même réessayer avec "alert()", promis ! Merci pour tes remarques sur la syntaxe .css.. En fait si j'ai enlevé les {} c'est que je n'arrivais à rien en les mettant.. Je sais c'est sûrement que je suis trop fragile en Javascript.. si tu regardes mes 2 premiers posts, je les appliquais bien (le code était tout de même erroné, certes..). En tout cas merci, je les appliquerai à présent tout le temps ! Idem pour les "$", j'avais bien compris que les variables Javascript n'en avaient pas besoin mais j'avais cru à tord que la syntaxe JQuery les acceptait.. sorry again !

Si j'arrive à pondre un truc bien, je le poste direct ici ! Peut être que ça pourra servir à quelqu'un d'autre !

Merci encore pour votre temps les amis, @bientôt ! Longue vie à Alsa et toute l'équipe de Raphaël
Modifié par Iswal (03 Oct 2008 - 18:26)

Iswal a écrit :

Tymlis, merci à toi aussi ! J'ai testé auparavant avec la propriété "document.write()", ça tourne en boucle, page blanche, avec écrit "320" qui est bien la moitié de ma première image de 640px de large. Mais je vais tout de même réessayer avec "alert()", promis !

Si ça marche avec document.write, ça devrait marcher avec alert() aussi, ce n'est donc pas ça le problème ^^

a écrit :
Merci pour tes remarques sur la syntaxe .css.. En fait si j'ai enlevé les {} c'est que je n'arrivais à rien en les mettant.. Je sais c'est sûrement que je suis trop fragile en Javascript.. si tu regardes mes 2 premiers posts, je les appliquais bien (le code était tout de même erroné, certes..).

Pour faire fonctionner la syntaxe sous forme d'objet, une bonne indentation du code peut aider :

$(this).css({
     'left': '50%',
     'margin-left': -largeur+'px'
});

a écrit :
Idem pour les "$", j'avais bien compris que les variables Javascript n'en avaient pas besoin mais j'avais cru à tord que la syntaxe JQuery les acceptait.. sorry again !

La syntaxe jQuery (et javascript à plus forte raison) les accepte tout à fait, le $ est valide comme premier caractere de variable. Ma remarque soulignait juste qu'à l'inverse de PHP elle n'est pas obligatoire.
La fonction $() est par contre une fonction propre à jQuery qui permet d'appliquer d'autres méthodes jQuery sur l'objet (ou les objets) retournées.
Il est assez fréquent de trouver des scripts dont les variables commencent par un $ si elle representent un objet qui a été obtenu par ce biais, pour se "rappeller" qu'on peut lui appliquer les méthodes.
C'est un peu comme la convention de nommage des variables qui fait écrire les objets oFoo, les string sFoo, les int iInt.
Javascript n'étant pas typé, cela peut être utile dans un script pour se rappeller de quel types sont les variables.

Merci Tymlis pour tes précisions ! J'ai bien noté chacune d'elles ! Je retravaille dessus dès que possible. @++