jquery + cycle -> affecte mon texte

fredmac75

fredmac75

Membre expert
Club iGen
14 Juillet 2003
1 416
127
54
Le Mans
www.km-spirit.com
Bonjour,

j'ai un petit soucis avec la page d'accueil de mon site web quatuorprod. Je viens d'installer le plug-in cycle pour jquery. Tous se passe bien, si ce n'est un comportement bizarre du texte adjacent sur Firefox.

Il me semble que le fade de mes images "touche" également et partiellement le texte adjacent au slideshow. Sur les autres navigateurs (Ie, Safari, Opéra), je ne recontre pas ce problème.

Ceci est d'autant plus étonnant que la page de jquery + cycle sous Firefox ne produit pas cet "effet indésirable".

Aurais-je oublié un détail ?

Merci pour vos pistes de réflexion. ;)
 
  • J’aime
Réactions: p4bl0
fredmac75 a dit:
Il me semble que le fade de mes images "touche" également et partiellement le texte adjacent au slideshow. Sur les autres navigateurs (Ie, Safari, Opéra), je ne recontre pas ce problème.
Cliquez pour agrandir...

J'ai testé depuis chez moi…*le slide passe impeccablement et sans affecter le texte :confused:
 
À propos, je vois que tu as mis ton bout de javascript à la fin du body. Avec jquery ce n'est pas nécessaire, tu peux mettre tes javascript dans le head, il faut juste indiqué de les charger quand le DOM est prêt, comme ceci :

Bloc de code: 
$(document).ready(function () {
 $('#slideshow').cycle({ 
    fx:    'fade', 
    speed:  3000 
 });
});
;)

Et tu as pris la mauvaise version du fichier jquery (uncompressed). ;)
 
gloup gloup a dit:
Bloc de code: 
$(document).ready(function () {
 $('#slideshow').cycle({ 
    fx:    'fade', 
    speed:  3000 
 });
});
;)
Cliquez pour agrandir...

Comme je ne suis pas formé à javascript, je me permets une question :

si sur une même page on souhaite créer plusieurs "slides" avec des paramètres spécifiques peut-on écrire ça ?

Bloc de code: 
$(document).ready(function () {
 $('#slide', '#slide2').cycle({ 
    fx:    'fade', 
    speed:  3000 
 });

 $('#slide3', '#slide4').cycle({ 
    fx:    'fade', 
    speed:  4000 
 }
});

le séparateur virgule "," est-il approprié pour séparer les éléments sur lesquels s'applique un même effet avec les même paramètres ?

merci d'avance.
 
da capo a dit:
Comme je ne suis pas formé à javascript,
Cliquez pour agrandir...

Moi non plus... ;)

da capo a dit:
je me permets une question :

si sur une même page on souhaite créer plusieurs "slides" avec des paramètres spécifiques peut-on écrire ça ?

Bloc de code: 
$(document).ready(function () {
 $('#slide', '#slide2').cycle({ 
    fx:    'fade', 
    speed:  3000 
 });

 $('#slide3', '#slide4').cycle({ 
    fx:    'fade', 
    speed:  4000 
 }
});
le séparateur virgule "," est-il approprié pour séparer les éléments sur lesquels s'applique un même effet avec les même paramètres ?

merci d'avance.
Cliquez pour agrandir...

J'utiliserais plutôt des classes pour les sélecteurs (comme les css), du genre :

Bloc de code: 
$(document).ready(function () {
 $('div.slideType1').cycle({ 
    fx:    'fade', 
    speed:  3000 
 });

 $('div.slideType2').cycle({ 
    fx:    'fade', 
    speed:  4000 
 }
});
Avec comme code html :

Bloc de code: 
<div class="slideType1"> 
    <img src="images/beach1.jpg" width="200" height="200" /> 
    <img src="images/beach2.jpg" width="200" height="200" /> 
    <img src="images/beach3.jpg" width="200" height="200" /> 
</div> 

<div class="slideType1"> 
    <img src="images/beach4.jpg" width="200" height="200" /> 
    <img src="images/beach5.jpg" width="200" height="200" /> 
    <img src="images/beach6.jpg" width="200" height="200" /> 
</div> 

<div class="slideType2"> 
    <img src="images/beach7.jpg" width="200" height="200" /> 
    <img src="images/beach8.jpg" width="200" height="200" /> 
    <img src="images/beach9.jpg" width="200" height="200" /> 
</div>
À tester... ;) Je ne suis pas trop sûr du résultat, il faudra peut-être un each dans le code js. ;)
 
gloup gloup a dit:
Vu sur le forum alsa : un cours pour débutant en javascript/dom.

Sinon la doc de jquery est très très bien foutue avec à chaque fois des exemple pratiques et des démos. Même si on ne sait pas programmer en javascript, on arrive à faire de belles choses avec jquery.
;)
Cliquez pour agrandir...

Oui, oui ;)
J'ai regardé attentivement les exemples fournis.
Mais il faudra que je me mette quand même à l'étude de javascript.

En tout cas, jquery est une bien belle boite à outils. Le tout étant de ne pas tomber dans l'anecdotique et de ne s'en servir que si cela apporte une réelle plus value.
 
da capo a dit:
Le tout étant de ne pas tomber dans l'anecdotique et de ne s'en servir que si cela apporte une réelle plus value.
Cliquez pour agrandir...

Oui. Sans oublier que le site web doit fonctionner javascript désactivé et aussi résister à la tentation de mettre des plugins partout pour ne pas alourdir les pages. ;)
 
La S-O-L-U-T-I-O-N

il suffit de modifier la valeur d'opacité. La valeur initiale est commentée. La valeur modifiée est immédiatement en dessous.

Bloc de code: 
$.fn.cycle.transitions = {
    fade: function($cont, $slides, opts) {
        $slides.not(':eq('+opts.startingSlide+')').css('opacity',0);
        opts.before.push(function() { $(this).show() });
        //opts.animIn    = { opacity: 1 };
        opts.animIn    = { opacity: 0.9999 };
        opts.animOut   = { opacity: 0 };
        opts.cssAfter  = { display: 'none' };
    }
};
 
:affraid: Ah ouais! Ben c'est bon à savoir, même si c'est bizarre que ça se produise chez certaines personnes et pas d'autres. :confused:

Y aurait-il un lien avec le système (tiger, leopard)?
 
gloup gloup a dit:
:affraid: Ah ouais! Ben c'est bon à savoir, même si c'est bizarre que ça se produise chez certaines personnes et pas d'autres. :confused:

Y aurait-il un lien avec le système (tiger, leopard)?
Cliquez pour agrandir...

Soit FF fait appel à des composants d'affichage graphique d'OS X, auquel cas le système est co-responsable.
Soit FF gère seul l'affichage et est "full" responsable du bug.

Mais rassurons-nous, La v3 beta de FF est exempt de ce bug.
 
Haut Bas