WOW Slider : jQuery Image Slider & Gallery jQuery Infinite Carousel Plugin The Infinite Carousel is a jQuery plugin that allows you to showcase any number of images and videos in a carousel-like fashion. Unlike some other carousels, the Infinite Carousel displays items in a continuous loop no matter how you navigate. Try out the demos below to see how versatile the Infinite Carousel is. Download Download jquery.infinitecarousel.zip (version 3.0.3 – January 24, 2013) What’s So Great About this Plugin? It’s just 11 Kb compressedDisplays image and videosCaptions and linksNew thumbnail optionsCool new circular ring timerKeyboard navigationCallback functionsNo browser lag caused by moving between tabsShortest path algorithm finds the shortest distance between images when using thumbnails to navigate.Works in all major browsersReusable on multiple containersCompletely free for commercial and non-commercial use (see license in plugin header) Demos Notes Options Instantiating $(‘#carousel’).infiniteCarousel({}); CSS Classes
Elastislide - A Responsive jQuery Carousel Plugin Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images. View demo Download source With the responsive awakening in web design it becomes important to not only take care of the visual part of a website but also of the functionality. In a carousel, one could think that simply making its container “shorter” will solve the problem on smaller screens, but in some cases (e.g. when we have bigger images) it might be reasonable to resize the items as well. Elastislide uses the jQuery++ for the swipe events on touch devices. The beautiful images are by talented Sherman Geronimo-Tan and they are licensed under Creative Commons Attribution 2.0 Generic (CC BY 2.0). The HTML Structure When using the plugin, you’ll simply have to apply it to an unordered list with images (optionally with anchors). Use your preferred ID and call the plugin like this: Options Demos
Gamma Gallery: A Responsive Image Gallery Experiment Gamma Gallery is an experimental responsive image gallery that attempts to provide an adjustable responsive images approach taking its grid layout and the full slideshow view into account. View demo Download source Creating a truly responsive image gallery can be a very tricky and difficult thing. There are so many factors to consider like the layout and the features, and so many choices to make when it comes to delivering a good viewing experience for every device. Gamma Gallery is an attempt to create an image gallery that uses a similar responsive images approach to the proposed picture element. Focused on providing suitable image sizes for both, the fluid grid thumbnails and the full image view, the selection of images also depends on container dimensions and not solely on the window size. Gamma Gallery uses David David DeSandro’s Masonry in a fluid mode where column numbers are defined depending on the grid container sizes. Some things we are using in Gamma:
Circle Hover Effects with CSS Transitions From our sponsor: Get started on your Squarespace website with a free trial In today’s tutorial we’ll experiment with hover effects on circles. Since we have the border radius property, we can create circular shapes and they have been appearing more often as design elements in websites. One use that I especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. We will omit vendor prefixes in this tutorial. So, let’s get started! The HTML For most of the examples, we’ll be using the following structure: <ul class="ch-grid"><li><div class="ch-item ch-img-1"><div class="ch-info"><h3>Use what you have</h3><p>by Angela Duncan <a href=" on Dribbble</a></p></div></div></li><li><div class="ch-item ch-img-2"><div class="ch-info"><h3>Common Causes of Stains</h3><p>by Antonio F. The CSS Example 1
JQuery Cycle Plugin Check out Cycle2, the latest in the Cycle line of slideshows. The jQuery Cycle Plugin is a slideshow plugin that supports many different types of transition effects. It supports pause-on-hover, auto-stop, auto-fit, before/after callbacks, click triggers and much more. Images are used in these demos because they look cool, but slideshows are not limited to images. Use the Effects Browser page to preview the available effects. For more about options, see the Options Reference page. Frequently Asked Questions Special thanks to Torsten Baldes, Matt Oakes, and Ben Sterling for the many ideas that got me started on writing Cycle in 2007.
Tutoriel Wordpress: mettre un mot de passe sur son blog - dubuzz.com Il peut parfois être utile de bloquer l’accès à son blog WordPress par un mot de passe. vous travaillez sur une nouvelle version de votre blog, et il est préférable de le cacher aux yeux de Google – et de tout le monde – tant qu’il n’est pas terminé à 100%vous vous servez d’un blog comme d’un logiciel de gestion de projet – ce qui est une excellente idée que j’utilise souvent – et vous devez gérer l’accès et les droits de publication de plusieurs personnes concernées par le projetvous avez un blog que vous avez envie de réserver à vos amis, vos proches, vos clients, et vous n’avez aucune envie que ses contenus puissent être vus ou indexés par Google. Une sorte d’anti-Facebook en somme… 1-Trouver et installer le plug-in WordPress « Members ». Je présume que vous savez déjà comment installer un plug-in depuis WordPress. 2-Effectuer les réglages de base du plug-in « Members » Pour cela, allez dans « Réglages » et cliquez « Members » Les réglages de base du plug-in apparaissent. 5-Et voilà!
Raphaël—JavaScript Library définir largeur police en css ? Bonjour, Je reviens sur ce poste qui m'intéresse. Bon je n'ai pas trouvé de solution au problème et font-stretch ne semble toujours pas accepté par les différents navigateurs. Je me demande comment fait l'Equipe journal. Sur leur site internet ; j'ai l'impression que le dans les menus de navigation (pas celui de tout en haut de la page, ce qu'ils appellent top-part) mais les deux suivant: celui où on trouve la liste des sports, et le sous menu qui apparaît quand on clique sur un des sport; j'ai l'impression donc que les mots ont leur caractères plus étroits qu'ils ne devraient. Je me suis dit que ça devait venir de la font-family ou de l'espace entre les mots. Voici le code que j'ai récupéré parmi du HTML du site du zeros: Ce qui donne: J'ai tenté en modifiant la propriété "letter-spacing", bon ça colle mes lettres un peu plus, mais c'est pas l'effet que je cherchais.
2 effets CSS3 assez saisissants Je vais aujourd’hui vous montrer comment réaliser deux effets assez intéressants en CSS3. Le premier est une sorte de fade in / fade out et le deuxième est une lueur externe avec l’attribut box-shadow À ce jour, les transitions en css ne sont pas encore au point sur la plupart des navigateurs mais le fait d’utiliser ces effets ne perturbera en aucun cas la navigation dans votre site. Et pour les navigateurs sur lesquels elles marchent (Safari et Chrome) la navigation sera encore plus agréable. Voici les démos : Le fade in / fade out : La lueur externe : À présent, comment les réaliser… Je vais commencer par le fade in / fade out. et le code css correspondant : À présent la lueur externe : J’espère que cet article vous aura plu.
Les filtres CSS3 appliqués sur des images Dans cet article, nous allons nous intéresser à une excellente nouvelle fonctionnalité de CSS3 : les filtres. C'est une fonctionnalité qui peut être utilisée à la fois sur des éléments HTML et des images, mais qui a plus d'intérêt à être utilisée sur des images comme pour la création d'une galerie par exemple. En utilisant uniquement le CSS vous allez être capable de créer tous les effets suivants : greyscale ; blur ; saturate ; sepia ; hue rotate ; invert ; brightness ; contrast ; opacity. Pour utiliser un filtre c'est aussi simple que d'utiliser n'importe quelle autre propriété CSS. Comme la plupart des nouvelles fonctionnalités CSS3 vous avez besoin de préfixer la propriété. Actuellement les seuls navigateurs supportant cette fonctionnalité sont les navigateurs webkit à savoir Chrome et Safari. On ne sait pas encore si Internet Explorer 10 a prévu de supporter les filtres ; Firefox 17 ne les supporte pas. Cette propriété va convertir votre image en nuances de gris (noir et blanc). CSS Blur
Create a Thumbnail with Fading Caption Using jQuery Introduction Hi all, today we are going to learn to create another thumbnail effect with fading and transparent caption. It's simple and obviously I have running out of ideas in jQuery tutorial because this is similar to jQuery Thumbnail with Zooming Image and Fading caption. Before we begin, I have already made different effect for thumbnail, you can check it out: First of all, HTML. it's easy to understand, all your caption/description of the thumbnail should put inside the caption class. <div class="item"> <a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a> <div class="caption"> <a href="">Title</a> <p>Description</p> </div></div> <div class="item"><a href="#"><img src="image.gif" alt="title" title="" width="125" height="125"/></a><div class="caption"><a href="">Title</a><p>Description</p></div></div> I have put comment on each important CSS. 3. I have declared two variables called move and zoom. Conclusion Like this tutorials?