background preloader

Expanding Image Menu with jQuery

Expanding Image Menu with jQuery
In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. We will also slide in the colored version of the image, creating a neat […] View demoDownload source In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content area slide out when we click on them. The photography is by talented Robert Bejil, check out his awesome photos on his Flickr photostream. So, let’s get started! The Markup The HTML structure consists of a main container and an unordered list where each item is one of the columns. Let’s take a look at the style. The CSS We are going to stretch the container for the list over the page and hide the overflow. The overflow of the li elements is going to be hidden as well because our content inside is actually much bigger. The JavaScript

http://tympanus.net/codrops/2011/03/16/expanding-image-menu/

Related:  JqueryGeradores & Códigos

Elastic Image Slideshow with Thumbnail Preview Today we want to show you how to create a simple elastic slideshow with a thumbnail preview. The slideshow will adjust automatically to its surrounding container and we can navigate through the slides by using the thumbnail previewer or the autoplay slideshow option. View demo Download source To make this slideshow responsive, we will use a mixture of JavaScript and CSS techniques. The fabulous photography used in the demo is by Bartek Lurka and it is licensed under the Attribution-NonCommercial-NoDerivs 3.0 Unported License. jquery.mb.bgndGallery With this jQuery plugin you can make suggestive slide show of images as background of your page; the images will adapt their size to the window size fitting always at the best. You can either navigate the gallery with your keyboard or with a control panel displayed where you whant in the page. Help Pupunzi‘s development!

Quicksand Reorder and filter items with a nice shuffling animation. Home About I love Mac apps, especially for their attention to detail. CoreAnimation makes it so easy to create useful and eye-pleasing effects, like the one in this video. 40 Super-Neat JavaScript Plugins - Tuts+ Code Article The right combination of JavaScript plugins can turn a simple website into a fantastic one - all while requiring minimal work on your behalf. Today, we'll review forty of the most popular plugins available. If we missed some, let us know in the comments! Form Validation jQuery Validate

Fullscreen Background Image Slideshow with CSS3 Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We'll create different image transitions and also make a title appear using CSS animations. Portfolio Zoom Slider with jQuery In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin. The idea is to give the user the option to view details of […] View demoDownload source In this tutorial we are going to create some nice effects for a portfolio or similar website with jQuery. We will create a tiny slider and integrate it with the amazing Cloud Zoom plugin and the elegant Fancybox plugin.

30 Useful jQuery Filter and Sort Plugins By using jQuery filter and jQuery sort plugins you will be able to have a great control over the order, placement and organization of your page / or table elements. Further some of these plugins include drag-able controls making it possible to offer a more dynamic and user friendly design. Sorting and filtering is very useful if you have large datasets such as table views, however you can also use them for managing list views e.g. for a portfolio page. The Quicksand plugin found below is an example of this. This post has just been updated, all links checked.

Image Gallery You can easily put the scroller any position you like (top, bottom, left, right) and set the images to any dimensions. Customizable scroller movement. Here is a list of variables you can change in the FLA file: - verticalMenu - imageWidth & imageHeight - bigImageWidth & bigImageHeight - menuX & menuY - bigImageX & bigImageY - spacing - inColor & outColor & coloringSpeed - minScrollSpeed & maxScrollSpeed - scrollEaseIn & scrollEaseOut - preloaderSize - useRandomTransitions - showDescription - showDetailedInfo - useMirror You can specify the images and description text through the XML file. The images can have any dimensions, they are automatically resized.

Related: