35 Awesome jQuery Sliders and Other Useful jQuery Effects

1. 3d Rotation Viewer


This cool stuff easily creates a 3D rotation viewer in UIZE that lets users rotate the view of an object a full 360 degrees using a mouse, or finger on the Apple iPad.

2. Full Page Image Gallery with jQuery
This is a stunning full page gallery with scrollable thumbnails and a scrollable full screen preview. This works with thumbnails bar at the bottom of the page that scrolls automatically when the user moves the mouse. When a thumbnail is clicked, it moves to the center of the page and the full screen image is loaded in the background. Now the user can move up and down and the image will get scrolled automatically, giving him the opportunity to see all of the image.

3. HTML5 Slideshow w/ Canvas and jQuery
This effect creates progressively enhanced slideshow with a fancy transitioning effect.

4. Supersized jQuery plugin
Supersized jQuery plugin is a full screen background and slideshow that you can use to satisfy the craving of your clients for big and wonderful pictures.

5. Awesome Bubble Navigation
The effect has round navigation icons that release a bubble when hovering over them.

6. Bubbleriffic Image Gallery with jQuery
With Bubbleriffic you can create a bubbly image gallery that shows your images in a unique way. The idea is to show the thumbnails of albums in a rounded fashion allowing the user to scroll them automatically by moving the mouse. Clicking on a thumbnail will zoom in a big circle and the full image which will be automatically resized to fit into the screen. Navigating through the images will slide the current image to the side and make the new one appear in a zoom like fashion.

7. Highslide JS
Highslide JS is an image, media and gallery viewer written in JavaScript.

8. CrossSlide
CrossSlide is a jQuery plugin implementing in 2kB of Javascript code some common slide-show animations, traditionally only available via Adobe Flash or other proprietary plugins. CrossSlide builds upon jQuery’s animation facility, so it is as portable across browsers as jQuery itself.

9. Panning Slideshow
This slideshow has the ability to showcase imagery automatically. This is a twist from classic slideshows which uses a kind of transition to animate between slides.

10. Avia Slider

This plugin features 8 unique transition effects, image preloader, autoplay that stops on user interaction and lots of easy to set options to create your own effects.

11. Coin Slider

This unique slider features smooth transition effects and is compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+

12. Sliding Boxes and Captions

The animation of the sliding element of this plugin either show or cover up the viewing area, thus creating the sliding effect.

13. Polaroid Photo Viewer

You can see your images as if it were stacked one on top of the other with this glamorous effect.

14. Semitransparent Rollovers

Apply this gradient effect to add enhance the beauty of the web project you are working on.

15. Thumbnails Navigation Gallery with jQuery

Thumbnails Navigation Gallery with jQuery is an extraordinary gallery with scrollable thumbnails that slide out from a navigation. It has a menu of albums where each item can reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or the right.

16. Step Carousel Viewer

Step Carousel Viewer displays images or even rich HTML by side scrolling them left or right. Users can step to any specific panel on demand, or browse the gallery sequentially by stepping through x number of panels each time. A smooth sliding animation is used to transition between steps.

17. Revealing Photo Slider

This slider has thumbnail photo gallery, where clicking a button would reveal the entire photo and more information about that photo.

18. Sideways – Fullscreen Gallery

Sideways is a simple, yet elegant fullscreen image gallery created with the jQuery framework and some simple CSS.

19. Nivo Slider

Nivo slider is an awesome jQuery slider that features smooth transition, keyboard navigation and html captions.

20. Slick Auto-Playing Featured Content Slider

Slick Auto-Playing Featured Content Slider has is a main content area, which slides from left to right each with different unique content.

21. SlideDeck

With SlideDeck, you can organize any type of web content into a beautiful and user-friendly slider.

22. DualSlider

With DualSlider, you can slide your images while leaving a space for the description and other details.

23. JCoverflip

jCoverflip has been developed to enable fast and granular customization of the look and feel and feature set.

24. Flip Box

Flip is a jQuery plugin that will flip easily your elements in four directions.

25. ImageFlow

ImageFlow is an unobtrusive and userfriendly JavaScript image gallery.

26. PieceMaker

Piecemaker is a open source Flash image slider that displays images with 3D slice effects. The slide images  can be  configured from a XML file like setting the tween type, distance, time, delay, etc.

27. Text with Moving Backgrounds

This jQuery effect has some sort of a container which has a moving background, but only set of letters is visible of the background. It will be as if there are holes in your container.

28. Magic Scroller

Scroll your elements with this nice effect which is easy to install. With magic scroller, you can scroll your display vertically to expose its elements, iframes, or imáges. As a precondition all the elements have to be of equal size, and the mask needs to be proportional to the elements per row.

29. jQuery Animated Innerfade

