Planète jQuery : l'actualité jQuery, plugins jQuery et tutoriels jQuery en français

Filtrer les articles : Articles du jour - Articles de la semaine - Articles du mois - Tous les articles

Jquery Selected text searcher – Plugin jQuery

Par LudiKreation le 27/08/2010 à 14:27

Je reviens de nouveau avec jQuery, cette fois-ci avec un plugin nommé « Selected text searcher« . C’est un plugin qui va permettre de rajouter une sorte de tooltip lors de la sélection d’un texte que vous aurez préalablement déterminé.

Jquery-Selected-text-searcher-plugin

En fait, vous allez pouvoir y mettre des liens dans la tooltip, des liens avec favicon du site si vous le souhaitez. Vous pourrez y mettre un titre, du contenu et des éléments de recherche ou d’envoi.

Par exemple pour ajouter des éléments de partage :
code js :

$('.demo1').selectedTextSharer({
lists:"Twitter,http://twitter.com/home?status=%ts ,favicon|Facebook,http://www.facebook.com/sharer.php?t=%s&u=http://google.com,favicon|Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon",
extraClass: 'dark',
title: 'Share this text ...',
borderColor: '#00ccff',
hoverColor: '#FFFFCC'
});

et le html :

<div class="demo1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it</div>

On peut remarquer l’attribut favicon, pour ajouter automatiquement le favicon du site en question.

Pour effectuer des recherches sur un lieu, via googlemaps ou wikipédia par exemple :
code js :

$('.demo4').selectedTextSharer({
lists:"Wikipedia (en),http://en.wikipedia.org/w/index.php?title=Special:Search&search=%s,favicon|Google Maps,http://maps.google.com/?q=%s,favicon",
title: 'Search this text ...',
borderColor: '#009900',
hoverColor: '#FFFFCC'
});

code html :

Pour plus d’informations :
Le site du plugin
La démo

Articles qui peuvent vous intéresser :

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

Haut de page

jQuery – Afficher une adresse mail sans être spammé

2 votes

Par LudiKreation le 20/08/2010 à 16:31

anti-spam-mail

En me baladant sur le net, je suis tombé sur un petit article sur le blog de Victor Coulon, qui explique d’une manière simple une petite astuce en jQuery sur comment camoufler son adresse mail aux yeux des robots spammeurs, mais pas à ceux des internautes.

Voici donc l’astuce :

Le code jQuery nécessaire :

Et l’affichage HTML :

<span>contact[arobase]ludikreation[point]com</span>

Source

Articles qui peuvent vous intéresser :

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

Haut de page

Sponsor Flip Wall – jQuery – Un mur de sponsors étonnant

1 vote

Par LudiKreation le 20/08/2010 à 15:51

jQuery est un framework agréable et très apprécié des développeurs, notamment grâce à une fluidité et une maniabilité améliorée de coder en javascript. Et je suis tombé sur un tutoriel vraiment bluffant sur les possibilités données via jQuery et l’imagination de développeurs.

Avec Sponsor Flip Wall, vous allez pouvoir réaliser un mur de sponsors, ou autre, avec comme effet, qu’au clique la cellule d’image du sponsor sélectionné se retourne pour dévoiler des informations et un lien. Bien entendu tout ceci peut être adapté et l’effet, que l’on retrouve souvent dans des animations flash, est plutôt fluide et très agréable.

flip-jquery

Avec un peu de code PHP, CSS et javascript on peut arriver à ce résultat.

Un fichier css style.css :

body{
/* Setting default text color, background and a font stack */
font-size:0.825em;
color:#666;
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
}

.sponsorListHolder{
margin-bottom:30px;
}

.sponsor{
width:180px;
height:180px;
float:left;
margin:4px;

/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}

.sponsorFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */

position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background:url("img/background.jpg") no-repeat center center #f9f9f9;
}

.sponsorFlip:hover{
border:1px solid #999;

/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}

.sponsorFlip img{
/* Centering the logo image in the middle of the .sponsorFlip div */

position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
}

.sponsorData{
/* Hiding the .sponsorData div */
display:none;
}

.sponsorDescription{
font-size:11px;
padding:50px 10px 20px 20px;
font-style:italic;
}

.sponsorURL{
font-size:10px;
font-weight:bold;
padding-left:20px;
}

.clear{
/* This class clears the floats */
clear:both;
}

Un fichier php demo.php avec :

<?php

// Each sponsor is an element of the $sponsors array:

$sponsors = array(
array('facebook','The biggest social..','http://www.facebook.com/'),
array('adobe','The leading software de..','http://www.adobe.com/'),
array('microsoft','One of the top software c..','http://www.microsoft.com/'),
array('sony','A global multibillion electronics..','http://www.sony.com/'),
array('dell','One of the biggest computer develo..','http://www.dell.com/'),
array('ebay','The biggest online auction and..','http://www.ebay.com/'),
array('digg','One of the most popular web 2.0..','http://www.digg.com/'),
array('google','The company that redefined w..','http://www.google.com/'),
array('ea','The biggest computer game manufacturer.','http://www.ea.com/'),
array('mysql','The most popular open source dat..','http://www.mysql.com/'),
array('hp','One of the biggest computer manufacturers.','http://www.hp.com/'),
array('yahoo','The most popular network of so..','http://www.yahoo.com/'),
array('cisco','The biggest networking and co..','http://www.cisco.com/'),
array('vimeo','A popular video-centric social n..','http://www.vimeo.com/'),
array('canon','Imaging and optical technology ma..','http://www.canon.com/')
);

// Randomizing the order of sponsors:

shuffle($sponsors);

// Looping through the array:

foreach($sponsors as $company)
{
echo'
<div class="sponsor" title="Click to flip">
<div class="sponsorFlip">
<img src="img/sponsors/'.$company[0].'.png" alt="More about '.$company[0].'" />
</div>

<div class="sponsorData">
<div class="sponsorDescription">
'.$company[1].'
</div>
<div class="sponsorURL">
<a href="'.$company[2].'">'.$company[2].'</a>
</div>
</div>
</div>

';
}

?>

Et du javascript dans un fichier script.js :

$(document).ready(function(){
/* The following code is executed once the DOM is loaded */

$('.sponsorFlip').bind("click",function(){

// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):

var elem = $(this);

// data('flipped') is a flag we set when we flip the element:

if(elem.data('flipped'))
{
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:

elem.revertFlip();

// Unsetting the flag:
elem.data('flipped',false)
}
else
{
// Using the flip method defined by the plugin:

elem.flip({
direction:'lr',
speed: 350,
onBefore: function(){
// Insert the contents of the .sponsorData div (hidden
// from view with display:none) into the clicked
// .sponsorFlip div before the flipping animation starts:

elem.html(elem.siblings('.sponsorData').html());
}
});

// Setting the flag:
elem.data('flipped',true);
}
});

});

Bien entendu tout le code ici n’est pas complet, pour télécharger le code complet, rendez vous ici.

Démonstration
Source et tutoriel

Articles qui peuvent vous intéresser :

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

Haut de page

Easy Gallery – Plugin jQuery – Pour agrémenter vos galeries photos

2 votes

Par LudiKreation le 15/08/2010 à 22:51

Il y avait bien longtemps que je ne vous avait pas parlé de mon framework javascript préféré : jQuery. Cette fois c’est pour vous parler d’un petit plugin sympathique pour agrémenter vos sites avec un défilement d’images.

Ce plugin, c’est Easy Gallery.

Le code que vous pouvez visualiser sur la démonstration, est le suivant :

$(document).ready(function (){
$("#gallery").egallery({
width:500,
height:230,
speed: 1000,
delay:4000,
easing:'easeInOutBack',
thumbs:'numbers',
thumbClass:'tclass',
aClass:'ac'
});
});

Et le html de vos images :

Ça reste donc assez ludique et compréhensible, pour un rendu agréable.

Site de Easy Gallery

Articles qui peuvent vous intéresser :

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

Haut de page

Pajinate – Plugin jQuery – La pagination en javascript

2 votes

Par LudiKreation le 21/05/2010 à 16:39

Me revoilà avec un nouveau Plugin jQuery, je vous avais déjà présenté un plugin qui proposait de la pagination pour vos sites web. Et bien en voilà un autre légèrement différent. C’est Pajinate !

pajinate-jquery

Vous allez donc pouvoir raccourcir vos listes et proposer un système de page, au lieu de tourner la roulette de votre souris pour atteindre le bout de la liste qui vous parait interminable.

Exemple d’intégration :

Puis les blocs ciblés :

<div id="page_container">
<div class="page_navigation"></div>

<ul class="content">
<li> <p>One</p> </li>
...
<li> <p>Eight</p> </li>
</ul>

</div>

Le plugin se charge du reste, c’est assez simple à mettre en place et peut s’avérer utile.

Vous pouvez retrouver une démo ici.

Puis les sources là.

Et le site du projet : http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/

Articles qui peuvent vous intéresser :

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

Haut de page

jQuery – 20 plugins jQuery à retenir

