Galleriffic jQuery Plugin

Link : Galleriffic jQuery Plugin »
Description : This sleek plugin is great, its simple to use and implement, fast, looks amazing and feature rich.
Features :
- Smart image preloading once the page is loaded.
- Thumbnail navigation (with pagination).
- Support for bookmark-friendly URLs per-image.
- Slideshow gsallery (with optional auto-updating url bookmarks).
- Events that allow for adding your own custom transition effects.
- Support for image captions.
- Flexible configuration.
- Graceful degradation when javascript is not available.
- Support for multiple galleries per page.
Demo : Galleriffic Demo »

Supersized – Full Screen Background/Slideshow jQuery Plugin

Link : Galleriffic jQuery Plugin »
Description : Supersized is the first fullscreen image gallery/slideshow that I have seen that really looks amazing, its transition effects are hypnotic and its controls are simple. The most amazing thing about Supersized is that it gives the impression of being a desktop application. Amazing plugin.
Features :
- Resizes images to fill browser while maintaining image dimension ratio.
- Cycles Images/backgrounds via slideshow with transitions and preloading.
- Navigation controls allow for pause/play and forward/back.
- Almost endless options.
Demo : Supersized Demo »

Building a jQuery Image Scroller

Link : Building a jQuery Image Scroller »
Description : In this tutorial, you’re going to be building an image scroller, making use of jQuery’s excellent animation features and generally having some fun with code. This scroller will be different from the others in that it will be completely autonomous and will begin scrolling once the page loads.
Demo : jQuery Image Scroller »

Sliding Boxes and Captions with jQuery Tutorial

Link : Galleriffic jQuery Plugin »
Description : All of these sliding box animations work on the same basic idea. There is a div tag (.boxgrid in my css) that essentially acts as a window where two other items of your choosing “peek” through. Nice effect.
Demo : Sliding Boxes and Captions Demo »

Create a Resizable Image Grid with jQuery

Link : Resizable Image Grid »
Description : Image grids that smoothly scale at the simple drag of a slider are no longer confined to desktop apps like iPhoto or Picasa. Thanks to some clever CSS and the jQuery UI, fluid image grids are now surprisingly simple to implement on the web.
Demo : Resizable Image Grid Demo »

Create Sliding Image/Reveal Content

Link : Sliding Image/Reveal Content »
Description : This tut does exactly what it says in the title, hover over the image and the text content will be revealed. Great first tutorial from Suciu Vlad.
Demo : Sliding Image/Reveal Content Demo »

Creating an Image Slider

Link : Creating an Image Slider »
Description : In this tutorial you will learn how to create an image slider that when a holder is hovered over, the top image slides down to reveal the image underneath. You will also learn how to use position absolute to float an image in the top right to show the image is new.
Demo : Creating an Image Slider Demo »

Galleria jQuery Plugin

Link : Galleria jQuery Plugin »
Description : Galleria is a javascript image gallery written in jQuery. It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. It will create thumbnails for you if you choose so, scaled or unscaled, centered and cropped inside a fixed thumbnail box defined by CSS. Very cool plugin.
Features :
- Unobtrusive javascript.
- Degrades gracefully if the browser doesn’t support javascript or CSS.
- Lightweight (4k packed).
- Displays the thumbnail when the actual image is loaded.
- CSS powered – create your own gallery style.
- Super fast image browsing since the images are preloaded one at a time in the background.
- Can scale thumbnails and crop to fit in thumbnail container.
- Can be used with custom thumbnails.
- Stylable caption from image or anchor title.
- jQuery plugin – takes one line to implement.
- Can adjust the history object and enable the back button in your browser.
- Can fire events so you can customize the images behaviour onLoad.
Demo : Galleria Demo »

Create a Beautiful jQuery Slider Tutorial

Link : jQuery Slider Tutorial »
Description : This tutorial shows you how to develop a beautiful jQuery slider with added image description and name. The final result is a very smooth and visually pleasing slideshow which could be easily integrated into any site.
Demo : jQuery Slider Tutorial Demo »

