11496 sujets

JavaScript, DOM et API Web HTML5

Mixer les deux galeries AlsacréationSSSSSS

Salut!

il y a deux très bon tutos sur le site:
http://www.alsacreations.com/tuto/lire/557-galerie-photo-javascript.html
http://www.alsacreations.com/tuto/lire/719-galerie-images-simple-jquery.html

J'ai choisis le premier car il y a une légende (c'est en fait son seul intéret), je l'ai personnalisé ici:
http://baptiste-photographies.com/galerie.php?id=20

Mais il y a quelques problèmes:
- parfois la colonne de miniature bug et se met au dessus des grandes images
- chargement long des images

Pour ce dernier problème, il faudrait installer un loader pour montrer au visiteur que ça charge!
Or je n'arrive pas à récupérer le systeme de loading du second tutoriel...
Pourriez vous d'aider svp?

Ou l'autre solution serait de mettre un systeme de légende au second diapo, mais le code est devenu trop compliqué pour que je comprenne...

Merci!

@+
Modifié par Baptiste08 (01 Jun 2010 - 13:34)
Bonjour,

Pour le problème de placement des miniatures, c'est un problème de positionnement CSS à régler... en travaillant ton CSS. Smiley cligne

Pour le problème de chargement long, c'est un problème généralisé sur ce site, et changer de script n'y changera pas grand chose. Quelques sources de ce problème:

1. Tes images sont mal optimisées. Les «grandes» photo font dans les 350ko quand elles devraient faire 50 ou 100ko. Les vignettes font dans les 16ko, ça reste correct mais on peut descendre en dessous de 10ko pour chaque vignette. L'image bienvenue.jpg sur la page d'accueil fait 400ko, alors qu'elle pourrait faire 100ko pour une bonne qualité, et dans les 60ko si on accepte un rendu un peu dégradé.

