• Resources – jQuery Tutorials, Resources & Files

    There are a large volume of good resource that offer users the ability to implement jquery quickly and easily. Jquery is very straight forward and easy to implement.

    What is jQuery

    jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.

     

    Future of jQuery

    Microsoft and Nokia have announced plans to bundle jQuery on their platforms, Microsoft adopting it initially within Visual Studio for use within Microsoft’s ASP.NET AJAX framework and ASP.NET MVC Framework while Nokia has integrated it into their Web Run-Time widget development platform. jQuery has also been used in MediaWiki since version 1.16

     

     

    Gallery Plugins

    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.

     

    PikaChoose is a lightweight jQuery Slideshow plugin allowing for easy presentation of photos with carousels and lightboxes! Pikachoose is designed to be easily installed, easy to setup, and well… all around easy.

     

    slideViewer is a lightweight (1.5Kb) jQuery plugin wich allows to instantly create an image gallery by writing just few lines of HTML such as an unordered list of images.

     

    Space Gallery is another fancy jQuery photo gallery plugin. click on the image will make it fade away and the next image will move forward.

     

    When working my way through a web gallery, I find it annoying when I must change pages; so in today’s tutorial, we will learn how to create an auto-generating, one-page, infinite scrolling gallery with PHP and AJAX. Let’s get started!

     

    In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a thumbnail is clicked. In the full image view the user can navigate through the pictures or simply choose another thumbnail to be displayed.

     

    Galleriffic is a a feature rich , easy to customize and install jQuery plugin that has been optimized to handle a high volume of images while still conserving bandwidth. Its image pre-loading, thumbnail navigation (with pagination) and its integration with both the jQuery.history plugin (supports bookmark-friendly URLs per-image) and jAlbum plugin (thumbnail generation) that truly sets Galleriffic apart from the rest.

     

    Now into version its third version, the very inpressive and versatile Supersized is a fullscreen image gallery that resizes images to fill the window browser while maintaining the images dimension ratio, it will cycle the preloaded images with transitions via the slideshow function and you can navigate through the images by using the pause/play and forward/back buttons. Supersized gives the impression of being a desktop application.

     

    Tutorials

    This tutorials teaches you how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.

     

    In this tutorials you’ll learn how to create an AJAX-powered tab page with CSS3 and jQuery.

     

    Sam Dunn teaches us how to create animated curtains – with a bouncing rope when they open very neat stuff.

     

    One struggle that still remains today in web design is displaying all of the redundant information on every page. For example, a login form. What if there was a way to easily make the content accessible on every page, but keep it hidden until needed? Well you can, by making a top panel that when clicked, will reveal its self and its content. But we need to make this look nice, so we’ll also animate it.

     

    I know there are a lot of toggle tutorials out there already, but when I was learning the basics of jQuery and the toggle effect, I had a hard time finding resources on how to switch the “open” and “close” graphic state.

     

    So today’s article will focus on getting data from a database using PHP, converting that to an XML document, and reading that XML in through jQuery via Ajax calls. Seems complex, but is in fact, very easy.

     

    In this tutorial you’re guided through how to get started using jQuery inside the Google Maps environment. You can create amazing mashups and creative designs with a simple connecting to the Google Maps API.

     

    Interesting & Useful Plugins

    The amazing Subway Map Visualization plugin allows you create interactive subway map visualizations with HTML. Its style has been based on Londons Underground maps, with smooth curves & interchange connectors and 45-degree diagonals. The map size, line width and colors can all be customizable and the markup is also search engine friendly.

     

    jQuewy is a simple, efficient, and lightweight loader for Javascript functions, with a powerful CDN-ready backend. Have you ever wanted to quickly prototype an idea in Javascript, and wanted to get it down as quickly as possible? Have you noticed how a large portion of your setup time can include downloading and setting up libraries to work with? jQuewy solves this problem, because now you can summon any script, and it’ll be inserted into your head tag automatically.

     

    Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling. It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.

     

    With jQuery Runloop, you can create your own small runloop with keyframes at your own choosing, each with code to execute. You can put whatever code you want in each keyframe, rearrange keyframes easily, and use reusable maps of code and/or animations to share between runloops.

     

    Face Detection is an impressive plugin that does just what its name suggests. It detects faces in photos.

     

    Lettering.js is a lightweight, easy to use jQuery plugin for radical Web Typography.

     

    Learn how to create a collapsing menu that contains vertical navigation bars and a slide out content area.

    About the Author

    Ben Rama is a Graphic Designer, CG Artist & Cinematographer from London. He is the founder & director at Digital Empire with many years of experience in Graphic Design, Film & TV within London.

    Other Stories From Around The Vast Series of Tubes

    Did you like this post? Pass it on!
  • 8 Comments

    Take a look at some of the responses we've had to this article.

    1. April 5th

      Thanks for share, very usefull links.

      collapsing style looks great.

    2. [...] Direct Link [...]

    3. April 6th

      excellent resources about jQuery!

    4. April 7th

      Hi Thanks for sharing some great Jquery resources. I particularly like the way you have structured this post with a brief introduction to Jquery some good examples and then the tutorials. A particular favourite tool out of the above is the Galleria plugin, this little bit of jquery is really simple to implement and use, providing the viewer with a simple yet effective gallery.
      Some great finds, thanks

    5. April 7th

      Thanks for share !

    6. April 19th

      Excellent round up! I love the subway map one!

    7. June 21st

      Excellent work…

    8. August 20th

      Really quite the inspiring list. Cheers!

  • Post a Comment

    Let us know what you thought.

  • Name:

    Email (required):

    Website:

    Message: