background preloader

Elastislide - A Responsive jQuery Carousel Plugin

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 Related:  JS/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. 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:

qTranslate and Woocommerce - it works | SomewhereWarm During the last few years, some of the most weird experiments carried out in the depths of the SW lab have involved WordPress, pizza and a lot of beer. In retrospect, I can say that most of these were failed attempts to make WP work in ways it was never meant for, but still, it was fun. The release of WP3 has been a milestone for the WordPress community – myself included. Custom post types and multi-site opened the way for great things and made WordPress a more ‘serious’ CMS, worth considering for more complex projects than just blogs and news sites. Despite the advances, WP has left developers with something to desire for quite a while: Multi-language support has never been among the strengths of the platform and, no doubt about it, e-commerce hasn’t been one either. Until recently, it may have sounded like a joke but today, setting up a multi-language e-commerce website based on WP is a matter worth looking into – at least from a technical perspective. Cheers, Manos

How to create an animated sticky header, with CSS3 and jQuery Trends come and trends go. The ones that stick around the longest do so because they solve a particular problem. A trend that’s popular right now for that very reason, is sticky elements; elements that behave normally until we scroll, and then maintain their presence on the page somehow. The trend started with sidebars, but where it’s really grown in popularity is headers. In this tutorial we’ll create a header that sticks to the top of the viewport, but so that it doesn’t interfere with the content, we’re going to minimize it when the user scrolls down the page. Here’s what it’s going to look like when we’re done: If you’d like to follow along with the code, you can download it here. The HTML The HTML for our example is really simple, all we need is an h1 inside a header. <header><h1>Sticky Header</h1></header><img src="large-image.jpg" width="782" height="2000" alt="Big Image" /> The jQuery CSS transitions are the best way of handling the animation portion of our sticky header. The CSS

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

Woocommerce slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file.

Circle Hover Effects with CSS Transitions A tutorial about how to create different interesting hover effects on circles with CSS transitions and 3D rotations. View demo Download source 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. 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. Now, let’s make some hover effects! The CSS Example 1 And that’s the first example!

30 Top Rated WordPress Sidebar Widgets What is your favorite sidebar widget for WordPress? Sidebar widgets are an important part of most blogs. The majority of all WordPress blogs have sidebars and contain at least one widget. The widgets you choose to use are, of course, a matter of opinion and preference, but today I want to share what “the majority” feel are the best. So, I present you with the 30 top rated WordPress sidebar widgets, that meet the following criteria. The Criteria I’m sure you’re wondering how I came up with this list. First, let me just say that this is far from an all-inclusive list of the top rated WordPress widgets. Here’s the criteria that chose to use for this specific list. Top Rated WordPress Sidebar Widgets A Few of My Favorites I don’t use a lot of widgets because I like to keep my blog sidebar clean, but I still want to share a few of my personal favorites with you; you may want to check some of these out as well. 1. Ad Squares lets you display 125×125 ads in your sidebar. 2. 3. 4. It’s Your Turn

10 handy jQuery mobile tips and snippets to get you started As with any new technology, getting started is often the hardest part. With this frustration in mind, we have put together some of my handiest tips, tricks and code snippets related to the jQuery Mobile library. Because this is not a full-on primer for using the library, we will skip over some of the things that become rather obvious as you get started and instead get straight to the items that become rather frustrating or troublesome. Also be sure to let us know in the comments which snippets you found useful and of any others that you know of that can be useful. 1. A full basic page I find myself needing the full mark-up for a basic page over and over again. <! 2. When I got started using this awesome extension to jQuery, I immediately found myself wanting to modify things on the page before the mobile plug-in was triggered. As it turns out, the recommended solution is to simply put traditional jQuery calls before the reference that loads the mobile plug-in. 3. 4. For list items: 5. 6. 7.

WOW Slider : jQuery Image Slider & Gallery Personnaliser son administration Wordpress sans plugin Dans la continuité de mon article pour rendre son WordPress plus social sans plugin, je vais vous présenter aujourd’hui différents snippets qui vous permettront de personnaliser votre administration WordPress rapidement et sans prise de tête. Cela pourra notamment vous être utile si vous gérez un site communautaire avec des utilisateurs qui doivent se connecter à l’admin WP. La barre d’administration Changer le logo dans la barre d’administration Pour remplacer le petit logo WordPress “W” en haut à gauche de votre administration par le votre, voici le code à ajouter au functions.php : Il faudra remplacer l’image custom-logo.gif par le logo de votre site et veiller à respecter la taille (28px max de hauteur). Ajouter des liens personnalisés dans la barre d’administration Toujours dans le fichier functions.php, insérer ce bout de code que vous pourrez personnaliser comme bon vous semble : Supprimer la barre d’administration à tous sauf aux administrateurs 1. show_admin_bar(false); 2. What else?

jQuery One Page Navigation Plugin Sep 26, 2010 When appropriate, I am a fan of the one-page sites. I really like the ones that add smooth scrolling and highlight the navigation depending upon which part of the page you have scrolled to. Here are a few examples: Brizk Design and Crush + Lovely. I finally have a freelance project where a one-page site makes sense, so I needed to write the JavaScript to make the navigation work how I wanted. I wanted the page to scroll smoothly when the navigation was clicked, so I used the jQuery ScrollTo plugin. If you want to skip ahead, you can check out the demo and download the plugin from GitHub. The Markup I started with an unordered list for the navigation and a bunch of sections: The JavaScript Then, I added jQuery, the ScrollTo plugin, and my plugin to the page: Finally, I just need to call my plugin on the navigation: $(document).ready(function() { $('#nav').onePageNav();}); Options There are a few options for this plugin: And that’s it.

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.

Related: