10 Fresh jQuery plugins (April-May 2011)
This is fresh collection of new jQuery plugins. 10 great solutions: new slider, image gallery, movie, map and many other useful things. Many of the plugins have been created recently in 2011. Download, customize and use its in your projects.
How to create photo gallery using Slider Kit (jQuery)
Today we will continue overviews of available photo galleries. Next gallery will Slider Kit. This is free jQuery photo gallery. This gallery have 4 different views (standard, with captions, vertical and minimalistic). Important notes – that it compatible with all browsers (this can work even in IE6) and have very light weight (packed version of library less 8kb). You can navigate through images using your mouse, mouse wheel, and even keyboard. The result – we will have a beautiful gallery with an intuitive interface. Today I will tell you about how to implement this gallery (you even will able to use this in any CMS as gallery of your member’s photos).
By default this gallery expect already prepared html data (with all images and thumbs). So it can be difficult to load dinamic content in it (different photos of different members). But its ok, we will force loading of necessary images when page finish loading using jQuery (we will load our images dinamically, using $.get function). We will use PHP to generate lists of necessary images and thumbs.
Image zoom tool – jQuery imageLens plugin
Today we will continue our jQuery tutorials. And today we will talk about image zoom tools. During investigation, I was able to locate imageLens jQuery plugin. This is nice image zooming tool. It looks like round lens and have very easy initialization. Of course, I saw many another libraries too, but they was a little ugly, more like squares than the magnifying glass. I like this plugin, hope that you will like it too. And I sure that this is time to try demo.
Scrollbar & jQuery – event handling using waypoints
Today we continue jQuery reviews, and our article will about event handling of scrollbar. Possible you saw such feature as ajaxy loading of new information when we scroll to end of page. As example here: http://www.dzone.com/links/index.html, or in your facebook page and other websites. Interesting feature isn`t it? Or, also will possible to stick some elements when our scroll moving out necessary positions. Or, we can handle events when scroller reach defined element at our page (and, as example – load some extra content on this event). Today I will show you how to do this.
Choosing different sets of items using the MobilySelect plugin
Today, to your attention a new interesting plugin MobilySelect. This plugin allows you to simulate select of objects from the collection of elements. For example, your website have list of users – men and women, and you need to display list of users in some box. So, this new plugin allows you to make a switch to display the men, women, or both. Or another example, assume you have a pack of pictures, each picture has its own tags, and so we can make the appropriate select photos by tags. But I think best to see a demo.
How to easily make animated forums using XSLT and Ajaxy
Today is a special day. Today our XSLT lessons will show some really interesting (attractive) results which you can apply in practice. We will make a forum. Initially we will display only the forum topics, and load posts dynamically (by mouse clicking on the topics) using ajax technology. I think you may have seen similar forums on the Internet, so I will tell you how to do it your own.
How to play audio and video using jPlayer plugin (jQuery)
Today we continue jQuery lessons, and will talk about adding customizable player for audio or video files to our website. This new plugin (jPlayer) pretty well: allow us play media files, pause, change volume, it even have all necessary controls (which you can see in any media player). Also it allow us to change all its styles (all styles of interface loceted in single css file). More, it support HTML5 and able to work quite in all possible browsers. Here are supported formats of media files: mp3, ogg, m4a, m4v, ogv, wav etc. So, lets start to create our own players?
How to Translate your Site in Runtime using Jquery
How to create dialogs using UI Dialog (jQuery)
Today we continue jQuery lessons, and we will talk about creating user window dialogs. We will using UI Dialog plugin. This plugin allow us to choose text, buttons (and its behavior), and many other params of dialogs. These dialogs very user friendly, and it looks like boxes in Windows. Similar interface: content in center of dialog, in top-right corner – button ‘x’ to close dialog, also this is movable and resizable too, also it possible to add custom action buttons in bottom of dialog. Today I will tell you how you can create your own dialogs for your projects.
How to create easy pagination with jQuery