Blueberry - A simple, fluid, responsive jQuery image slider.
What is Blueberry? Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts. A brief history With the popularity of smart phones and tablet devices responsive/fluid web layouts have become an important part of modern web design. Working on a new project I decided to use the 1140px grid from cssgrid.net. So, I decided to start writing a basic plugin with the aim of making it suitable for responsive web design. The goal The hope is that I can at least nudge developers of more popular slider plugins to think about responsive web design, and make their plugins compatible. In the mean time, I aim to continue to develop this plugin (time permitting), squashing some of the bugs and implementing more advanced features. Check out the contribute section to find out how you can help. Frequently Asked Questions Why is it called Blueberry? Help make Blueberry better Known issues Wishlist Buy me a beer
Responsive Navigation Patterns
Update: I’ve also written about complex navigation patterns for responsive design. Top and left navigations are typical on large screens, but lack of screen real estate on small screens makes for an interesting challenge. As responsive design becomes more popular, it’s worth looking at the various ways of handling navigation for small screen sizes. Mobile web navigation must strike a balance between quick access to a site’s information and unobtrusiveness. Here’s some of the more popular techniques for handling navigation in responsive designs: There are of course advantages and disadvantages of each method and definitely some things to look out for when choosing what method’s right for your project. Top Nav or “Do Nothing” Approach One of the easiest-to-implement solutions for navigation is to simply keep it at the top. Pros Cons Height issues- Height matters in mobile. Responsive navigation breaking to multiple lines on small screens In the Wild Resources The Select Menu The Toggle In The Wild
AviaSlider - a unique jQuery Image slideshow plugin!
Features of the Avia Image Slider 8 unique transition effects Lots of easy to set options to create your own effects Included Image preloader Autoplay that stops on user interaction Valid HTML5 and CSS 3 Markup Packed version only weights 8kb Supports linked images already prepared to work with prettyPhoto Lightbox works with jQuery 1.32 and higher Browser Support Internet Explorer 6 and higher Safari 3 and higher Firefox 2 and higher Opera 10 and higher Google Chrome 3 and higher Checks for last 3 Browsers performed on Mac & Win Download & Docs
ResponsiveSlides.js · Responsive jQuery Slider & Slideshow
Page Description Diagrams
The page description diagram is a design artifact developed by Dan Brown to take design out of wireframes by describing content areas of the page. The approach provides functional specifications and interaction requirements, and lays out blocks of content without limiting the designer's ability to make decisions in the visual design. They are not necessarily meant to replace wireframes, but may be used in conjunction with them Definitions The excerpt below is from Dan Brown's Boxes and Arrows article which describes the use of page description diagrams. "In a page description diagram, the content areas of the page are described in prose, as in a functional specification. With this approach, the diagram represented the two main issues: priority and content. Source: "Where the Wireframes Are: Special Deliverable #3.", Dan Brown. See Also
jQuery Timeline 0.9.4 - Dando vida al tiempo
Donec semper quam scelerisque tortor dictum gravida. In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam ultrices mauris, eu consequat purus metus eu velit. Proin metus odio, aliquam eget molestie nec, gravida ut sapien. Donec semper quam scelerisque tortor dictum gravida.
Rhinoslider: The most flexible jQuery slider/slideshow
Slideshow with jmpress.js
Today we will create a slideshow using jmpress.js. The jQuery plugin that is based on impress.js will allow us to use some interesting 3D effects for the slides. View demo Download source You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The icons used in the demo is by Artcore Illustration and they are licensed under theCreative Commons BY-NC-ND 3.0 license. So, let’s start! The Markup We will have a main container which is a section with the class jms-slideshow. Let’s take care of the style. The CSS Since we want to make the slideshow responsive, we will give the main container a percentage width, with some min and max values: The next wrapper is dynamically added, and this will be the visible slideshow wrapper: The background color classes will be applied to the previous wrapper. The steps will have the following style: Inactive steps will have 0 opacity. The inner parts of the slides will have the following style:
Flow Slider - Home - Flow Slider - jQuery plugin
CSS3 Responsive Slider / Carousel Using Radio Buttons - noJS
Select catcher Created by Ian Hansson (@teapoted) Art from Brendan Zabarauskas (@bjzaba_). Icons from the iconSweets set. Browser Support: Best In Test: Firefox (transition performance) Full Support: Chrome, Firefox, Opera, Safari (latest versions of all browsers) Partial Support: IE9 (Functional, but does not support transitions) *No JavaScript Functionality (1 compatability fix though) iOS devices don't handle labels properly. You can view this page without the js iOS fix here. How Does It Work? The actual slider is much like any JavaScript slider. To save our input we are using radio buttons. We put the radio buttons at the top so when they are :checked we can use a general sibling selectors (~) to change our slider. That is all the essential CSS, the other gaff is just styling and animation. Created by Ian Hansson (@teapoted), Feb 2012.
