Image-flow - dhteumeuleu forums

dhteumeuleu forums / Français / Image-flow

Author	Message
Soisik Member	# Posted: 25 Mar 2008 13:08 Salut Gérard, je me suis régalée avec ce script, c'est pour moi un des plus élégants, des plus raffinés, MAIS tu m'avais habituée aux " div img=" ou bien au "src=" et là j'ai passé 3 heures pour faire le lien entre tes images et ton serveur !!! dis-moi ce que veux-dire " <a rel=" voilà en tout cas un premier essai que je te dédie mais je vais le retravailler car l'ensemble est trop sombre ....et je n'ai pas encore mis de musique, de titre, de texte....bref c'était le week-end des cloches.... Bonne journée et MERCI Soisik http://bogardpeinture.info/script29.2008/index.html
Muriel Member	# Posted: 25 Mar 2008 14:16 Bonjour Gérard J'ai adopté moi aussi ce script J'en ai fait cela : http://www.collectif-chene-vert.org/obs%20oiseaux%20mars/observation_o iseaux_mars.html Je viens de m'apercevoir que je n'avais pas la barre de défilement ! Serait-ce du à la taille des images ? Ou est-ce que j'ai simplement zappé une ligne de code ? Amicalement Muriel
Soisik Member	# Posted: 25 Mar 2008 16:00 Salut Muriel, tu as seulement zappé les 4 images qui constituent la barre et le curseur...(sb.gif, sc.gif, sl et sr.gif) clic droit en bas des images du code source et enregistrer sous, j'y connais pas grand chose en code... c'est sympa les canards ! Soisik
ge1doot	# Posted: 25 Mar 2008 19:35 · Edited by: ge1doot @Soisik: Les images ne sont pas encapsulés dans des balises <img> pour que le script démarre sans attendre, dès la 1ère image disponible. Les autres se positionnent tranquillement à leur place. En réalité, il faudrait faire un petit fichier xml qui contient la référence aux images, titres, textes, hyperliens, et un petit appel AJAX pour lire ce fichier... mais voila, j'aime garder les choses simples pour ces petites démos, le CSS, le HTML et le JS dans un seul et unique fichier. Sinon, tu as raison, je viens de mettre les images dans le href, c'est plus logique. Enfin bref, félicitations à vous deux. Ces scripts ne sont compatibles que pour les forts. A+ Gérard
Lulutruc Member	# Posted: 26 Mar 2008 09:22 Bonjour, Tout d'abord un grand bravo et merci à Gérard, pour ce site superbe. Je voulais également vous faire profiter de 2 petites modifs que j'ai apporté sur le script, sur 2 points qui me chagrinaient quelque peu. - le script n'affichait pas toujours la première photo lorsque je le lançais, j'ai donc ajouté les lignes suivantes dans la fonction ImageFlow(...), juste après la boucle for d'initialisation des diapos, afin qu'il retourne à la 1ere photo après initialisation : this.view = 0; this.calc(); - les points de changement des images sur le drag N drop de la scrollbar ne sont pas idéalement placés (trop à gauche : par exemple avec 2 images, le changement s'opérait à1/3 de la barre), j'ai donc modifié la ligne qui, a priori, calcule ces intervalles : self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF)); devient : self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * (self.NF-1)); A noter que je suis un vrai novice en javascript donc je n'ai pas forcément tout compris au code du script, et donc je ne suis pas certains d'avoir effectué ces modifs aux bons endroits ni que le code soit le plus adéquat. Cependant, ces modifs fonctionnent chez moi, donc pourquoi pas chez les autres... Merci encore et bonne continuation. Lulutruc
dahu Member	# Posted: 26 Mar 2008 11:42 Salut, Perfecto ce script ! magnifique ! une petite modif : Soucis: ca m'allait pas que les images en pied montent par dela le ciel et que les image en paysage soit trop petites (je parle pour des grosses images) donc : a la place de la ligne qui definie 0.wl en dessous de "calculate target sizes & positions" if(o.r<1) o.w1 = Math.min(o.iw, this.wh * 0.8, Math.round(this.ht0.85/o.r)) o.z1; else o.w1 = Math.round(this.ht0.85/o.r) o.z1; attention: 0.85 correspond à la proportion que j'ai donné au flow/reflect
ge1doot	# Posted: 26 Mar 2008 22:37 wow, ça me semble des bonnes idées tout ça! J'ai testé la modif de dahu, et effectivement, c'est bien mieux, je n'étais pas arrivé à résoudre ça. Je regarderai comment intégrer vos modifs ce WE, je suis actuellement en déplacement... Merci, Gérard
dahu Member	# Posted: 27 Mar 2008 09:16 : ) bon ben alors pendant que tu y es, transforme le placement de la ligne du sol en variable d'init. : ))) Et un autre truc qui serait cool (pour moi mais j'ai pas eu le temps de creuser plus) , que les lien dans le "texte" soient viables (<a> dans <a> il aime pas) . J'essaierai de pondre une version Ajax/json ... Chronophage tout ca
chiendent Member	# Posted: 27 Mar 2008 16:43 · Edited by: chiendent Magnifique le site, les scripts et tout. Je pense utiliser ce script très bientôt sur notre site. Pour le moment, je fais un essai en local. Dans cet essai, j'ai intégré pour le moment les modifications signalées par Lulutruc et Dahu . Merveilleux Mais j'envoie toutes mes félicitations à Gérard.
chiendent Member	# Posted: 27 Mar 2008 17:02 J'essaierai de pondre une version Ajax/json ... Chronophage tout ca Certainement, mais tu nous tiendras au courant j'espère
ge1doot	# Posted: 6 Apr 2008 16:31 Bonjour à tous, Je viens d'intégrer toutes ces suggestions : - horizon flow/reflect paramétrable [dahu] - debug de la position de la barre de scroll trop à gauche [lulutruc] - position sur la 1ère image à gauche dès qu'elle est chargée, avant c'était au petit bonheur la chance suivant l'ordre de chargement [lulutruc] - amélioration de l'heuristique pour zoomer au mieux du format d'image et de la taille d'écran dispo [dahu] voilà, si vous voulez une version ajax plutot qu'une référence in-line des images, c'est très facile, mébon, ça c'est plus de l'ordre de l'intégration dans un vrais site que de la démo... A+ merci des super feedbacks Gerard
Denis Member	# Posted: 6 Apr 2008 17:29 Merci Gérard, Cet imageflow sort vraiment du lot. Très fluide, magnifique, très classe. ah, le talent... Il n'y a plus qu'a créer une version 2, type coverflow d'Itunes avec les vignettes en perspective de chaque coté. Je n'ai encore jamais vu ce résultat en js, seulement en flash. http://www.flashloaded.com/flashcomponents/photoflow/example1.html Denis
ge1doot	# Posted: 6 Apr 2008 18:07 raahh... vous voulez ma mort ou quoi En flash, il y a aussi cette version : http://www.arno-box.net/flash/13/flash-effet-coverflow-itunes/ Mébon, c'est possible en JS. Il faudrait utiliser du full canvas et les filtres matrix transform de IE. Un peu tiré par les cheveux, et ça s'éloigne beaucoup du pur JavaScript / DOM que j'essaye de faire. Rien ne vaut le flash, Java ou à la limite Silverlight/WPF pour ça. Avant quelques années, j'ai peur que la fluidité ça ne soit pas au rendez-vous... Peut-être qu'un jour, si les fonctions scale, rotate, skew, sont standardisées en CSS !!! On peut toujours rêver, mais WebKit (le moteur de SAFARI) l'a déjà fait ! Voir ici : http://webkit.org/blog/130/css-transforms/ a+ Gérard
ge1doot	# Posted: 6 Apr 2008 18:09 Pour revenir à ma version plate à moi que j'ai, pour l'instant, à la demande de Boetti, je viens d'implémenter un autoscroll (optionnel). Voir les 2 derniers paramètres, ici réglés à 8 et 4 secondes (approx), temps initial pour démarrer l'autoscroll, et temps interval entre chaque photo. Pour désactiver la fonction, ne pas spécifier les 2 derniers paramètres, ou les mettre à zéro. a+ Gerard
Denis Member	# Posted: 8 Apr 2008 19:31 Bonjour Gérard, Je n'ai pas essayé le scroll sur un portable mais au cas ou, y a t'il un moyen de scroller les images avec les flèches du clavier ? Merci Denis
chiendent Member	# Posted: 9 Apr 2008 04:27 · Edited by: chiendent J'ai eu un problème depuis Dimanche et Lundi pour avoir l'URL http://www.dhteumeuleu.com/ J'avais loading et ça ne se chargeait pas et plantait la session firefox? Bon, maintenant ça va, mais j'ai trouvé ça bizarre. Je viens d'essayer la nouvelle version, merveilleux. Je relooke tout le site et restructure. Dès que c'est en ligne je fais signe.
picassobv Member	# Posted: 30 Jun 2009 16:10 sous IE8 j'ai un refus de connexion sur ajax.open("GET", url, false); dans /* ===== read file ==== */ var AJAX = (function(AJAX){ Donc pas d'image charger
karinemariejeanne Member	# Posted: 8 Sep 2009 20:36 Bonjour et félicitation pour tob script génial! Je voulais te demander si tu as une idée du pourquoi et du comment régler le soucis de IE qui n'accepte pas le script? Tout fonctionne très bien avev FF, mais rien avec IE (même en ayant copier coller ton script à l'identique)
bubbarr Member	# Posted: 18 Oct 2009 17:12 comment creer le fichier XML. quelqu'un peut-il m'aider ?
v112 Member	# Posted: 21 Oct 2009 09:26 Tout d'abord, FELICITATIONS ! Les diapos sont superbes. J'ai le même problème que bubbarr ! Que faut-il faire exactement ? Je n'ai pas eu de problèmes avec d'autres diapos, j'ai réussi à les modifier en fonction de ce que je voulais faire mais là .... je coince 1. Comment créer le fichier xml ? 2. Faut-il créer un répertoire et le renommer en html ? 3. Faut-il uploader par le FTP ? Que de questions mais ... je suis débutante et votre aide me serait précieuse ! Merci par avance !
laurent14 Member	# Posted: 7 Nov 2009 18:48 · Edited by: laurent14 Gérard rectifiera si je me trompe mais vous n'avez plus besoin du fichier xml ! <body> <div id="imageFlow"> <div class="top"></div> <div class="bank"> <!-- inserez vos images ici comme ci-dessous --> <a rel="monimage1.jpg" title="monimage1">mon soustitre1</a> ..... </div> utilisez la feuille de style de Muriel (post plus haut) Tout fonctionne nickel FF3 et IE8 bon courage et encore un gand bravo à Gérard PS : perso j'aimerai que l'image flow démarre en pointant sur l'image du milieu. Quelqu'un aurait-il une idée?

www.dhteumeuleu.com