Un site one-page responsive : Walkthrough – Partie 3, portfolio

Voici la troisième partie des étapes de travail amenant à la réalisation d’un site one page responsive. Pour rappel, la première partie détaillait la navigation et la mobilité, la seconde partie d’une fonctionnalité de mon site one page : une ambiance différente pour chaque section. Cette troisième partie va traiter du portfolio… Cet article peut être pris en stand alone d’ailleurs. C’est parti !

Voir le site de démonstration Fork on GitHub

Partie 1 : Navigation et responsive design
Partie 2 : L'ambiance par section
> Partie 3 : Le portfolio et tri dynamique
Partie 4 : Membres de l'équipe en CSS3

Le portfolio

Bon, sur ce coup là, j’ai un peu l’impression de me renier. J’avais en effet fait un billet sur les filtres à l’aide de jQuery, en insistant sur le fait qu’il n’était pas toujours nécessaire d’utiliser un plugin pour ça. Bon, ok, c’est vrai qu’il y a des trucs vachement sexys su le web. C’est le cas notamment de Isotope. Attention toutefois, ce plugin ne sert que pour le tri, il ne va pas faire le boulot à votre place pour le coté responsive!

L’objectif est d’arriver à faire comme sur la démo, à savoir d’avoir au clic sur un filtre quelque chose comme ça :

filtre

Le code HTML

Le code HTML est plutot simple : un titre, des filtres et mes éléments :

<section id="section3">
  <h1>Portfolio<h2>
  <h2>And we do what we do</h2>
  <hr />
  <nav id="filter" data-option-key="filter">
    <a data-filter=".tous" >Tous</a> |
    <a data-filter=".alimentation">Alimentation</a> |
    <a data-filter=".automoto">Auto-Moto</a> |
  </nav>
  <ul id="elements">
    <li>
      <figure>
        <img src="images/portfolio/medium/1.jpg" alt="img01">
        <figcaption>
          <h3>Buick</h3>
          <span>Auto-Moto</span>
          <a href="images/portfolio/large/1.jpg">Look closer</a>
        </figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="images/portfolio/medium/2.jpg" alt="img01">
        <figcaption>
          <h3>Coca Cola</h3>
          <span>Alimentation</span>
          <a href="images/portfolio/large/2.jpg">Look closer</a>
        </figcaption>
      </figure>
    </li>
  </ul>
</section>

Si je résume, on note 2-3 choses :

  • Les attributs de <nav> : id= »filter » et data-option-key= »filter »
  • Les attributs des liens à l’intérieur de nav, qui sont des références à des classes
  • L’id du <ul> qui va contenir les éléments <li> du portfolio, c’est à dire nos boites : elements
  • Les classes des éléments <li> du portfolio, chacun ayant au moins « .tous » en plus du reste.

Ce qui est à l’intérieur du <li>, c’est de la déco. Nous y reviendront plus tard car ce qu’on filtre ce n’est pas le contenu des boites, mais les boites elles-même.

Coté Javascript

Jusqu’à présent, on peut constater que :

  • J’ai de quoi identifier mon <nav> qui contient des liens
  • J’ai des liens dans un <nav>, et ils portent des références à des classes
  • J’ai de quoi identifier ma liste <ul> qui contient mes <li>
  • Je retrouve les classes des liens du <nav> dans les <li>

Du coup je commence à me dire que mon <nav> va peut être me servir à cibler les éléments du <ul> que je voir apparaitre, et que ne vont apparaitre que ceux qui ont la classe correspondant à ce qui est contenu dans l’attribut data-filter du lien du <nav>. Et ben by Jove j’ai raison !

bandmortimer

On va maintenant jeter un oeil au code javascipt :

var $elements = $('#elements');
// Je stocke le <ul> qui contient les éléments du portfolio dans une variable
// en ciblant à l'aide de son id : cela va servir à initialiser isotope
$elements.isotope({
	// j'initialise isotope sur la liste <ul>
	// Option : Aucune, ici
});
$elements.isotope({ filter: '.tous' });
// Je filtre par défaut sur "tout"
// filter items when filter link is clicked
$('.portfolio nav a').click(function(){
// Au clic sur un lien du <nav>
	var selector = $(this).attr('data-filter');
	// Définition du sélecteur :
	// le contenu de l'attribut data-filter du lien sur lequel on vient de cliquer
	$elements.isotope({ filter: selector });
	// Filtre des <li> qui correspondent au data-filter du lien cliqué
	$('.portfolio nav a').removeClass('current');
	$(this).addClass('current');
	//Esthétique : j'attribue une classe .current au lien/filtre cliqué
	return false;
});

Là encore, comme pour les autres partie de ce long tutoriel / walkthrough, je tire partie du coté explicite de jQuery. Juste au cas où j’ai ajouté pas mal de commentaires 🙂

Un peu de CSS

Pour cette partie, je vais d’abord expliquer un peu le fonctionnement que j’ai adopté pour le survol, inspiré un peu de ce que j’ai vu ci et là sur la toile.

Prenons le code HTML d’un élément du potfolio :

<li>
<figure>
<img src="images/portfolio/medium/1.jpg" alt="img01">
<figcaption>
<h3>Buick</h3>
<span>Auto-Moto</span>
<a href="images/portfolio/large/1.jpg">Look closer</a>
</figcaption>
</figure>
</li>

Ce qui va nous intéresser, ce sont les éléments :

  • figure, qui contient le tout
  • img, qui contient l’image
  • figcapion, qui contient la description et un lien

Mais comme rien ne remplace un bon crobard voici un petit schéma :

schema-portfolio

On n’aura « plus qu’à » utiliser les transitions CSS3 pour avoir une jolie animation au survol et arriver à ceci :

exempleportfolio

J’ai hésité à coller le CSS complet ici, mais comme pour le plus gros il s’agit de code récupéré sur le site de isotope je n’ai pas envie de mettre quelque chose de pas forcément utile et qui plus est au kilomètre (154 lignes)… Du coup pourplus de détail je me contenterais de vous renvoyer à la feuille de style de l’exemple : http://patrickroux.ca/work/responsive/css/default.css, à la partie $INDEX8 – PORTFOLIO.

C’est la fin de cette troisième partie. Les prochaines parties parleront de la présentation des membres de l’équipe, ainsi que du formulaire de contact. Et à la semaine ! Prochaine !

thats-all-folks

7 commentaires

  1. J’ai honte …. je travaillais sur l’une des copies de mon portfolio mais j’appelais l’autre … 3h après .
    Tout est bien qui fini bien !!
    Merci quand même 🙂

  2. Bonjour,

    Tout d’abord merci pour ce tutoriel qui est super !
    Cependant je rencontre un problème, lorsque j’essaie de mettre une image en fond d’écran du body, l’image ne s’affiche pas, mais quand je teste avec une couleur ça fonctionne…
    Je suis perdue!

    Cordialement 🙂

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *