LudiBlog

Chocolat – plugin jQuery – La visionneuse d’image pratique

LudiKadmin — Thu, 19 Jan 2012 15:24:59 +0000

Je reviens de nouveau avec un plugin jQuery. Cette fois, c’est une réalisation française : Chocolat. Chocolat permet de visualiser une à plusieurs images sans quitter la page de votre site web. Le plugin jQuery laisse à l’utilisateur le choix de regrouper une série d’image sous un lien, ou de laisser apparaître les images sous forme de miniatures. Cette visionneuse peut apparaitre soit en pleine page, soit dans un bloc de la page.

Utilisation du plugin :

Appel des librairies et fichiers js / css :

Création des éléments html qui seront touchés par le plugin :

Puis la mise en marche du plugin :

Puis vous aurez tous vos liens qui seront affectés par le plugin jQuery Chocolat, au clic vous pourrez visionner vos images sans avoir à changer de page.

Il existe plusieurs options :

container :
Définit si l'interface chocolat va s'ouvrir et occuper toute la page (par defaut), ou si elle doit s'ouvrir dans un bloc particulier de la page. (facultatif)

displayAsALink :
Permet de regrouper les images sous un seul lien (true) ou de laisser le html tel quel (pour laisser des miniatures apparentes par exemple) (false : par defaut). (facultatif)

linkImages :
Définit si l'on peut passer d'une image à l'autre sans fermer la visionneuse (true : par defaut), ou si les images restent indépendantes. (facultatif)

overlayOpacity, overlayColor :
Permettent de définir l'opacité et la couleur du fond. (facultatif)

linksContainer :
Permet de définir l'élément qui contiendra le lien vers la série si displayAsALink vaut true (facultatif).

Pour plus d’information sur ce plugin, rendez vous sur la page officiel de Chocolat
Pour visualiser une démo, c’est par là

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

Slidorion – Plugin jQuery – Un Slider couplé à un menu accordéon et bien plus !

LudiKadmin — Wed, 28 Dec 2011 21:16:38 +0000

Vous cherchez un slider en javascript ? Mieux, en jQuery ? De plus, couplé à un menu accordéon avec du contenu afin de rendre l’utile à l’agréable ? Slidorion est le plugin qu’il vous faut. En effet, vous allez pouvoir faire défiler des images (avec textes, html etc… ou non) avec un menu associé et son bloc de contenu. Autant dire que ce plugin jQuery est intéressant pour agrémenter un page web.

Comment utiliser ce plugin jQuery :

Importer les librairies dans le document (dans le « head » – css+js) :

Vous l’aurez compris, easing est nécessaire au bon fonctionnement de Slidorion.
Télécharger Easing

Construire la structure qui deviendra notre Slider à menu :

<div id="slidorion">
<div id="slider">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>

<div id="accordion">
<div class="link-header">New Features</div>
<div class="link-content">

</div>
<div class="link-header">A Simple Image</div>
<div class="link-content">

</div>
<div class="link-header">Background Image w/ HTML</div>
<div class="link-content">

</div>
</div>
</div>

Et l’initiation basique du plugin :

$(document).ready(function(){
$('#slidorion').slidorion();
});

Bien entendu, il existe de multiples options, comme la vitesse de changement, des effets tels que les fondus, les intervalles etc…

Vous pouvez directement télécharger le plugin Slidorion.

Vous avez des démonstrations complètes sur le site du plugin jQuery Slidorion.

Un bon petit plugin jQuery bien pratique.

Et vous qu’en pensez vous ?

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

s3Slider – Plugin jQuery – Un slider simple pour vos sites web

LudiKadmin — Thu, 15 Dec 2011 13:24:02 +0000

Un petit article sur un plugin jQuery très simple, qui permet de mettre en place un slider pour vos sites web.

Vous le savez certainement, le site du Framework javascript jQuery et plus particulièrement la partie des plugins a été victime d’une malheureuse erreur de manipulation, faisant ainsi perdre une grande partie des plugins enregistrés sur le site de jQuery et ce, sur plusieurs mois (voir années). Ne vous étonnez donc pas si vous tombez sur un message de maintenance en vous rendant sur la partie plugins du site de jQuery. Tout ça pour vous dire qu’il est intéressant pour moi (et c’est le cas de pas mal d’acteurs du web) de vous dégoter des plugins jQuery et de vous les présenter, et ainsi d’avoir plusieurs sources disponibles pour ces derniers.

Bon, revenons en à notre plugin du jour, à savoir s3Slider, qui comme son nom l’indique est un slider. Un slider qui agrémentera vos sites web.

Pour moi, le meilleur des sliders à l’heure actuel reste Skitter, mais certains d’entre vous auront peut être besoin de quelque chose de beaucoup plus basique et s3Slider peut répondre à ce besoin.

Voilà la manière de l’utiliser :

Code à insérer dans le head de votre fichier.

Ensuite :

<div id="s3slider">
<ul id="s3sliderContent">
<li class="s3sliderImage">
<img src="monimage.png" />
<span>Your text comes here</span>
</li>
<li class="s3sliderImage">
<img src="monimage2.png" />
<span>Your text comes here</span>
</li>
<div class="clear s3sliderImage"></div>
</ul>
</div>

Les blocs qui deviendront un slider. Images + textes.

Puis :

#s3slider {
width: 400px; /* important to be same as image width */
height: 300px; /* important to be same as image height */
position: relative; /* important */
overflow: hidden; /* important */
}

#s3sliderContent {
width: 400px; /* important to be same as image width or wider */
position: absolute; /* important */
top: 0; /* important */
margin-left: 0; /* important */
}

.s3sliderImage {
float: left; /* important */
position: relative; /* important */
display: none; /* important */
}

.s3sliderImage span {
position: absolute; /* important */
left: 0;
font: 10px/15px Arial, Helvetica, sans-serif;
padding: 10px 13px;
width: 374px;
background-color: #000;
filter: alpha(opacity=70); /* here you can set the opacity of box with text */
-moz-opacity: 0.7; /* here you can set the opacity of box with text */
-khtml-opacity: 0.7; /* here you can set the opacity of box with text */
opacity: 0.7; /* here you can set the opacity of box with text */
color: #fff;
display: none; /* important */
top: 0;

/*
if you put
top: 0; -> the box with text will be shown at the top of the image
if you put
bottom: 0; -> the box with text will be shown at the bottom of the image
*/
}

.clear {
clear: both;
}

Le code css d’exemple à modifier comme bon vous semble.

Et pour finir :

$(document).ready(function() {
$('#s3slider').s3Slider({
timeOut: 4000
});
});

Et l’appel à la méthode du plugin afin de transformer tous ces jolis petit blocs en un slider simple (avec pour cet exemple, un changement d’image toutes les 4 secondes).

Retrouver le plugin sur cette page web

Pour visualiser les démonstrations.

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

jCoverflip – Plugin jQuery – Le Coverflow simple et efficace

LudiKadmin — Tue, 06 Dec 2011 14:11:41 +0000

Je reviens avec un article sur un plugin jQuery qui va vous permettre de réaliser un ou plusieurs Coverflow de manière simple et efficace. Je dis simple si vous possédez des notions de jQuery, bien entendu. Ce plugin, c’est jCoverflip, qui utilise le framework javascript jQuery (normal) et jQuery UI (disponible ici).

Voici un exemple basique de l’utilisation de ce plugin jQuery :

Appel des librairies utiles au bon déroulement des opérations

L’élément avec l’ID #flip se verra touché par l’effet de jCoverflip.

<ul id="flip">
<li><a href="..."><img ... /><span class="title">My title</span></a></li>
<li><a href="..."><img ... /><span class="title">Another title</span></a></li>
...
</ul>

On s’aperçoit que l’élément avec l’ID #flip est une liste « ul » avec lien, image et titre. Pour le titre, il est possible d’utiliser l’attribut « alt » de l’image ou bien d’utiliser un attribut title dans le « li ».

Et là votre Coverflow est fonctionnel.

Bien entendu, il y a de multiples options et variantes, options disponibles sur cette page.

A savoir qu’une version pour Drupal existe.

Retrouver le plugin téléchargeable sur ce lien et une démonstration ici.

Par contre on s’aperçoit que le plugin jCoverflip est utilisé avec une version 1.3 de jQuery, à l’heure où j’écris ces lignes nous en sommes à la 1.7, donc à tester sous cette dernière version.

Bon code à tous !

EDIT DU 02.01.2012 :
Le plugin ne fonctionne pas forcément avec une version récente de jQuery, pour cela, on peut retrouver une version plus fraiche de ce plugin faite par l’auteur et qui devrait fonctionner : https://github.com/NewSignature/jcoverflip

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

Retrouvez le blog sur votre réseau favori

LudiKadmin — Tue, 06 Dec 2011 12:37:21 +0000

Vous le savez autant que moi, voir bien mieux que moi pour certains, les internautes utilisent énormément (de plus en plus) les réseaux sociaux et autres outils web afin de suivre les actualités de leurs sites ou auteurs préférés. Donc juste ce petit billet pour vous rappeler les liens vers les comptes liés à ce blog (LudiBlog), afin que vous puissiez suivre tranquillement l’actualité de celui-ci via votre outil favori.

Pour les adeptes de Twitter et des gazouillis en tout genre, vous avez bien entendu : @LudiKreation, mais aussi mon compte perso : @FPertegas.

Sur ces comptes Twitter, bien entendu toute l’actualité du blog, mais aussi tous les coups de cœur, les articles intéressants et des RT pertinents dans le domaine du WEB pour LudiKreation et dans le domaine du WEB et du LUDIQUE pour mon compte perso.

Vous pouvez notamment suivre l’annuaire de sites web LudiKreation via ce compte @AnnuaireSites si vous souhaitez découvrir toutes les nouvelles entrées de l’annuaire.

Passons au compte Facebook de LudiKreation et à la page de Fans où vous pourrez interagir et découvrir l’univers LudiKreation via le célébrissime Facebook.

Sur Viadeo et LinkedIn je vous propose mes comptes perso, afin d’agrandir votre réseau et par la même occasion de profiter du mien.

Sur Google+, il y a bien entendu tous mes articles liés à ce blog et à mes passions qui sont le web et le ludique sur ce compte G+ et aussi la page entreprise de LudiKreation.

Et pour finir, vous pouvez bien entendu suivre le flux RSS du Blog et suivre toutes les aventures LudiKreation sur FriendFeed.

Pour rappel, sur ce blog je parle de web, de développement web (PHP, Javascript : jQuery, HTML/CSS etc…), Référencement/SEO et parfois d’actualités autours du web.

Voilà pour le petit billet de rappel, type de billet que je propose à peu près tous les 6 mois. Si vous avez d’autres réseaux que vous aimez et où vous souhaiteriez voir les actu du blog, n’hésitez pas à me le dire en commentaire

A bientôt sur votre réseau préféré !

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

GMap3 – Plugin jQuery pour API Google Maps 3ème version

LudiKadmin — Thu, 24 Nov 2011 14:16:31 +0000

Je vais vous reparler du Plugin GMAP3 pour jQuery, qui permet une utilisation simplifiée et en jQuery de l’API Google Maps Javascript Version 3. C’est un plugin que j’ai déjà présenté 2 fois sur ce blog, ici et là. A l’heure où j’écris ces quelques lignes la version 4.1 de ce plugin est sortie et disponible directement sur le site du plugin GMAP3 ici.

Pour rappel, GMAP3 c’est quoi ?

GMAP3 c’est un plugin jQuery qui va vous permettre de nombreuses manipulations de l’API Google Maps JavaScript version 3.

Utilisation du plugin jQuery :

Dans un premier temps inclure toutes les librairies nécessaires dans le head de votre fichier comme ceci :

Pour l’exemple on va utiliser le plugin dans sa version la plus basique :

$("#maCarte").gmap3();

Ensuite un peu de CSS pour le bloc qui aura l’ID maCarte et qui est la cible de notre exemple :

#maCarte{
height: 350px;
width: 100%;
}

Puis pour finir notre bloc avec l’ID maCarte :

Et là vous devriez voir apparaitre un élément Google Maps dans votre div représentant le monde, et en toute logique centré sur le pays où vous vous trouvez.

Quelques particularités apportées par ce plugin parmi beaucoup d’autres :

- Multi-instance (plusieurs cartes Google dans une même page web)
- Chaînable (comme tout autre plugin JQuery)
- Full JQuery
- Full Google Maps (il permet d’utiliser toutes les fonctionnalités natives à l’API Google Maps 3)
- Contextuel (via this qui se réfère au bloc qui reçoit la map)
- etc…

Je vous laisse donc découvrir le site officiel du Plugin jQuery GMAP3 et une version Française (non-officiel) sur cette page.

Vous retrouverez toutes les informations et possibilités sur ces 2 sites.

Bon code à tous

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax

LudiKadmin — Tue, 22 Nov 2011 17:54:34 +0000

Me voici de retour avec la présentation d’un autre plugin jQuery qui vous permettra d’offrir aux internautes qui visitent vos sites internet la possibilité d’avoir une liste de suggestion lors des entrées qu’ils commenceront à formuler dans vos boites de texte de formulaires. Un peu dans le même esprit que le célèbre moteur de recherche du géant Google.

Je vous présente donc jQuery AutoSuggest Plugin, qui permet la création de suggestion de mots comme une liste de choix dans vos boites de texte avec des appels Ajax.

Ce plugin jQuery d’auto-suggestion permet entre-autre :

– D’afficher toutes les données JSON sous une liste
– D’utiliser les flèches haut / bas pour faire défiler la liste
– D’utiliser « entrer » ou la « tabulation » pour sélectionner une valeur de la liste
– D’afficher une image de chargement (loading)
– De stocker l’ID de la valeur sélectionnée dans un champ distinct
– D’avoir des boîtes à suggestions multiples sur une seule page
– D’avoir un appel Ajax selon le nombre de caractères entrés, afin d’abaisser le nombre d’appels à la page Ajax

Des exemples PHP et ASP sont inclus dans le téléchargement de la démo.

L’utilisation se fait comme suis :

$("#inputBox1").jqEasySuggest({
ajax_file_path: "php/ajax.php"
});

Là, on a demandé que l’auto-suggestion se fasse sur l’élément de formulaire avec l’ID inputBox1 et les suggestions seront établies depuis le fichier php/ajax.php.

C’est tout ce qu’il y a à faire pour la version simple. Voici toutes les options possibles :

ajax_file_path : "", // path to the file that returns the json encoded results
min_keyword_length : 2, // min char length to trigger the ajax lookup
showLoadingImage : true, // boolean value to display a loading image in the textbox while typing
focus_color : "", // change the textbox border color on focus
keyupDelay : 200, // add keyup delay to prevent lookup until user has finished typing (lowers the numbers of ajax calls)
id_element : "", // optional id of the element (textbox, hidden textbox, etc.) to store the id of the lookup value
sql_match_type : "starts", // used in the sql LIKE clause. values are starts, ends, or contains
es_width : "auto", // width of the drop down suggest box. auto will automatically calculate the width of the selectors width
es_opacity : 0.95, // opacity of the drop down suggest box
es_max_results : 10, // max number of results to display in the list of suggestions
es_offset_left : 0, // drop down suggest box left offset position
es_offset_top : 0 // drop down suggest box top offset position

N’hésitez pas à télécharger le plugin jQuery et le tester, via ce lien
Retrouvez la démo ici.

Si vous avez des commentaires ou questions n’hésitez pas

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

Conception web – Forcer le cache à se vider pour vos fichiers CSS, JS et vos images

LudiKadmin — Tue, 25 Oct 2011 11:43:55 +0000

Toujours dans un but de poster des petites astuces et de répondre aux questions de mes collègues, amis ou clients, voici un petit billet pour vous expliquer quelques pratiques pour forcer le cache navigateur à re-télécharger certains éléments de votre site qui ont changé, mais qui restent en cache navigateur, car le nom du fichier, lui, est toujours le même.

En effet, le navigateur garde en mémoire certains éléments (css, images, javascript etc…) afin d’améliorer la vitesse de chargement. Mais il arrive que de petites modifications ne soient pas prises en compte ce qui peut perturber l’affichage et/ou la navigation des internautes sur votre site. Bien entendu, en tant que développeur, vous savez qu’il faut vider le cache navigateur, mais certains visiteurs (et surtout vos clients) ne le savent pas forcément. Alors, il existe quelques astuces pour essayer de palier à ce soucis.

Renommer les fichiers

Bien entendu, il vous est possible de renommer tous les fichiers qui ont été modifiés, mais ça peut s’avérer fastidieux, surtout si vous apportez souvent de petites modifications.

Utilisation des requêtes via le ?

Déjà plus pratique, il vous est possible d’utiliser lors de l’appel du ou des fichiers une requête « factice » après le point interrogation « ? ».

Comme ceci par exemple :

Et donc modifier juste l’appel à chaque modification, « 1234″ deviendra « 12345″ etc…