GalleryView jQuery Plugin

Link : GalleryView jQuery Plugin »
Description : GalleryView is a content-gallery plugin capable of displaying any HTML content in an animated gallery view. This plugin is bounding with options and you would be hard pressed to not use this plugin. GalleryView does require the jQuery Timers plugin to facilitate timing of animation events.
Demo : GalleryView jQuery Plugin Demo »

Simple JQuery Image Slide Show with Semi-Transparent Caption Tutorial

Link : Simple JQuery Image Slide Show »
Description : In this tutorial you will be shown how to create a simple image slide show with a semi-transparent caption using jQuery. The final result will be suitable to display news headlines, or an image slide show on your websites homepage.
Demo : Simple JQuery Image Slide Show Demo »

jQuery Morphing Gallery Tutorial

Link : jQuery Morphing Gallery Tutorial »
Description : In this tut you will learn how to create a simple image gallery that when an image is selected, it will “morph” into its relevant size.
Demo : jQuery Morphing Gallery Demo »

Zoomimage – jQuery plugin

Link : Zoomimage – jQuery plugin »
Description : Present your images in a stylish way, with this plugin. The links are unobtrusively highjacked to open the images in an inpage popup with drop shadow and border. Nice and simple.
Demo : Zoomimage – jQuery plugin Demo »

Full Screen Image Gallery Using jQuery and Flickr

Link : Image Gallery Using jQuery and Flickr »
Description : This is a full screen image gallery that automatically scales the image with kept aspect ratio to fill the browser background. It uses the flickr search engine with thumbnail preview, captions, preloader and some other excellent goodies. It scales the image using CSS only (some JS for IE6) and developed with jQuery.
Features :
- Flickr search using jQuery and JSON.
- Full screen with kept ratio using CSS only.
- A png raster to even out up-scaled jpegs.
- Thumbnails with loader indicator and a nice hover effect that shows a bigger thumb (or description).
- A preloader loads the large images one by one for super-fast viewing.
- Fetches the biggest image from flickr using their API.
- Caption that can be turned on or off.
- Navigate by clicking on either half of the image, or use the thumbnails..

Demo : Image Gallery Using jQuery and Flickr Demo »

Easy Slider 1.5

Link : Easy Slider 1.5 »
Description : The Easy Slider plugin enables images or any content to slide horizontally or vertically on click. It is configurable with css alone. So, basically you link to plugin file, set the content up and style it with css.
Demo : Easy Slider 1.5 Demo »

jQuery Tabbed Interface

Sliding Jquery Menu

CSS Sprites2 – It’s JavaScript Time

Kwicks for jQuery

jQuery File Tree

Learning jQuery: Fading Menu – Replacing Content

jQuery Context Menu Plugin

Coda-Slider

Create Vimeo-like top navigation

jQuery (mb)Menu 2.0

jQuery idTabs

Create a Slick Tabbed Content Area using CSS & jQuery

Create a Cool Animated Navigation with CSS and jQuery

LavaLamp for jQuery lovers!

How to Make a Smooth Animated Menu with jQuery

Now, our first official look at T-Mobile’s G1, the first
Android-capable phone built by HTC, is less than 24 hours away, and the same adage holds true now more than ever. Android’s openness puts the emphasis even more squarely on the code this platform will run, making the hardware almost an afterthought. And while it’s still quite early in the game and things won’t really kick up until the G1 becomes available sometime in October, the Android Market is already looking like an equally if not more vibrant place for great apps for your phone.

One of the main positive points in our Android preview guide was that Android will likely be home to the best direct tie-ins to Google’s web apps like Maps, Docs, and Gmail, of any device around. And not only will they shine individually (remember’s Apple’s proud claims of the iPhone’s custom Google Maps integration?), each Google service is set up as an open API within Android, meaning they’re all available for mashing up with any other type of data imaginable in third party applications, effectively allowing developers to easily convert awesome Google service hybrids (like Beer Mapping, one of my favorites) into mobile apps.

Unsurprisingly, Maps integrations are the main focus being taken by the early wave of Android Apps, many of which were written in response to the Android Developer’s challenge. Throw in location awareness via GPS or cell towers (another Android core service), and we’ve got ourselves the ingredients for some truly next-level stuff.

Enkin: When many people envisioned a location-aware future for mobile tech, they were probably dreaming up something like Enkin. If you can last through the somewhat brutal video here, you’ll see some amazing potential: Enkin is basically a visualization framework for location information which can place locations on a two-dimensional map, a quasi-three-dimensional Google Earth type view, and coolest of all, overlay them onto the view streaming live out of your phone’s camera. It uses GPS and accelerometers to sense exactly which direction the camera pointing, giving you an annotated view of the real world. You can add your own placemarkers or draw them in from the internet.

Locale: Borne from an MIT class specifically for writing Android apps (and winner of a $275,000 first prize from the Android dev challenge), Locale lets you define your most frequented places on a map and set your phone to respond to those places in a number of different ways. While the prototype is mostly focused on phone settings (like switching to silent when you’re in the office or at a movie theater), these kinds of frameworks can be expanded infinitely. Home automation software could be programmed to turn on the lights (or start cooking your breakfast, Pee-Wee Herrman style) once you’re a few blocks away from your home, for instance. It takes Bluetooth proximity to a whole new level, one that’s not dependent on the limited proximity to another device but only your actual real-world location independent of any other variables.

GeoLife: In a similar vein is GeoLife, a location-aware to-do list. You can pair actions on your list to locations (or types of locations) to get a reminder to buy milk when you’re near a grocery store.

Ecorio: Using GPS, Ecorio runs in the background (another edge Android has over the iPhone) and estimates the carbon output of your day’s journeys. Once it learns your habits, it can then suggest public trans or carpooling alternatives. Another $275,000 first prize winner.

Cab4me: Takes your current location and feeds it into a database of nation-wide cab companies, allowing you to order a cab pickup instantly with your current locations. Google Maps overlays also show areas of cities where you’re likely to hail a cab off the street.

BioWallet: Not all of the innovative apps are map based. BioWallet uses your
phone’s camera as an iris scanner to lock down sensitive information like account numbers and passwords on your phone, or even the phone itself. Handwriting-based IDs can also be implemented, all processed for an additional pass/fail reading—all processed on the phone itself which keeps biometric data secure.

CompareEverywhere and GoCart: Both capture photos of product UPC codes to then tie into online databases for comparison pricing, product availability, and shopping list compilation.

TuneWiki: Music apps are a bit thin pre-release, but TuneWiki (which is already out for jailbroken iPhones—not in the store yet, which won’t be a problem with Android) looks impressive for grabbing lyrics and album art with your music.

Teradesk e-Storage: We love Air Share
on the iPhone, and e-Storage looks to provide many similar services, with file versioning and Google Docs integration (one of the first of many G-Docs tie-ins, surely).

True, some of these apps could seemingly be just as at home in the iTunes App Store and on other platforms (many mobile OS’s have some iteration of a barcode reader, for instance). But what has the potential to set Android apart though is its open source foundation; with the support of the open-source development community—one of the largest and most important driving forces of innovation in computers and software throughout history—Android could blast open mobile platforms even further than the iPhone has or could. Especially when you consider the core open-source projects that have shaped the internet since the beginning—Apache, MySQL, PHP, ssh, and countless others—making it onto phones in a core and unified way. Despite early SDK kinks, we could be seeing some exciting stuff in the next few months.

Android – Apps without borders

You can plugin a URL and the system will render that page on a
server farm (many browsers, cross OS) and show you the results. It can
visually layer these results so you can see the differences. It was
awesome.

I pinged Paul and had a nice conversation with him about the project:

Can you explain what Meer Meer is, and where you got the inspiration?

