Multiple select with checkboxes and jQuery Updated 17 April 2012 A recent project that we worked on required a <select> element that allowed multiple selections. An example is shown below: The advantages This allows more than one option to be selected if the user holds down the modifier key (the CTRL key in Windows) whilst making their selection. The disadvantages However, there did seem to be a couple of disadvantages. The solution Replacing the select element with checkboxes seemed like the obvious choice, but this would take up more space on the screen and potentially look messy. First of all we changed the select element into a series of checkboxes, wrapped in a div with an appropriate class name: Next we apply some CSS styling to give the desired effect: The final touch We can extend this idea using jQuery to highlight the selections. We can then apply the functionality to any group of checkboxes inside a container with the classname “multiselect” Don’t forget you need to include the jQuery library too: Here’s the final results:
43 Brilliant Free jQuery Image Gallery/Slider Plugins (And 14 Tutorials to Make Your Own) jQuery image galleries (also known as homepage sliders, slideshows or image carousels) have become more and more common on websites since the inception of jQuery in 2006. Designers and Photographers are especially attracted to them because they allow you to present many beautiful images in an interesting way. You can easily load up multiple images in the carousel and present them in a single position on your site without taking up too much room. However, there are several issues with using jQuery Image Gallery/Sliders that you should be aware of before you jump the gun and add one to your homepage. The Problem with jQuery Image Sliders jQuery sliders can be great for certain types of websites, but disastrous for others if you want it to rank in Google. There has also been a lot of discussion about how image sliders can actually lower conversion rates for B2B sites. So why do we keep using them? Elements of a Brilliant jQuery Image Slider Highly Flexible and Customizable. 1. 2. 3. 4. 6.
jQuery 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. Gamma Gallery uses David David DeSandro’s Masonry in a fluid mode where column numbers are defined depending on the grid container sizes. Inspired by Picturefill from Scott Jehl, the responsive images approach that mimics the picture element, we’ve come up with the following HTML structure for defining different image sizes: Some things we are using in Gamma:
Un Infinite slideshow en quelques lignes de jQuery - Tutoriels Un Slideshow sur une page d’accueil, c’est joli, c’est à la mode, mais c’est souvent lourd à intégrer. Il vous faudra des compétences certaines en jQuery, ou utiliser des plugins déjà prêts. Aujourd’hui je vous propose un tutoriel pour créer un infinite slideshow en quelques lignes de code. Je vous ai promis, via Twitter, un « dossier-tutoriel » sur la création d’un slideshow de A à Z avec quelques options sympa. Cet article ne fait pas partie du dossier, il n’a pas grand chose à voir, il s’agit simplement de vous présenter une solution enfantine avec une petite dose de HTML, CSS et jQuery. L’effet infinite Cet effet donne l’impression que votre slideshow ne se termine jamais, il tourne en boucle indéfiniment sans jamais revenir en arrière. À chaque fois qu’une image vient d’être vue et laisse place à l’image suivante, elle est placée en fin de liste afin de créer une boucle sans fin. La structure de base Une division contenant une liste d’images suffira pour notre tutoriel. Exemple :
Effets Rollover l'aide de :hover Pour tout effet de rollover (c'est-à-dire de changement d'aspect d'un élément au survol de la souris), la pseudo-classe CSS à utiliser est :hover. On fait tout avec ça : changements d'apparence de texte, de couleur de fond, d'apparition (ou de disparition) d'image, de zoom d'image, etc. Enfin, en théorie... Car hélas MSIE n'implémente cette propriété qu'à partir de sa version 7 pour autre chose que des liens. Ce tutoriel va donc passer en revue différentes options les plus recherchées et quelques petites choses plus "exotiques" en matière de rollover. N'hésitez pas à nous faire part de votre avis sur cet article : 2 commentaires Article lu 18702 fois. Le B.A-BA du langage CSS : le lien qui change d'apparence au survol de la souris. <a href="toto.html">Le Site de Toto</a> Par défaut, les liens sont en bleu soulignés et restent tels quels au passage de la souris. Bien évidemment les choix de couleurs sont immenses et text-decoration peut prendre d'autres valeurs. Voir l'exemple ! Voir l'exemple !
Cycle2 Overview Cycle2 is a versatile slideshow plugin for jQuery built around ease-of-use. It supports a declarative initialization style that allows full customization without any scripting. Simply include the plugin, declare your markup, and Cycle2 does the rest. Highlights: Supports all browsers Declarative: no scripting needed! How it Works It's very simple really, even your grandmother could use it. Include jQuery and the Cycle2 plugin on your page. Need more details? What's that you say? Responsive Donations Donations are a great way to say "Thank you, malsup". Go ahead, click the button! Please support my open source work while learning from the masters at frontendmasters.com. If you're looking for a jQuery Responsive 'slider', and used to love @malsup's Cycle, go have a look at Cycle2.