Solutions pour construire une rotation d'image

7,075 Posts

davidm Reply #21, 20 years ago

Quote from: Perrine at Sep 14, 2006, 09:35 AM

Effectivement, c’est très sympa de juste avoir à passer le curseur ! Est-il possible de précharger les images ? Parce qu’il se passe un certain temps avant d’avoir l’image affichée lorsque l’on passe le curseur pour la première fois.

Oui c’est un effet CSS popularisé par Eric Meyer et qui fait son effet

Pour ceux que ça intéresse :
http://meyerweb.com/eric/css/edge/popups/demo2.html

Pour le préchargement d’image, c’est faisable avec CSS, voir le code source de mon blog tongue

<div class="prechargement">
<img src="http://david-molliere.net/themes/site_themes/default/bg_h1.jpg" alt="fond d'écran"/>
<img src="http://david-molliere.net/themes/site_themes/default/image.jpg" alt="photo"/>
<img src="http://david-molliere.net/themes/site_themes/default/entete.jpg" alt="logo"/>
<img src="http://david-molliere.net/themes/site_themes/default/blogueries_link.jpg" alt="lien blog"/>
<img src="http://david-molliere.net/themes/site_themes/default/blogueries_active.jpg"  alt="lien blog actif"/>
<img src="http://david-molliere.net/themes/site_themes/default/photoblog_link.jpg"  alt="lien galerie"/>
<img src="http://david-molliere.net/themes/site_themes/default/photoblog_active.jpg"  alt="lien galerie actif"/>
<img src="http://david-molliere.net/themes/site_themes/default/webdesign_link.jpg"  alt="lien webdesign"/>
<img src="http://david-molliere.net/themes/site_themes/default/webdesign_active.jpg"  alt="lien webdesign actif"/>
<img src="http://david-molliere.net/themes/site_themes/default/cms_link.jpg"  alt="lien cms"/>
<img src="http://david-molliere.net/themes/site_themes/default/cms_active.jpg"  alt="lien cms actif"/>
</div>

et dans la css 

.prechargement {display: none;}

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

826 Posts

marc Reply #22, 20 years ago

@heliotrope :
C’est exactement ma façon de penser et l’évolution que je vois pour ce snippet.

La première étape consiste à gérer les galleries via le manager et non comme actuellement via les pages du site.
Ce qui remettra en cause certains choix notamment la gestions des images.
Si tu regarde le code de cette version beta, tu remarquera beaucoup de changement :
- l’introduction d’une classe
- l’introduction de la séparation de la présentation du code

@david :
Je ne sais plus qui est à l’origine du code js. J’ai récupéré un source sur le forum d’Alsacréation et adapté pour les besoins du composant.
Interressant l’idée de précharger les images. Je n’y pense pas à le faire.

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

2,542 Posts

heliotrope Reply #23, 20 years ago

C’est une excellente nouvelle.
Concernant la version en cours de dev, je l’ai téléchargé sur le SVN mais j’obtenais une erreur avec le chargement de la classe.
Par manque de temps, je n’ai pas cherché à corriger. Je préfére attendre la version officielle.

:-)

Made with MODx : [url=http://www.copadel.com]copadel, fruits et l

7,075 Posts

davidm Reply #24, 20 years ago

Quote from: Marc at Sep 14, 2006, 10:21 AM

@david :Je ne sais plus qui est à l’origine du code js. J’ai récupéré un source sur le forum d’Alsacréation et adapté pour les besoins du composant. Interressant l’idée de précharger les images. Je n’y pense pas à le faire.

Code js ? Pas sûr de comprendre huh

tu veux parler de http://www.formassembly.com/wForms/ ?

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

826 Posts

marc Reply #25, 20 years ago

La version sur le SVN n’est pas celle que j’ai installée.
Elle a été modifié par Doze à partir des changements que j’ai effectué et j’ai remarqué qu’elle ne fonctionne plus correctement.
Doze m’a demandé de regarder le code.
Si tu veux la version que j’ai, envoie moi un PS

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

2,542 Posts

heliotrope Reply #26, 20 years ago

@marc: je suis un peu charette pour l’instant mais je range ta proposition dans ma todo-list.

@davidm:
sympa: wForms je ne connaissais pas.
Peut-être faudrait il ajouter les liens de ce sujet dans les ressources.

:-)

Made with MODx : [url=http://www.copadel.com]copadel, fruits et l

826 Posts

marc Reply #27, 20 years ago

Quote from: davidm at Sep 14, 2006, 10:50 AM

Quote from: Marc at Sep 14, 2006, 10:21 AM
@david :Je ne sais plus qui est à l’origine du code js. J’ai récupéré un source sur le forum d’Alsacréation et adapté pour les besoins du composant. Interressant l’idée de précharger les images. Je n’y pense pas à le faire.

Code js ? Pas sûr de comprendre
tu veux parler de http://www.formassembly.com/wForms/ ?

@David :
Pour la galerie, c’est sur le forum d’Alsacréation que j’ai trouvé les sources avec l’exemple de la galerie qui y est attaché.

Pour formassembly.com : cela fait partie de mes marques-pages wink

@Heliotrope :
Je laisse le code à ta dispo. Cela est valable pour tout le monde d’ailleurs.

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

7,075 Posts

davidm Reply #28, 20 years ago

Ok merci c’est intéressant comme technique...

Sinon sur le site Mac Immobilier tu as un souci avec la sidebar à gauche (à la fin de ta sidebar, tu as un carré blanc -> le motif n’est pas répété jusqu’en bas), je pense qu’il faudrait changer

#sidebar {
position:fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
width: 260px;
height: 100%;
overflow:auto;
background: white url(img/colonnedroite.png) no-repeat top left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border: 0px none;
/*border: 1px solid yellow;*/
}

en

#sidebar {
position:fixed;
top: 0px;
left: 0px;
margin: 0px;
padding: 0px;
width: 260px;
height: 100%;
overflow:auto;
background: url(img/colonnedroite.png) repeat-y top left;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
border: 0px none;
/*border: 1px solid yellow;*/
}

Afin que l’image soit répétée suffisamment en hauteur... idem pour #sidebar_Accueil

.: COO - Commerce Guys - Community Driven Innovation :.

MODx est l'outil id

826 Posts

marc Reply #29, 20 years ago

Merci David, je ne l’avais pas remarqué. wink

C’est corrigé.

Marc
I'm French... Sorry for my bad English, I use ' Google Translator' or other... but that remains that tools wink

1,842 Posts

Perrine Reply #30, 20 years ago

Les effets de mooshow me plaisent vraiment beaucoup mais je n’arrive pas à l’intégrer dans ma page... elle reste blanche malgré que les appels d’images soient bons et tout et tout... J’ai testé de ne pas mettre en cache le doc, mais aucun résultat...

Est-ce que quelqu’un a déjà tenté d’intégrer une librairie comme celle-ci non initialement prévue pour MODx ?
Peut-être qu’il y un conflit avec une fonction dans MODx mais je ne sais pas où. Je n’utilise pas le php de mooshow et la liste d’images à afficher est générée par mes menottes en js, comme indiqué dans la doc.

Le but de ce post n’est pas de vous demander de vous y pencher hein... juste au cas où quelqu’un aurait fait la manip’, je suis preneuse de solution, sinon je continue à creuser wink

Edit : Ok, je crois que j’ai un début de réponse ici : quelques incompatibilités entre les librairies js pourraient peut-être poser ce problème :/