jQuery Animated Innerfade is slideshow based on the work of Torsten Baldes. It has additional functions: slide effect on large images, ‘prev’, ‘pause’, ‘next’ functions, an optional background frame, and a title panel.

30. Pikachoose

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

31. MopSlider

MopSlider can accommodate any number of items. It is also very easy to use.

32. jQuery Slinky Slider

Slinky Slider is a jQuery plugin that loads HTML files into panels to be shown inside a nominated

. Once the panels have been loaded, all bar one are collapsed. An automatic animation cycles through the panels showing the content of each in turn. When the user mouses over a panel, it expands and the automatic animation stops. The panels can contain full HTML, or just image references.

33. jQuery.SerialScroll

This plugin allows you to easily animate any series of elements, by sequentially scrolling them. It is a very unrestricted plugin, that lets you customize pretty much everything from outside. You can use horizontal or vertical scroll. This jQuery.SerialScroll doesn’t have one definite purpose. It’s generic and adaptable. You can certainly use it as a screen slider and text scroller. You can even build an automatic news ticker.

34. Anything Slider

AnythingSlider brings together the functionality of all previous sliders and their features.

35. Zoomer Gallery jQuery Plugin

This jQuery effect, zooms your images inside a beautiful gallery once your mouse is on top of it. It does so in a flashy zoom style.

HTML5 input types

HTML5 brings several new input types for forms. The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user’s address book, and submit a defined format to the server.

It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.

HTML5 adds a few new values for the input element’s type attribute:

• tel
• email
• url
• number
• range
• date
• month
• week
• time
• datetime
• datetime-local
• search
• color

 

For using the new input types below is the syntax for each of them:

Now let’s take a closer look at each input type. 

Input type “tel” 

 

All browsers support the input type telephone tag in the way that they all display it as a text field. The HTML 5 specification does not require that browsers enforce any specific telephone number syntax or display the field in any particular way.
The desktop browsers display a text box for the tel type.
The mobile browsers, like mobile Safari on the iPhone and iPad will display the number keypad to enter this form data rather than the alphabet keyboard. 

Input type “email” 

 

The “email” type input field should contain an email address.
The email address will be validated on submit.
The desktop browsers display a text box for the email type.
The mobile browsers, like mobile Safari change the input interface for this field to make it easier to use on small devices.

Input type “url” 

 

The “url” type input field should contain an email address.
The url address will be validated on submit.
The desktop browsers display a text box for the url type.
The mobile browsers, like mobile Safari change the input interface for this field to make it easier to use on small devices.

Input type “number”

 

The number type is used for input fields that contain numeric values.
The developer can set limitations on the number accepted by using min, max and step.

Attributes supported:

min – minimum number value accepted
max – maximum number value accepted
step – valid number intervals (step=”2″ specifies only -2, 0 2 … are valid values)
value – default value

Input type “range”

 The range type is used for input fields that contain a value from a range of numbers.
The range type is going to be displayed as a slider bar.

Attributes supported:
min – minimum number value accepted
max – maximum number value accepted
step – valid number intervals (step=”2″ specifies only -2, 0 2 … are valid values)
value – default value

Input type “date” 

 

Input type “month”

Input type “week”

Input type “time”

Input type “datetime”

Input type “datetime-local”

Input type “search”

The search input type field behaves like a regular text field.

Input type “color”

The color input type type should be used for input fields that should contain a color.
The Chrome browser allows only hex values.
The Opera browser will display a color picker for the user to select the desired color.      

How to convert video to HTML5 video formats using Miro Video Converter

The Miro Video Converter represents a simple way for converting your videos to the formats supported by the new HTML5 video tag. The tool is free, open and very easy to use.

The Miro Video Converter can be downloaded from 

http://www.mirovideoconverter.com/.

1. Download and install Miro Video Converter. For setting the location of the downloaded files or converted files please go to File -> Preferences.

2. Open the video you want to convert using File ->Open or by using File->Import. You can search for video files in a specific folder using File -> Import -> Search in a Folder. Also the converter has a nice search feature for looking up videos on YouTube, Hulu etc.

3. After the video has been opened/imported you can select Videos from the left menu and you will see the list containing the new imported videos.

4. Select the video you want to convert and go to Convert menu. From the menu select the format in which you want the video to be converted. For web you should convert to Ogg Theora(video), Ogg Vorbis(audio) or MP4(video).

5. After selecting one of the options the conversion process will start and you can observe the progress by selecting “Converting” from the left menu. Once the conversion process is done you can click on Reveal in Explorer to be taken to the location of the converted file.

 

6. Now all that you have left to do for embedding the converted video on your web page is to use the new HTML5 video tag just like this.

The text between the < video > and < /video > tags will be displayed in browsers that do not support video.