Today we want to share another 3D experiment with you: a gallery room in 3D. The idea is to create a realistic environment for an image exposition using CSS 3D transforms. Images are “hanged” along a wall which will have an end. Once the end of the wall is reached, a rotation will happen and we’ll be turned to the next wall whith more images. To give a real sensation of being in a room, we only have four walls and corners. Each image will have a little description tag with a small-sized font and when clicking on it, a larger version will appear from below.
Responsive Slideshow Photo Gallery Grid with Html5
The Responsive Slideshow Photo Gallery has a fluid / flexible / responsive layout. Basically the grid is added into a html page into a div of your chosing and it’s adapting based of that div’s width, the grid height is modified based on the number of thumbnails and if other elements are below the grid div they will be pushed down automatically (document flow). In the examples provided you can see a few ways in which you might use this grid, of course that other configurations are possible.
Pure OOP JavaScript code, no usage of jQuery or other libraries, in this way there will be no incompatibilities with HTML pages that might be using jQuery or other JavaScript libraries.
The Responsive Slideshow Photo Gallery is using the GPU (hardware acceleration) using HTML5 standards. The rendering speed and performance is impeccable on desktop computers and most importantly on mobile devices, the way it works it will try to use CSS3 and if this is not available it will down fall to CSS2 or CSS1 for older browsers like IE7 and IE8.
iPhone Style Dragging for Both Desktop and Mobile with jQuery
When we create stuff for the web now it’s important we remember that the web has spread from the trackpad and mouse to the touch screen. Sometimes this is hard to accomodate for, but it’s not that hard to create some awesome cross device friendly touch and drag events with HTML5 and some smart styling!
I’ve made a little plugin that lets you grab and drag your way through a bunch of pictures of album artwork, similar to you drag through objects on an iphone at the start screen. Check out the demo to get a feel for what we’re going to be creating. The plugin isn’t too difficult to understand and you can download the finished version above, but when I first designed it, it only worked with mouse drags.
Make Pretty Charts For Your App with jQuery and xCharts
Charts are a great visual aid when presenting data. You can’t build a professional admin panel without them. They are also tricky to set up. However, there is a new library that makes things easier – xCharts. Today, we are going to use it along with the daterange picker for Twitter Bootstrap, to build a pretty, AJAX-powered chart for your web application that fetches data from a MySQL table.
Fixed Table of Contents Dropdown Menu with jQuery
A fixed table of contents drop-down menu jQuery plugin.Just change the markup to add more depth to the menus. The script should automatically recognize deeper menus, as long as you have the corresponding sections in the content area.
If you want to go deeper than three levels, you’ll have to add some extra CSS to indent the menus. Just look for the part with “li li li” and adjust accordingly.
FastLinks : jQuery Load all content with ajax
FastLinks is a library which allows you to load the links on your website with ajax calls. With this library your website will load a lot faster. This library uses jQuery and the html5 history API. (The history api works in all browsers except IE, but the library works in all browsers. The only is that the url in the navigation bar updates in all browsers but IE). This plugin is tested in: IE7, IE8, IE9, Chrome 23, Firefox 15, Safari 5 and Opera 12.
ParamQuery Grid : jQuery Grid Plugin
ParamQuery grid is a lightweight jQuery grid plugin inspired by MS Excel and Google spreadsheet. It’s based upon jQueryUI Widget factory which is an excellent design pattern for UI controls with consistent API.
Features:
- Sorting
- Paging
- Resizable columns
- Resizable height and width
- Customizable theme
- Hiding / Showing columns
- Freeze any number of Columns like Excel
- Display any data source format like HTML, Array, XML, JSON, etc
- Can be used with any server side framework e.g. ASP.NET, MVC3, JSP, JSF, PHP, etc
- Virtual Scrolling and Rendering
- Inline Editing of cells
- Supports all the major browsers and has been tested in IE 6,7,8, Firefox, Chrome, Opera, etc
Dynamic Newsletter Signup Form with jQuery Animations & CSS3
The dynamic form effects will be handled in jQuery with some additional CSS3 properties as well. I haven’t connected any backend script into the form. But there are methods for situating a full registration form, such as MailChimp or even your own custom storage. This layout is a fantastic example of what can be accomplished using just a little bit of HTML5/CSS3 and JavaScript techniques.