background preloader

Blueberry - Un semplice, fluido, reattivo dispositivo di scorrimento immagine jQuery.

Blueberry - Un semplice, fluido, reattivo dispositivo di scorrimento immagine jQuery.
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

TouchTouch – A Touch Optimized Gallery Plugin Martin Angelov I want to share a little experiment with Tutorialzine readers – TouchTouch. It is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. It works on all major browsers (except for IE7 and below) and most importantly is specifically designed with iOS and Android in mind. Highlights Smooth CSS3 animations and transitions;A responsive CSS interface that fills the screen and responds to changes in device orientation;Preloads photos only when they are needed;Supports swiping through photos;Displays onscreen arrows and listens for arrow key presses on desktop browsers; TouchTouch relies entirely on CSS3 for animations, which means that transitions are extra smooth on mobile devices (naturally, this also means that you won’t see any on older browsers). On the desktop, you get that same responsive interface and smooth animations. jQuery touch-optimized gallery How to use Using it is simple. $(function(){ $('#thumbs a').touchTouch(); });

100+Useful jQuery Image Slideshow and Content Slider Free jQuery plugin for image slideshow and content slider are now become very popular for images gallery and css slider you can see them in thousand of blogs and websites. It is really useful for design blog to show the featured contents and i also think it is a great way to attract the visitors which also gives a beautiful look to blogs. It is really useful example and tutorials very detailed image gallery with jquery. Using jQuery you can easily create some css gallery image slider, versatile content sliders. One of those effects that designers use it widely is jQuery image slideshow or image gallery which can be implemented easily by lots of free jQuery slideshow plugins and tutorials featured here.The massive popularity of jQuery has attracted many talented developers that are constantly releasing all kinds of amazing and powerful jQuery plugins,. The plugin using CSS3 and jQuery coding have new feature support with mobile device as well. Demo Download More Info Demo More Info Demo

Coin Slider: Image Slider with Unique Effects « Workshop After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn’t find that somebody already implement that I create Coin Slider. Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning. Basically it’s a latest (and improved) version of jqFancyTransitions but with new ‘fancy’ transitions effects. jqFancyTransitions slice your images in stripes, while Coin Slider slice them in squares. While I was working on this I felt like I’m on college again. For rain effect I spent few rainy hours to built it and that’s why I gave him that name. How to use Download jQuery, Coin Slider javascript file and CSS file and include them on your page: Add slider content and create one div with an id and put images and image descriptions, similar to: At the end all you have to do is to call Coin Slider: Example List of all options Notes

CSS3 Slider Responsive / Carosello mediante pulsanti di opzione 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.

Related: