In today’s tutorial we’ll show you how to create some cute looking photo strips and integrate Lightbox 2, one of the most popular and widely used lightbox scripts. The idea is to show some photo strips and make them navigable by scrolling with the mousewheel. When clicking on a picture we will show the larger version using jQuery Lightbox 2. We will also optimize it for touch devices.
app-UI : Creating interactive mobile applications in jQuery
app-UI is a collection of user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and jQuery, especially those targeting mobile devices. app-UI is a continual work in progress – it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications (http://www.phonegap.com). app-UI can easily be styled/customized using CSS.
Slide-in backgrounds with jQuery
In this tutorial I’ll give you a quick run down of how to go about creating this slide in effect.There are a few things we want to accomplish. The code I provide below is just a quick roundup of how this effect is accomplishable. I do plan to turn this into a plugin at a later date with a much wider breadth of applicability.
- Firstly we must generate the ‘slices’ in Javascript. This will be determined by screen width and will have to change as the user resizes their window.
- Next we need the slices to slide in. We can do this with animations, but we don’t want the animations to queue in such a way that it ruins the effect
- We want the slices to reset when another animation comes on top of it.
- The slices should be positioned absolutely so content can be placed on top if it.
MetroPanel – Navigator for Modern Sites with jQuery,Html5 & Ajax
MetroPanel is new navigator system for modern sites with following features
Features:
- Two Panel Position: left and right
- Unlimited Items
- Unlimited background
- AJAX + HTML5 smart load for SEO
- jQuery + CSS3 Animation Effects
- Auto Show or Auto Hide Panel
- Easy Deploy for Almost Sites
- Many Options for Custom
Zoom out share button with jQuery and CSS3
When it comes to attracting attention to yourself on the internet, nothing does a better job than share buttons. Whether its twitter or google plus, social media probably has a huge impact on your traffic. I set out to create an attention grabbing way to display buttons, and came up with this: a circle that expands revealing a bunch of share buttons on hover. Read on to learn out how to do it, and check out the demo!
Carousel Photo slider with Php and jQuery
To continue with our experiment series, our designing and programming team joined forces to create an amazing carousel vintage photo slider with PHP and jQuery. This is definitely a nice photo slider to be applied in different websites so you can showcase your work in a more original way. This tutorial is going to cover the programming part of the carousel (stay close to find out the release time of the design part) so you can learn how we did this fancy photo slider and you can adapt it to your own projects.
TwitStream : jQuery, AJAX, and the Twitter Search API
I was perusing the Web looking for some quick and dirty Javascript I could use with the Twitter Search API to display a list of recent tweets containing a particular keyword. I came across the monitter.com widget, which was almost exactly what I had in mind, except that it includes some really great, rich features that were well beyond what I needed. I adapted and simplified the monitter script to:
- Fix an issue with unescaped characters, e.g. hashes, in the search query.
- Fix an issue with ampersands in links in the
linkify()function. - Replace some deprecated HTML tags, e.g.
<b>, and fix other XHTML validation issues, e.g. using self-closingimgtag. - Fetch search results only once, rather than every few seconds (since Twitter sets a rate limit of 100 requests per-hour per-user, I found this to be necessary).
- Specify the number of tweets to return using an additional
class. - Remove the fade-in effect.
- Hyperlink each user’s profile image to their timeline.
Just like monitter, TwitStream utilizes the jQuery framework. Because jQuery is awesome.
Autobrowse jQuery plugin
This plugin adds automatic ajax loading of page content when the user scrolls the page, with built-in browser cache. When the user gets to the end of the page, it fetches more content. This way, you don’t have to load more than neccesary on the first page load, and the user benefits, since she doesn’t have to click numbers in a pagination widget. The result is the jquery.esn.autobrowse.js jQuery plugin which does that for any page.It loads JSON data from the server, and renders it client-side.