Si vous utilisez PHP, nous pouvons améliorer ce petit procédé et le rendre automatique, exemple simple :

echo time(); ?>" type="text/css" rel="stylesheet" />

Ce qui le modifiera à chaque fois et le navigateur le téléchargera à chaque fois.

Cependant, il est possible d’améliorer cela, éviter ainsi le téléchargement systématique du fichier, et faire en sorte que ce dernier ne soit téléchargé uniquement si le fichier à été modifié, exemple :

echo filemtime('css/style.css'); ?>" type="text/css" rel="stylesheet" />

Petite astuce simple à mettre en place et qui peut s’avérer utile dans certains cas

Bon code à tous !

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

Google – Mais où est passé mon PageRank (PR) ?

LudiKadmin — Thu, 13 Oct 2011 15:40:19 +0000

Voilà quelques jours que certains scripts, plugins ou logiciels affichent un PageRank de 0 pour tous les sites ou ne l’affiche plus du tout. Google aurait-il décidé d’arrêter de fournir cette donnée ? Youpi crieront certains, bouuuuuh diront d’autres. Mais que né-ni (pas sûr que ça s’écrive ainsi^^), google a simplement changé son url destinée à traiter les demandes de PageRank.

Avant nous avions : http://toolbarqueries.google.com/search?{INFOS}
Maintenant nous avons : http://toolbarqueries.google.com/tbr?{INFOS}

Tout ça pour vous dire qu’il faut soit mettre à jour vos scripts ou logiciels, soit attendre qu’une mise à jour se fasse pour vos outils.

Ce petit billet fait suite à l’inquiétude de plusieurs de mes clients, comme quoi cette notion de PageRank est encore importante dans l’esprit de beaucoup d’utilisateur du Web.

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables

LudiKadmin — Tue, 27 Sep 2011 16:00:24 +0000

Vous souhaitez réaliser un effet d’onglet rétractable sur votre site internet ? Vous souhaitez un bloc de contact qui se dévoile lorsque vous cliquez sur un onglet « Contact » calé sur le bord de votre page de site web ? Vous avez vu ça quelque part, mais ne trouvez pas le plugin jQuery adéquat ? jQuery Slick Plugin est là pour vous permettre de réaliser cet effet.

Un plugin jQuery téléchargeable via ce lien, et à utiliser ainsi :

Élément HTML :

<div id="slick">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Terms & Conditions</a></li>
<li><a href="#">Contacts</a></li>
</ul>
</div>

Appel de la librairie :

Intégration du css (il existe un style proposé par l’auteur, mais il est possible de proposer son propre style css) :

Et exploitation du plugin :

jQuery(document).ready(function($) {
$('#slick').dcSlick();
});

Bien entendu, il existe des options, voici celles par défaut :

var defaults = {
classWrapper: 'dc-slick', // CSS class of slick content wrapper
classContent: 'dc-slick-content', // CSS class of slick content
location: 'top', // Location of slide out content - options are top, bottom, right & left
align: 'left', // Alignment of tab for location top/bottom - options are right & left
offset: '100px', // Offset in pixels from edge of browser window
speed: 'slow', // Speed of slide out animation
tabText: 'Click', // Default text for slick tab
classTab: 'tab', // Default CSS class for tab
classOpen: 'slick-open', // CSS for external link to open tab
classClose: 'slick-close', // CSS for external link to close tab
classToggle: 'slick-toggle', // CSS for external link to toggle tab
autoClose: true, // If set to true the slick content will auto-close when elsewhere in browser window is clicked
loadOpen: false // Set to true to have the tab open by default on page load
onLoad : function() {}, // callback function on loading slick tab content
beforeOpen : function() {}, // callback function before opening slick tab
beforeClose: function() {} // callback function before closing slick tab
};

Puis la manière de les utiliser :

$('#slick').dcSlick({
location: 'bottom',
align: 'right',
offset: '250px',
speed: 'slow',
tabText: 'Slick Tab',
autoClose: true
});

Un plugin jQuery qui peut s’avérer pratique dans de nombreux cas. Plusieurs autres versions spécifiques existent : WordPress Slick Menu Plugin, WordPress Slick Contact Form Plugin et Slick Social Share Buttons.

Et vous qu’en pensez vous ?

Articles qui peuvent vous intéresser :

scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">