2. Le code CSS et JavaScript pourrait être optimisé, notamment en combinant les CSS en un seul fichier (c'est jouable ici), en combinant les scripts JS en deux fichiers (une librairie globale avec jQuery + plugins, et un fichier pour ton code), en gérant correctement la mise en cache des ressources (images, css, scripts) et en plaçant les appels de scripts en fin de page plutôt que dans le HEAD (ça bloque le rendu). Je te laisse voire du côté de YSlow et Google Speed pour des outils de test et une checklist de choses qui peuvent être optimisées.

3. Les images de ton header pourraient être chargées dynamiquement. C'est à dire que tu n'en charges qu'une au départ, puis tu attends le chargement complet de la page, et tu charge les autres ensuite (lazy loading). Celles-ci ont l'air à peu près bien optimisées, mais tu peux améliorer encore ça en ne mettant dans les images qui changent que la partie qui change vraiment (les trois photos, pas le cadre et le logo en prime).

4. Enfin, un problème qui fait que ces manques d'optimisation sont TRÈS sensibles c'est le fait que le débit de téléchargement semble très limité. C'est peut-être juste ma connexion, mais ça a l'air limité à 20ko/s, et j'ai fait des essais de chargement où ça commençait à 3-4ko/s pour plafonner à 11ko/s. Pour charger une image de 400ko (qui devrait en faire 100ko maximum...), c'est radical: 40 secondes de chargement ultra-poussif. Un problème avec ton hébergement? Si tu génères certaines images dynamiquement (côté serveur avec un script PHP par exemple), il faut t'assurer que tu stockes bien le résultat sur le serveur et qu'à chaque nouvelle requête tu envoies la version en cache sur le serveur, avec des en-têtes HTTP qui vont bien pour la mise en cache du côté du navigateur; et bien sûr vérifier que ton script est configuré pour un taux de compression satisfaisant.

Savoir si tu utilises le script JavaScript simple du vieux tutoriel ou le script plus élaboré du nouveau tutoriel, à côté de ça, c'est secondaire. Smiley cligne
Modifié par Florent V. (01 Jun 2010 - 14:53)
Salut!
alors point par point:
- j'ai remit toutes mes photos en qualité 70/80: après c'est trop dégradé, et pour un site photo c'est quand même l'essentiel! lol Mais c'est vrai que ça va un peu plus vite
- j'ai combiné quelques css et js ensemble mais je me demande si 2 petits fichiers valent pas mieux que 1 gros?! Et je les ai mit en bas de page (si c'est pas entre des <head> c'est grave? regardez la source), sauf le CSS principal qui est en haut pour avoir le design en premier...
- en fait la bannière répétée c'est pour faire plus simple à "dynamiser en js" ^^Je regarderai ça un peu plus tard! Smiley cligne
- mon hébergeur est 1and1, je ne pense pas qu'il est des problèmes de vitesse Smiley confus

Et sinon pour en revenir à ma première question, comment mettre un systeme de loading à l'ancienne galerie? Car j'arrive pas à mettre une légende au nouveau systeme, ça bug! lol

MERCI en tout cas pour ces bons conseils! Smiley biggrin

@+
Baptiste08 a écrit :
- j'ai combiné quelques css et js ensemble mais je me demande si 2 petits fichiers valent pas mieux que 1 gros?!

Globalement, mieux vaut concaténer les scripts que garder les fichiers séparés. Attention à les concaténer dans le bon ordre (jQuery d'abord, puis les plugins qui utilisent jQuery). Pour le pourquoi du comment c'est mieux, je te laisse potasser YSlow et/ou Google Speed et les recommandations qui y sont données.

Baptiste08 a écrit :
Et je les ai mit en bas de page (si c'est pas entre des <head> c'est grave? regardez la source), sauf le CSS principal qui est en haut pour avoir le design en premier...

Les CSS doivent tous être appelés dans le HEAD, toujours.
Tu pourrais concaténer les trois fichiers suivants:
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
<link href="jScrollPane.css" rel="stylesheet" type="text/css" media="screen" />
<link href="js/zoombox/zoombox.css" rel="stylesheet" type="text/css" media="screen" />

Pour les scripts JS ils sont bien placés, mais tu devrais pouvoir concaténer tous ceux là, à priori dans cet ordre:
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript" src="js/zoombox/zoombox.js"></script> 
<script type="text/javascript" src="js/jquery.panelgallery.js"></script>

(Pour chacun, vérifier qu'on a bien récupéré une version minifiée du script, pour alléger autant que possible.)

Baptiste08 a écrit :
- mon hébergeur est 1and1, je ne pense pas qu'il est des problèmes de vitesse Smiley confus

Ça a l'air de bien tourner là tout de suite. C'était peut-être ma connexion, ou un problème temporaire du réseau ou de l'hébergeur.

Baptiste08 a écrit :
Et sinon pour en revenir à ma première question, comment mettre un systeme de loading à l'ancienne galerie? Car j'arrive pas à mettre une légende au nouveau systeme, ça bug!

Je crois que là tu vas être bloqué. En gros, si tu maitrises en JavaScript, tu peux rajouter au premier script la gestion d'une image de type "loading.gif", ou bien rajouter au deuxième script la gestion d'une légende. Mais si tu n'as pas suffisamment de bases en JavaScript et jQuery pour comprendre le fonctionnement du deuxième tutoriel, tu ne vas pas aller très loin.
La solution, toute simple, consiste à apprendre JavaScript. Smiley smile
(Une autre solution consiste à trouver un autre script, déjà packagé et bien documenté, qui fasse exactement ce que tu souhaites, de sorte que tu n'aies pas besoin de le modifier. Vu que tu utilises déjà jQuery, je te conseille de regarder du côté des plugins jQuery disponibles si c'est la voie que tu prends.)
salut!
j'ai fouillé le forum et j'ai trouvé ça:
http://forum.alsacreations.com/topic-23-43246-1-Galerie-dimages-simple-avec-jquery-Comment-ajouter-des-legendes.html

je l'ai mit en place, voilà ce que ça donnerait:
http://baptiste-photographies.com/essais/
Alors j'ai un problème avec ce loader qui reste tout le temps, et qui se centre pas (le truc en CSS3 ne doit pas marcher... pourtant j'ai FF3)

Enfin bon al présentation me convient à peu près, elle est comme avant, alors je l'adapte à mon site:
http://baptiste-photographies.com/galerie_3.php?id=1

et là gros problème! J'arrive plus à faire comme avant, c'est à dire avec la colonne de miniatures à droite... J'ai essayé tout l'après midi avec des float, des position etc... Rien n'y fait Smiley decu

voilà mon css pour la galerie:


#thumbs{position: absolute; margin: 0 0 0 770px;}
#thumbs{text-align: center; height: 512px; widht: 140px; overflow: scroll; margin: 0; padding: 0 ; list-style: none ;}
#thumbs a:focus {outline: 0}
#thumbs li a img{margin: 2px 20px; border: 1px solid #dcb;}

#viewer{width:760px; height:510px;}  
#viewer img[src*="loader"]{position:absolute; left:50%; top:50%; margin:-15px 0 0 -15px;} 
#thumbs span{display:none;} 
#viewer span {font-style:italic;}


et mon html/php ça donne ça:

<ul id="thumbs"> 

    <li><a href="images/1.jpg" title="titre"><img src="images/min/1.jpg" alt="titre" /><span>Titre</span></a></li>
   <!--(et ainsi de suite)-->

</ul> 
   
<p id="viewer"></p>


Voilà... Je ne comprends pas pourquoi! Ca commence à m'énerver! lol

J'espere que vous pourrez me mettre sur une voie, je désespère!
Merci Smiley cligne

@+
Salut!
j'ai réussis! Mais j'ai du utiliser les box crées en js par JScrollPlane, je sais pas si c'est tip top...
Est ce que quelqu'un pourrait tester sous Ie svp? Car j'ai pas ce navigateur sous mac...
http://baptiste-photographies.com/galerie.php?id=1

Par contre j'ai un sacré problème avec ce loader! J'arrive pas à le désactiver quand il n'a pas besoins de tourner... ! et en plus il ne se centre pas... le sélecteur est peut etre mal utilisé?

++ Smiley cligne
Modifié par Baptiste08 (03 Jun 2010 - 17:48)
Re!
pour le css loader, j'ai pas avancé, mais je vous montre juste le js qui pose ce problème de loader persistant:

  thumbLinks 
    .click(function(e){ 
      e.preventDefault(); 
      var $this = $(this); 
      if (bigPic.attr("src") == $this.attr("href")) return; 
       
      highlight($this); 
      imgViewer.fadeOut(100, function() { 
          imgViewer.children("img").load( function() { 
              imgViewer.find('span').text($this.find('span').text()); 
              imgViewer.fadeIn(100); 
          } ).attr( { src: $this.attr("href"), alt: $this.find('img').attr('alt') } ); 
      } ); 
    });


Celui à été modifié (trouvé ici sur le forum) pour pouvoir passer les légendes. Voilà le js originel du site alsacréation:

  thumbLinks 
    .click(function(e){ 
      e.preventDefault(); 
      var $this = $(this), 
        target = $this.attr("href"); 
      if (bigPic.attr("src") == target) return; 
      highlight($this); 
      imgViewer.html(loader); 
      bigPic 
        .load(function(){ 
          imgViewer.html($(this).fadeIn(250)); 
        }) 
        .attr("src",target); 
    });


@+ !
bonjour,

tu peut simplifier ton sélecteur , puis jouer avec les positionement et z-index:

#bigpic{width:750px; height:510px; float: left;
/* en plus : */position:relative;}
/* ajout */
#bigpic img {z-index:2;position:relative;}
#viewer{text-align: center;}
/* modif selecteur et style */
 img.loader {position:absolute;top:260px;left:380px;z-index:1;}


GC
Pour commencer tu as dans ton code HTML un <p id="viewer">, alors que le script crée le même élément juste après dans le DOM au chargement de la page.

Je rappelle à toutes fins utiles que quand on ne panne rien à JavaScript, ils est préférable, au choix:
- de se contenter de scripts tout prêts, conçus pour être réutilisés et accompagnés d'instructions pour une utilisation facile (un indice: quand une page s'appelle «tutoriel», ça ne veut pas dire «script à utiliser tel quel facilement», ça veut dire «exemple pour apprendre»);
- d'apprendre JavaScript;
- de faire travailler un intégrateur professionnel.

Je me cite (ah, il me semblait bien l'avoir dit...):
Florent V. a écrit :
Une autre solution consiste à trouver un autre script, déjà packagé et bien documenté, qui fasse exactement ce que tu souhaites, de sorte que tu n'aies pas besoin de le modifier. Vu que tu utilises déjà jQuery, je te conseille de regarder du côté des plugins jQuery disponibles si c'est la voie que tu prends.
(Emphases rajoutées.)

Edit: désolé pour le ton, je suis d'humeur bougonne ce soir. Je maintiens sur le fond. Smiley cligne
Modifié par Florent V. (09 Jun 2010 - 21:51)
Salut!

gc-nomade: merci ça me l'a bien centré!

Florent: merci pour ce commentaire très instructif ... Mais je n'ai plus de div viewer depuis quelque temps dans mon code... Alors je vois toujours pas.

@+
Sujet clos
Aller à