3 votes

Par LudiKreation le 07/05/2010 à 10:42

Voici plusieurs mois que je vous fais des articles dédiés au web, et dans ces articles, très souvent on en revient à parler de jQuery. Déjà parce que j’aime ce Framework Javascript et puis parce que c’est l’un des plus utilisé sur le web. Je tâche de vous faire découvrir de nouvelles utilisations et des plugins de ce framework javascript.

Dans ce billet, je vous ai regroupé 20 plugins jQuery qui sont à tester ou voir au moins une fois. Une sorte de résumé des articles que je vous ai déjà fait sur le sujet.

Les indispensables

jQuery UI
Je vous en parle ici.
Un officiel de l’équipe jQuery qui va vous permettre entre autre, de créer des éléments type : Draggable, Droppable, Resizable, Selectable, Sortable, Accordion, Datepicker, Dialog, Progressbar, Slider, Tabs etc… le site

—————————————————————————
Traitements de textes

MarkItUp !
Je vous en parle ici
MArkItUp est un éditeur de texte qui fonctionne avec jQuery. Léger, simple et pratique, il va vous permettre d’intégrer un éditeur de textes à votre site, aussi bien de xhtml, bbcode, wikicode etc… le site

jqIsoText
Je vous en parle ici
C’est un plugin qui va permettre de faire un effet pseudo-isométrique sur un texte. Le site

—————————————————————————
Effets

jQuery Pagination plugin
Je vous en parle ici
Un effet de pagination en javascript utilisant la librairie jQuery. Le site

jQuery Masonry
Je vous en parle ici
Plugin qui agence les blocs de div de vos site automatiquement. Le site

TipTip
Je vous en parle ici
Un tooltip simple et léger pour votre site web. Le site

Quicksand
Je vous en parle ici
Un plugin jQuery qui va vous permettre d’agrémenter vos tries ou filtrages d’éléments avec des animations fluides et assez originales. Le site

ClueTip
Je vous en parle ici
Un ToolTip évolué et configurable. Le site

—————————————————————————
Images

ColorBox
Je vous en parle ici
Certainement l’une des meilleures lighbox en jQuery à mes yeux. Le site

maxImage
Je vous en parle ici
Un plugin qui permet de redimensionner des images ciblées avec une largeur max selon le navigateur utilisé, leur ratio, et quelques caractéristiques simples. Le site

JLoupe
Je vous en parle ici
Création d’un effet de loupe sur les images. Le site

JQuery Infinite Carousel
Je vous en parle ici
Un effet de Carrousel pour vos images en jQuery. Le site

AnythingSlider
Je vous en parle ici
Un slideShow pour vos images en jQuery. Complet et configurable. Le site

YoxView
Je vous en parle ici
Une lightbox améliorée. Le site

jqFancyTransitions
Je vous en parle ici
Un slide show avec des transitions d’images originales. Le site

CropZoom
Je vous en parle ici
Plugin impressionnant de manipulation d’image, utilisant jQuery UI. Le site

—————————————————————————
Réseaux communautaires / Outils API

jTwitter
Je vous en parle ici
Un plugin JQuery qui va vous permettre de récupérer facilement des informations issues de Twitter. Ce plugin va chercher les informations grâce à l’API fournie par Twitter et au format json, puis les récupère afin que vous les traitiez. Le site

gMap
Je vous en parle ici
Améliore et facilite l’utilisation de l’API google map, en utilisant jQuery. Le site

gComplete
Je vous en parle ici
Un plugin qui va vous permettre d’utiliser la complétion de l’API Google avec jQuery et en quelques lignes. Le site

jSocial
Je vous en parle ici
Un plugin jQuery simple et adapté pour avoir les icônes et les liens vers les sites de réseaux sociaux en un clin d’œil sur son blog ou site. Le site

—————————————————————————
Bonus

jQuery 1.4 API Cheat Sheet
Je vous en parle ici
Un tour complet en un coup d’œil de l’API jQuery 1.4. Le site

Laissez moi des petits commentaires si ça vous a été utile (ou pas)

Haut de page

jqIsoText – Plugin jQuery – Effet de texte isométrique

1 vote

Par LudiKreation le 02/05/2010 à 11:37

Un petit billet pour vous présenter un plugin jQuery : jqIsoText. C’est un plugin qui va permettre de faire un effet pseudo-isométrique sur un texte. J’avoue que je ne vous présente pas le plugin le plus utile qui soit, d’ailleurs je n’en trouve pas encore l’utilité, mais il a le mérite d’exister et peut être qu’il vous servira.

