Jquery.pep.js | kinetic drag for mobile & desktop. OwlCarousel, un carousel jQuery responsive et multi-fonctions. OwlCarousel est un plugin jQuery assez complet qui permet de mettre en place un carousel tactile, responsive et animé via CSS3, avec une fonctionnalité originale : pouvoir afficher un nombre de slides différent en fonction du support (desktop, tablette, smartphone).
Un carousel multi-fonctions OwlCarousel propose un slider à la fois tactile (touch), aggripable avec la souris (grab) et responsive, le tout accompagné d’une vingtaine d’options (durée d’animation, délai entre deux slides, fonctions de callback, etc). Léger et complet, le carousel fonctionne avec n’importe quel contenu HTML et peut également faire office de slideshow.
Un seul type de transition est disponible (slide) mais la particularité du plugin réside dans son paramétrage qui permet de définir le nombre de slides à afficher en fonction de la largeur de son conteneur. Ainsi, vous pouvez contrôler précisément le comportement du carousel, par exemple 5 slides sur desktop, 3 slides sur tablette et 1 slide sur smartphone. Tutoriel : Comment charger des scripts Javascript de manière asynchrone ? Vous n'aimez pas placer des inclusions de scripts JavaScript dans les footer de vos pages HTML ? Vous trouvez que ce n'est pas leur place et que cela complexifie la compréhension de la page ? Voici une alternative pour charger vos librairies JavaScript de manière asynchrone depuis le header de vos documents HTML. Cependant quand vous placez ces scripts dans le header de vos pages, votre site est lent car les fichiers Javascript sont chargés avant le reste de la page.
Voici une alternative qui se base sur la librairie Modernizr et qui permet de réaliser des chargements asynchrones de ressources sur tous les navigateurs du marché. Elle est simple à utiliser et fournit un mécanisme de callback pour permettre des traitements alternatifs en cas d'échec de chargement d'une des librairies.
<script type="text/javascript"> Modernizr.load([ { load: '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js', complete: function () { if ( ! Swipebox, une lightbox jQuery fullscreen et tactile. Swipebox est un plugin jQuery permettant de réaliser une superbe ligthbox fullscreen faisant également office de galerie d’images, compatible sur tablette et smartphone grâce à la technique du « swipe », méthode qui consite à faire glisser son doigt pour passer d’une slide à une autre. Lightbox et galerie photo intégrée Swipebox s’inscrit dans la modernité avec un affichage plein écran, responsive et tactile pour profiter au maximum de vos photos.
Le plugin met en avant 5 caractéristiques principales : le support des mouvements tactiles (« swipe », « tap »), la navigation au clavier via les flêches directionnelles, les transitions CSS3 avec un fallback jQuery pour les anciens navigateurs, le support des écrans Retina pour les icônes UI, et la personnalisation aisée en modifiant la feuille de style. L’animation entre les photos est unique ; il s’agit d’un effet de type « slide », effet qu’on retrouve sur la plupart des applications mobiles.
Mise en place de Swipebox. 10 ressources jQuery pour l'expérience utilisateur sur mobile - ressources-javascript. Le Blog Du Webdesign vous propose aujourd'hui 10 ressources pour unifier et améliorer l’expérience de vos visiteurs mobile. jQTouch jQtouch est une library pour jQuery qui permet de reproduire l'expérience d'une application iOS avec une appli web. Touch Gallery Voici une galerie d'images avec la même expérience que la galerie photos proposée par l'iPhone. HammerJS Cette library offre un support pour le multitouch dans vos applications web.
Mobiscroll Mobiscroll est une library reproduisant les différents selects de l'iPhone jQuery.pep.js Pep.js vous offrira un support pour créer des drag'n drop avec un petit effet cynétique Windows.js Windows vous permet de toujours garder l'utilisateur sur un ecran complet en hauteur. Adaptive Thumbnail Pile Effect Cette ressource tout à fait responsive vous permettra de faire des piles d'images pour vos galeries. jQuery Nested Cette ressource vous permettra de faire un mur d'images se repositionnant quand on redimensionne la fenêtre.
Imageloader Responsiveimg. Tooltipster, une tooltip jQuery moderne et flexible. Tooltipster est un plugin jQuery qui permet de mettre en place des infobulles, aussi appelées « tooltip », au rollover sur n’importe quel élément HTML. Facile à prendre en main, le script est moderne et flexible avec une interface totalement customisable. Une infobulle à base de CSS Le plugin génère des infobulles simples et élégantes dont le style est entièrement personnalisable via CSS (typographie, couleur, padding, ombres, etc) et met à disposition plusieurs paramètres de configuration : position de la tooltip par rapport à la souris, délai d’apparition, largeur automatique ou fixe, affichage et couleur de la flêche, placement « intelligent » pour éviter les collisions… etc. Plusieurs thèmes CSS sont disponibles pour skinner vos tooltips, que vous pouvez bien sûr modifier à votre convenance. Le contenu de l’infobulle peut provenir de différentes sources (en brut dans le JS, title d’un lien, ou encore appel AJAX) et il existe des fonctions de callback.
Mise en place d’une infobulle. Raphaël—JavaScript Library. Social, un plugin jQuery pour afficher vos réseaux sociaux en « overlay »