Meer Meer is the code name for a new hosted service that allows Web
Pros to view their content on a variety of different browsers and
operating systems without requiring them to install anything other than
the standard Flash Player. The inspiration is easy. We spend a lot of
time with our customers and cross-browser compatibility consistently
comes up as the #1 issue unprompted. It’s a real pain and we wanted to
help solve it.

What browsers and OSes are supported? This means I don’t have to kick up VMWare to test in IE 6 now right?

IE6 is covered We haven’t finalized the complete set yet but
we’re committed to supporting the top browsers for Windows and Mac. We
expect that mix to change over time as new browsers/versions gain
market share.

What are the various views and features?

We’ve really focused on how users tweak/debug their CSS today and
engineered the service to fit into that workflow. One of the unique
features for Meer Meer is that it can work directly with your local
content if you are using Dreamweaver. This is a big benefit as users
can tweak CSS and hit the refresh button to get an immediate
representation of the page on their target browsers. No need to save,
publish to a public location and then view. In addition, we’ve focused
on several views (1-up, side by side and onion skin).

Onion skin is the most interesting as it overlays two browser shots
over each other and provides the user with complete control over the
transparency. This view typically gets the big oohs and aahs

Can you talk about the high level implementation? I assume you
have a server farm on the back end and you are rendering and sending
back images of the rendered image?

That’s correct. In addition we’re using a Flex application as the
client. This makes the application feel very snappy and respond like a
desktop application without the need to install anything. The team has
also done some great work to establish a local connection with
Dreamweaver to work with local content. When you make a change to your
code and switch back to Meer Meer it knows you’ve made a change and
prompts you to refresh. You can choose to refresh from within
Dreamweaver and a panel will update and show you the status of the
screenshot retrieval in real time.

In Dreamweaver CS4 you showed taking an Ajax app, clicking around
to change state, freezing the page and then sending it to Meer Meer.
Can you talk more about the freezing feature and other things that you
can do?

I’m really proud to be associated with this release of DW CS4. We’ve
definitely pushed the envelope. Our new Live View leverages the WebKit
rendering engine to provide users with a true browser experience
directly within the product. This means that you can see and interact
with dynamic content such as Ajax UI widgets. Furthermore, we’ve
included the ability to see the Live Code that the browser generates as
you interact with the page. Users can freeze JavaScript to get the page
into different states and then use the new Code Navigator to jump
directly to the CSS that effects the element they select. This is an
added bonus for Meer Meer because we can place the page into different
states, such as selecting the second pane of an Accordion widget, and
then view the page in that state within Meer Meer. Other browser
compatibility services simply can’t do this.

Any final thoughts on Meer Meer or other Web Pro services coming from Adobe?

We’re really excited about the future of desktop + services at
Adobe. Meer Meer is a great example of what we can accomplish when we
take a holistic view to solving a user challenge. We’re also very
interested in extending the capabilities of our users by providing them
with turn-key hosted solutions that allow them to grow their business.
Content maintenance follows very closely on the heels of browser
compatibility as a top challenge that our users face today. Our new
InContext Editing service that is now in free preview on Adobe labs
allows Web Pros to provide content editing capabilities directly within
the browser to their end user. No programming required.

We look forward to hearing feedback from the community on these services to help guide our future direction.

This is an exciting server from Adobe, and shows that focusing on
the Flash issue isn’t the entire story. They have a lot to offer the
Open Web if we look to the right places and we can continue to fight
for more too If we support projects like Meer Meer we can make our
voice heard.

Of course, this is just the beginning. I would love to see an API to
the service which would allow any developer tools to mashup nicely with
the service. You can also imagine actively analyzing the code to not
only point out the diff in the image, but the issue in the code. When
we get there, we will be in a very good place indeed

There were some other cool things from MAX that showed up in Labs:

• Alchemy: A research project that allows users to compile C and C++ code into ActionScript libraries (AVM2).
• Durango: Mashup tool for AIR

And for more in-browser tools, check out this nice roundup on

15 Helpful In-Browser Web Development Tools.