Fullscreen Gallery with Thumbnail Flip

Codrops just shared a tutorial to create a fullscreen gallery with jQuery. The idea is to have a thumbnail of the currently shown fullscreen image on the side that flips when navigating through the images. The big image will slide up or down depending where we are navigating to. We will add navigation controls for the mousewheel and for keys. The thumbnail will have a zoom and and a fullscreen option, making the image in the background appear in fullscreen mode or as a complete image, resized to fit in the page.

View Demo Source Website & Download

Treesaver : A JavaScript Framework for Creating Magazine-Style Layouts

Treesaver is a JavaScript framework for creating magazine-style layouts that dynamically adapt to a wide variety of browsers and devices. Designers use standards-compliant HTML and CSS for both content and design, no JavaScript programming is required.

Key features and aspects:

Fast and compact: The JavaScript is under 25K gzipped (important for mobile).
Highly compatible: Works with most modern browsers, and degrades gracefully for older browsers (or those with JavaScript disabled).
Liberally licensed: Dual-licensed as MIT and GPL.

What Treesaver is not

Complete: The framework is still quite immature. There are still a lot of bugs that need to be fixed.
WYSIWYG: Treesaver is not designed to provide designers with the ability to create pixel-perfect layouts — quite the opposite in fact. Treesaver is designed to give designers the ability to create general design guidelines, which are then used to quickly construct a layout appropriate to the current browser and device.
Suited for all content: Treesaver currently works best with simply-formatted text and images. Complex tables, videos, and JavaScript widgets might work, or they might not. Once again, the framework is not yet complete.

Source Website

Isotope: An Exquisite jQuery Plugin for Magical Layouts

Isotope: An exquisite jQuery plugin for magical layouts

Features

Layout modes: Intelligent, dynamic layouts that can’t be achieved with CSS alone.
Filtering: Hide and reveal item elements easily with jQuery selectors.
Sorting: Re-order item elements with sorting. Sorting data can be extracted from just about anything.
Interoperability: features can be utilized together for a cohesive experience.
Progressive enhancement: Isotope’s animation engine takes advantage of the best browser features when available — CSS transitions and transforms, GPU acceleration — but will also fall back to JavaScript animation for lesser browsers.

View Demo & Download

CSS3 PIE: CSS3 decorations for IE

PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.

CSS3 promises to do away with all that! But as we all know, due to Internet Explorer’s lack of support for any of these features, we must be patient and refrain from using them, and make do with the same old tedious techniques for the foreseeable future.

PIE stands for Progressive Internet Explorer. It is an IE attached behavior which, when applied to an element, allows IE to recognize and display a number of CSS3 properties.

View Demo & Download

ZEN Audio Player : HTML5, CSS3 Audio Player

ZEN Audio Player is a single-song HTML5 Audio Player, powered by jPlayer, styled and mostly animated with CSS3.

Warning: This Audio Player is just a demo. It works more or less in Firefox4, Chrome, Safari, Opera, iOS, but there are some differences in the visuals. Also other known issues are:

Chrome on Windows has a known box-shadow bug where the circles don’t get cut off, no panic, should already be fixed in the nightly.
Opera starts to rotate funky after the first round, no idea why.
On iOS the many gradients and box-shadows make the transition slow. It might would need some simpler styling.
Plus there is no proper fallback for older browsers. A Modernizr and Flash combo should do it.

View Demo & Download

3D Wall Gallery using jQuery

Codrops want to share their latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.

For seeing the 3D effect, please try the demo in Safari.

Summarized, you can do the following things in this gallery:

Hover an image to see a description
Slide through the images using the jQuery UI Slider at the top
Use the mouse wheel to scroll through the images
Use the thumbnail previewer at the bottom to choose an image
Use the hash anchor for the image in the URL to get to it directly
Click on an image to slide it to the left (notice the hash anchor in the URL)
Turn it into a 3D wall when scrolling/sliding (Safari users)
Flipping the perspective when changing the slide/scroll direction (Safari users)

View Demo Source Website & Download

Art Project powered by Google

Explore museums from around the world, discover and view hundreds of artworks at incredible zoom levels, and even create and share your own collection of masterpieces.

How do I get started?

Simply select a museum from the homepage and then either chose ‘Explore the museum’ or ‘View Artwork’. Once you are in the main site use the drop-down menus or the side info bar to navigate between artworks and museums. Finally create and share your own collections online.

Source Website

Cutie – 20 Free High Quality Web Icons

“Cutie” is an icon set cute as a pie shared by Hongkiat. It consists of the most commonly used web icons, designed with one intention- to bring attention and playfulness to your websites, blogs, applications or software. The icons are designed with bright, warm colors, curvy lines and great attention to details.

“Cutie” consists of 20 icons, they come in the following sizes in PNG file format: 48×48, 64×64, 128×128, 256×256 and 512×512. Vector files (AI) of the icons are also included.

Continue Reading →

Twitter API and jQuery Showcase: Display your Followers or Friends

Codrops created this little “widget” using Twitter API, jQuery and PHP.

Some of the features are:

You can get your most recent 100 followers or friends
Followers or friends are shown in sets of 25 per widget page
The images of the users are preloaded (unlike in Twitter)
You can navigate through the set
You can refresh the entire set
More information on the user can be seen using a tooltip when hovering over his picture

You can configure and use this in your website to show your followers or friends with some interesting information about them (name, number of followers, number of friends).

A reason why 100 followers or friends are loaded in the beginning is the restriction the Twitter API is giving in the number of results per request. So, in order not to make several requests which would take quite some time, I just get 100. However, you can always click the link to the entire list in the end of the pagination.

The tooltip is created using qTip.

Demo & Download

AnythingSlider jQuery Plugin

AnythingSlider is an really “full featured” slider that could be widely useful.

FEATURES

Slides are HTML Content (can be anything)
Next Slide / Previous Slide Arrows
Navigation tabs are built and added dynamically (any number of slides)
Optional custom function for formatting navigation text
Auto-playing (optional feature, can start playing or stopped)
Each slide has a hashtag (can link directly to specific slides)
Infinite/Continuous sliding (always slides in the direction you are going, even at “last” slide)
Multiple sliders allowable per-page (hashtags only work on first)
Pauses autoPlay on hover (option)
Link to specific slides from static text link

Demo & Download

Page 65 of 75« First Prev «...10 20 30...63 646566 67...70...» Next Last »

What Treesaver is not

Features

How do I get started?

FEATURES

Thank you