Weedle » jQuery http://www.weedle.fr Un blog utilisant WordPress Sat, 14 Aug 2010 10:00:50 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 EasySlider : un plugin jQuery pour réaliser des diaporamas http://www.weedle.fr/easyslider-plugin-jquery-diaporamas/ http://www.weedle.fr/easyslider-plugin-jquery-diaporamas/#comments Wed, 24 Mar 2010 16:00:35 +0000 Fred http://www.weedle.fr/?p=2841 Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

]]> Depuis un moment déjà, le web a pris une toute nouvelle tournure. Les sites internet ont changé de visage, deviennent des webwares et l’interactivité est désormais une priorité pour tous les webmestres. Oui et ce changement s’est en grande partie fait grâce à l’avènement des nouvelles techniques de et de certaines librairies comme le . Pour continuer sur notre lancée, nous allons aujourd’hui nous intéresser à EasySlider, un plugin pour réaliser de chouettes diaporamas.

1. Développer moins pour gagner plus

La plupart des développeurs vous diront qu’il faut tout coder soi-même, quitte à passer des nuits blanches devant son Notepad++. En ce qui me concerne, je pars du principe qu’il ne sert à rien de réinventer la roue et qu’il est préférable d’utiliser une solution fiable et éprouvée plutôt que de se risquer à coder un script tout seul dans son coin tard la nuit.

Cela dit, je ne suis plus webdesigner que développeur, hein…

A l’époque où j’ai souhaité intégré un diaporama sur Weedle, je me suis beaucoup renseigné sur le sujet. Développer un script de ce genre n’est pas difficile en soi. Ce qui est plus délicat, c’est de faire en sorte qu’il soit doté de toutes les fonctionnalités dont on a besoin, qu’il respecte les standards établis et qu’il soit compatible avec tous les navigateurs du marché.

EasySlider réunit justement toutes ses qualités et c’est la raison pour laquelle c’est vers cet outil que je me suis tourné.

2. EasySlider, les fonctionnalités du script

En plus d’être respectueux des normes et d’être compatible avec les différents navigateurs web du marché, EasySlider propose de nombreuses options de personnalisation. Il est ainsi possible de déterminer la rapidité d’exécution des différents slides, d’opter pour deux systèmes de navigation différents (précédent / suivant et contrôles numériques) et bien d’autres choses encore.

Voici d’ailleurs une liste non exhaustive des options du script :

  • Deux systèmes de navigation : précédent / suivant, contrôles numériques.
  • Possibilité d’afficher / de masquer les différents contrôles.
  • Possibilité de choisir l’ID des composantes du système de navigation.
  • Deux orientations possible pour le diaporama : horizontale ou verticale.
  • Possibilité de choisir la rapidité d’exécution des slides.
  • Possibilité de définir un défilement continu ou pas.

Pour avoir plus d’informations sur le sujet, je vous encourage vivement à aller consulter la page dédiée du plugin. N’hésitez pas non plus à aller consulter celles des versions précédentes, elles contiennent de nombreuses informations qui vous permettront de mieux comprendre le fonctionnement de notre EasySlider.

3. EasySlider, l’installer et l’utiliser

Maintenant que les présentations sont faites, nous allons pouvoir passer au vif du sujet et voir comment s’installe et s’utilise EasySlider. Pour se faire, vous aurez besoin d’un minimum de connaissances techniques et maîtriser le HTML ainsi que les CSS. Si ce n’est pas le cas, ce n’est pas grave, vous pouvez garder cet article dans un coin puisque je pense publier dans les semaines qui viennent des guides complets sur les bases du web.

3.1. Installer et  EasySlider :

Pour commencer, il est nécessaire de récupérer la dernière version du plugin sur la page dédiée. Une fois l’archive téléchargée, contentez-vous de la décompresser dans le dossier de votre site. Puis, ouvrez votre éditeur préféré ainsi que le fichier header.php si vous utilisez WordPress ou sinon le fichier de votre site qui va bien.

Placez-vous entre les balise <head> et </head> et insérez les deux lignes suivantes :

1
2

<script src="http://chemin-de-votre-site/jquery-1.3.2.js" type="text/javascript"></script>
<script src="http://chemin-de-votre-site/easySlider1.7.js" type="text/javascript"></script>

Deux choses à noter :

  1. Il est primordial d’intégrer EasySlider après . Si vous ne le faites pas, alors le script ne pourra pas fonctionner.
  2. Le chemin indiqué soit être complet. Attention, donc, si vous avez tendance à mettre vos fichiers JS dans un sous-dossier.

3.2. La base HTML + CSS :

A présent que et EasySlider sont bien installés, nous allons pouvoir commencer à préparer notre template HTML. Notons que les qui suivent ont été volontairement allégés au maximum afin d’insister sur l’essentiel. Globalement, donc, vous aurez ensuite encore un peu de travail à faire au niveau de la mise en forme.

Côté HTML, c’est relativement simple puisqu’il suffit d’insérer les lignes qui suivent à l’endroit où vous souhaitez voir apparaître votre diaporama. Précisons juste que notre structure s’appuie essentiellement sur les listes.

1
2
3
4
5
6
7
8
9

<div id="diaporamali">
<ul>
<li >Mon premier slide</li>
<li >Mon second slide</li>
<li >Mon troisième slide</li>
<li >Mon quatrième slide</li>
<li >Mon cinquième slide</li>
</ul>
</div>

Au niveau des CSS, ce n’est guère plus compliqué, il suffit d’insérer ces lignes dans votre feuille de style. Notons le overflow: hidden placé sur nos listes. Sans lui, le diaporama ne pourra pas fonctionner correctement, il est donc indispensable. Notons également que votre conteneur et vos listes doivent avoir les mêmes dimensions.

1
2
3
4
5
6
7

div#diaporamali,div#diaporamali li {
display: block;
width: 500px;
height: 200px;
list-style-type: none;
overflow: hidden;
}

3.3. Le script :

Maintenant que notre structure est prête, il ne nous reste plus qu’une étape à accomplir : nous allons devoir insérer entre nos balises <head> et </head> le script qui nous permettra d’initialiser et de paramétrer notre diaporama. A toute fin utile, je préfère tout de même préciser un point important : ce script doit obligatoirement être inséré après et EasySlider.

1
2
3
4
5
6
7
8
9
10
11

<script text="text/javascript">
$(document).ready(function() {
        $("#diaporamali").easySlider({
		speed: 1200,
		pause : 10000,
		auto: true, 
		continuous: true,
		numeric : true
	});
});
</script>

Alors évidemment, libre à vous de personnaliser ce script à votre convenance. Ici, j’ai finalement repris le même script que celui qui anime le diaporama de Weedle : un défilement continu, une pause assez longue et un système de navigation numérique transformé en boutons afin de permettre aux internautes de se promener au travers des différents slides.

4. Et après ?

Voilà, cette courte présentation de EasySlider touche à sa fin. Je tiens à préciser que ce script n’est pas le seul du genre mais il a néanmoins le mérite d’être très simple à intégrer et très rapide à déployer. Et si vous avez des questions ou si vous souhaitez simplement remercier son auteur, n’hésitez pas à aller faire un tour chez lui.

Alors maintenant, il y a sans doute une question que vous devez vous poser, à savoir comment j’ai fait pour intégrer les images de mes articles dans ce diaporama. C’est une bonne question, et c’est la raison pour laquelle j’ai décidé d’insérer ci-dessous mon script complet. Comme vous le verrez, ce n’est pas très compliqué.

Le code HTML :

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="diaporamali">
<ul>
<?php
global $post;
$myposts = get_posts('numberposts=5&orderby=post_date&order=DESC');
foreach($myposts as $post) :
?>
<li style="background:url(<?php get_first_image($post->post_content); ?>)">
<a href="<?php the_permalink(); ?>" class="diaporamatitre"><?php the_title(); ?></a>
</li>
<?php endforeach; ?>
</ul>
</div>

Le code CSS :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

div#diaporamali {
border: 4px solid #dedede;
text-align: left;
}
div#diaporamali ul {
margin: 0;
padding: 0;
}
div#diaporamali, div#diaporamali li {
display: block;
width: 573px;
height: 170px;
list-style-type: none;
overflow: hidden;
}
a.diaporamatitre:link, a.diaporamatitre:visited, a.diaporamatitre:hover {
background: #9dd1eb;
color: #fff;
display: block;
font-size: 14px;
height: 22px; 
margin-top: 67px;
padding-left: 10px;
padding-top: 5px;
width: 358px;
}
a.diaporamatitre:hover {
opacity: 0.9px;
}
/* CONTROLES DIAPORAMA  */
ol#controls {
margin-left: 511px;
margin-top: 2px;
padding: 0;
}
ol#controls li {
background: url(img/bouton_diaporama.png) no-repeat;
display: block;
float: left;
height: 12px;
list-style-type: none;
margin-left: 2px;
padding: 0;
width: 12px;
}
ol#controls li a:link,ol#controls li a:visited,ol#controls li a:hover {
display: block;
text-indent: -9999;
height: 12px;
width: 12px;
}

Le script :

1
2
3
4
5
6
7
8
9
10
11

<script text="text/javascript">
$(document).ready(function() {
$("#diaporamali").easySlider({
		speed: 1200,
		pause : 10000,
		auto: true, 
		continuous: true,
		numeric : true
	});
});
</script>

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

]]> http://www.weedle.fr/easyslider-plugin-jquery-diaporamas/feed/ 10 Tutoriel jQuery : créer une boîte d’onglets http://www.weedle.fr/tutoriel-jquery-creer-boite-onglets/ http://www.weedle.fr/tutoriel-jquery-creer-boite-onglets/#comments Sat, 16 Jan 2010 09:00:39 +0000 Fred http://www.weedle.fr/?p=2485 Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

]]> Très populaire, le est utilisé par de nombreux développeurs pour la mise en place de leurs projets web. Et pour cause puisque cette bibliothèque  facilite grandement les choses et permet de déployer facilement des effets saisissants. Une bonne manière d’améliorer l’interaction homme / machine et de donner un coup de fouet à l’expérience utilisateur proposée. Pour ce premier tutoriel sur le sujet, nous allons apprendre à réaliser facilement une boîte d’onglets du même genre que celles utilisées dans la barre latérale de Weedle.

, présentation de la bibliothèque

Avant de vous présenter et de vous parler de son histoire, il est préférable de commencer par le début et de vous expliquer ce qu’est une bibliothèque. Il s’agit d’un ensemble d’outils et d’instructions permettant le rapide d’applications. Constituée de différentes « briques », elle propose ainsi de nombreuses fonctions destinées à faciliter le travail du développeur. Un bon moyen de ne pas perdre son temps en tout codant de zéro.

Le est donc une bibliothèque , ce qui signifie qu’elle est entièrement dédiée à ce langage et qu’elle a pour objectif de simplifier l’utilisation de certaines commandes. En effet, l’avènement du Web 2.0 a donné lieu à une véritable révolution en matière de web. Les sites ne se contentent ainsi plus de présenter de l’information, ils se doivent en effet de proposer une interface riche et une expérience utilisateur améliorée. C’est ainsi que l’on a vu apparaître de véritables webwares (ou applications web) finalement très proches des fonctions proposées par un logiciel traditionnel.

Pour en finir avec cette courte présentation, on ajoutera simplement que a vu le jour en 2006.

, l’installation

Bien que le terme soit assez mal choisi (on installe un programme, pas une bibliothèque), le fait est que nous allons devoir commencer par intégrer à notre site pour pouvoir profiter de toutes ses possibilités. La procédure à suivre est relativement simple. Pour commencer, il est nécessaire de se rendre sur le site officiel, http://www.jquery.com, et de télécharger notre bibliothèque, soit en version complète, soit en version compressée. Précisons juste que la différence entre ces deux versions est assez simple : la version compressée, légère mais illisible, convient aux sites en production alors que la version complète, plus lourde mais plus claire, vous permettra de mieux comprendre comment les choses se passent.

Une fois le fichier téléchargé, nous allons devoir le lier à notre site. Pour se faire, dans le code source de votre site, entre les balise <head> et </head>, nous allons simplement ajouter la ligne suivante :

1

<script src="VOTRE_FICHIER.js" type="text/javascript" />

Précisons que tous vos devront nécessairement se situer après cette ligne. Sans cela, ils ne seront pas correctement interprétés. De la même manière, assurez-vous que le chemin indiqué est correct.

Tutoriel : écrire le squelette de notre boîte d’onglets

La première étape de notre tutoriel est relativement simple puisque nous allons devoir commencer par créer le squelette de notre boîte d’onglets et donc définir sa structure HTML ainsi que ses CSS. Pour se faire, vous aurez besoin d’un minimum de connaissances en la matière.

Etape 1 : la structure HTML

Notre boîte d’onglets sera constituée de plusieurs éléments. Nous aurons tout d’abord une liste horizontale comprenant nos trois onglets dotés d’un ID unique. En dessous, nous aurons trois DIV portant chacun un ID unique aussi. Globalement, votre code devrait ressembler à ça :

1
2
3
4
5
6
7
8

<ul id="cap_nav">
<li id="tab_1" class="cap_onglet cap_active" title="content_1">Onglet 1</li>
<li id="tab_2" class="cap_onglet" title="content_2">Onglet 2</li>
<li id="tab_3" class="cap_onglet" title="content_3">Onglet 3</li>
</ul>
<div id="content_1" class="cap_content">Content 1</div>
<div id="content_2" class="cap_content">Content 2</div>
<div id="content_3" class="cap_content">Content 3</div>

Dans un premier temps, je vous recommande de ne pas faire de fioritures. Une fois que vous aurez vérifié le bon fonctionnement de votre boîte à onglets, vous pourrez commencer à les personnaliser. Avoir une structure simplifiée et épurée vous permettra de résoudre plus facilement les éventuels bogues que vous pourriez rencontrer.

Précisons également que tous nos onglets portent la classe « cap_onglet » mais que nous avons ajouté la classe « cap_active » au premier pour qu’il soit affiché par défaut.

Etape 2 : les CSS

Là encore, afin de conserver une certaine lisibilité (et donc vous faciliter les choses), le morceau de code qui suit ne comporte aucune fioriture, uniquement les propriétés indispensables pour que notre boîte d’onglets puisse fonctionner dans de bonnes conditions.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.cap_onglet, .cap_active {
cursor : pointer;
display : block;
float : left;
}
 
.cap_onglet {
color:#863486;
}
 
.cap_active {
color : #fff;
}
 
div#content_2, div#content_3 {
display :none;
}

Plusieurs choses à signaler ici. En premier lieu, on va utiliser deux classes pour les onglets : la classe   ».cap_onglet » et la classe « .cap_active ». Ainsi, nous pourrons modifier l’apparence de l’onglet actif (sur Weedle, ce dernier est noir). Même chose, nous ajoutons la propriété « cursor:pointer » dans un souci d’accessibilité : en passant leur curseur sur nos onglets, les internautes verront qu’ils peuvent cliquer dessus.

Enfin, par défaut, nos DIV « content_2″ et « content_3″ sont masqués. Ce n’est pas le cas de « content_1″ car il est affiché par défaut.

Tutoriel : écrire le script qui animera l’ensemble

En l’état, notre boîte d’onglets est complètement figée. Si nous cliquons sur l’un de ces derniers, rien ne se passe. C’est normal, car il manque encore une dernière étape, la plus complexe pour les néophytes : le script. Il faudra bien entendu le copier entre les balise <head> et </head>, juste après la ligne qui appelle le fichier .

Afin de le rendre plus clair pour vous, je l’ai commenté et nous allons ensuite l’expliquer en détails.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<script text="text/javascript">
$(document).ready(  function() {
    	// Lorsqu'on clique sur un onglet
        $("li.cap_onglet").click(   function () {
            // On les met tous en inactif
            $(".cap_active").removeClass("cap_active");
 
            // On met l'onglet cliqué en actif
            $(this).addClass("cap_active");
 
            // On cache toutes les boîtes de contenu
            $(".cap_content").slideUp();
 
            // On affiche la boîte de contenu liée à notre onglet
            var contenu_aff = $(this).attr("title");
            	$("#" + contenu_aff).slideDown();
        });
</script>

Dans un premier temps, on attend la fin du chargement de la page (ce qui correspond à la première ligne de notre script). Ensuite, on appelle tous les onglets possédant la classe « cap_onglet ». Les lignes qui suivent ne concerneront que ces derniers.

On commence par retirer la classe « cap_active » à tous les onglets, puis on l’ajoute à celui sur lequel on vient de cliquer afin de changer son apparence. On enchaine ensuite en cachant toutes les boîtes de contenu (c’est le fameux « slideUp ») et on termine en déroulant uniquement la boîte liée à l’onglet sur lequel on vient de cliquer (le « slideDown »).

Petite précision à ce sujet. Pour trouver la boîte de contenu liée à l’onglet cliqué, on passe par le contenu de la balise « title » de ce dernier. Si vous regardez attentivement notre structure HTML, vous pourrez remarquer que tous les onglets possèdent un « title » unique qui n’est autre que l’ID du DIV rattaché.

Et pour aller plus loin

En l’état, nos onglets fonctionnent parfaitement mais il reste encore beaucoup de choses à faire, notamment au niveau des CSS de chaque élément. J’aurais pu y consacrer une rubrique dans cet article mais j’ai préféré me concentrer sur l’essentiel et ce sera donc à vous de compléter ce point.

En revanche, propose de nombreux autres effets que le « slideUp » ou le « slideDown ». Si ces derniers ne vous conviennent pas, ou si vous souhaitez en expérimenter d’autres, il suffit de vous reporter à la liste du site officiel. Au passage, vous trouverez également à cette adresse une documentation complète pour aller un peu plus loin.

Bien évidemment, je ne manquerai pas de vous proposer d’autres tutoriels sur le sujet dans les semaines qui viennent. En tout cas, j’espère que celui-ci vous aidera à mieux comprendre le fonctionnement de la bibliothèque.

Crédits Photo

Cet article original a été publié sur Weedle.
Toute reproduction, même partielle, est interdite sans l'accord explicite de ses auteurs sauf citation de quelques lignes accompagnées d'un lien vers ce billet.
Si vous aimez Weedle, vous pouvez nous rejoindre sur Twitter, sur Facebook ou rejoindre notre groupe sur Flickr.

]]> http://www.weedle.fr/tutoriel-jquery-creer-boite-onglets/feed/ 21