jqisotext jquery

Il a aussi l’avantage d’être très simple d’utilisation.

Pour obtenir le résultat par défaut :

voici le code :

$('.default').jqIsoText();

vous l’aurez compris, il faut dans ce cas assigner la classe css « default » au texte cible.

Pour un résultat type vague :

voici le code :

$('.split').jqIsoText({ split:'yes' });

Et pour un résultat inversé :
jqisotext jquery plugin
voici le code :

$('.big').jqIsoText({ fromSize: 50, toSize: 10 });

Si vous voulez en découvrir plus sur ce plugin, c’est par là : http://workshop.rs/projects/jqisotext/

Articles qui peuvent vous intéresser :

Haut de page

YoxView – Plugin jQuery – Une lightbox améliorée

2 votes

Par LudiKreation le 25/04/2010 à 11:43

Pour ce billet, je vais vous présenter un plugin jQuery (une fois n’est pas coutume), et peut être vous aider à trouver un plugin qui répond à vos besoins.

yoxview-plugin-jquery

Ce plugin se nomme YoxView (j’aime bien le logo) et est une version améliorée de la lightbox 2. Cela reste toujours un visionneur d’images avec effets, mais avec quelques différences qui le fera peut être préférer à d’autres.

yoxview-plugin-jquery-2

Présentation :

- Il possède des plugins (un plugin avec des plugins, oui) pour le lier avec picasa ou flickr
- L’image cliquée s’agrandit avec un effet fluide.
- Les vidéos sont supportées
- Les images sont chargées en arrière plan
- Totalement configurable
- Création de groupe d’images
- Des boutons dans plusieurs langues différentes
- Un effet slideshow automatique
- Valide sur la majorité des navigateurs
- etc…

Pour découvrir YoxView c’est par là : http://www.yoxigen.com/yoxview/Default.aspx

Articles qui peuvent vous intéresser :

Haut de page

Quicksand – Plugin jQuery – Trie et filtre avec effets d’animations

6 votes

Par LudiKreation le 11/04/2010 à 01:36

Me revoilà avec la présentation d’un autre plugin jQuery. J’ai trouvé l’effet peu commun et assez agréable à voir. Je vous fait découvrir Quicksand un plugin jQuery qui va vous permettre d’agrémenter vos tries ou filtrages d’éléments avec des animations fluides et assez originales.

quicksand

Par exemple, pour une utilisation simple, vous allez procéder ainsi :

Pour le js

$('#source').quicksand( $('#destination li') );

pour le html

<ul id="source">
<li data-id="iphone">iPhone OS</li>
<li data-id="android">Android</li>
<li data-id="winmo">Windows Mobile</li>
</ul>

<ul id="destination" class="hidden">
<li data-id="macosx">Mac OS X</li>
<li data-id="macos9">Mac OS 9</li>
<li data-id="iphone">iPhone OS</li>
</ul>

Ce qui va remplacer une collection d’éléments par une autre.

A savoir que l’attribut data-id est valide html5, il existe d’autres méthodes si vous utilisez un autre doctype.

Je vous laisse découvrir les exemples, qui vous donnent une idée de toutes les utilisations possibles et vous renvois vers la documentation pour en apprendre d’avantage sur ce plugin jQuery.

Comme toujours, si vous avez des questions, n’hésitez pas à les laisser à la suite de ce billet

Haut de page

jqFancyTransitions – Plugin jQuery – Belles transitions

7 votes

Par LudiKreation le 29/03/2010 à 20:01

Me revoilà avec une découverte jQuery, un autre plugin lié à la manipulation d’images. Cette fois, un slide show avec des transitions d’images originales, j’ai beaucoup apprécié les effets.

transition-jquery

Vous allez pouvoir avoir sur votre site une galerie d’images avec diverses transitions.

L’utilisation s’effectue ainsi :

On va chercher nos librairies jquery + jqFancyTransitions

On crée notre bloc, qui contiendra notre galerie d’images

Entre les balises head, on insère le javascript qui réalisera le slideshow avec nos éléments

Et le tour est joué !

A savoir qu’il y a plusieurs options disponibles :

effect: '', // wave, zipper, curtain
width: 500, // width of panel
height: 332, // height of panel
strips: 20, // number of strips
delay: 5000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false // prev and next navigation buttons
links: false // show images as links

Et depuis la version 1.7, vous pouvez ajouter des urls aux images :

Pour plus d’informations et pour une démo : le site du plugin jqFancyTransitions

Bon code

Haut de page

Informations

Abonnement

Participer

Membres