jQuery are the best way to display your row images to present to your visitors. There are lots of option and customization that can create very simple, beautiful and good looking image sliders. Yesterday I written a tutorial on HOW TO: Create A Vertical Scrolling News Ticker on WordPress With jQuery Carousel. In this post you’re going to find different types of pre-made jQuery plugins and unique image galleries for inspiration, and at the end there are some WordPress themes if you want to develop your own site image slider with beautiful effects.
jQuery Slider, Slideshow and jQuery Carousel Effects
This example is inspired by a showcase example by Apple of HTML5 technologies. The UIZE implementation works in pretty much all browsers, with no need for HTML5 or CSS3 features. This was an exercise in seeing how easy it would be to create an equivalent experience in UIZE. It was easy, taking less than a day. The code is all original, with absolutely no referencing of Apple’s code (but thanks to Apple for their delicious iPod Touch products, and for their fabulous photos of said products). In the example, an instance of the
Uize.Widget.Drag class is being used to create a simple 3D rotation viewer. Using a mouse, you can click and drag to rotate the 3D image. On an Apple iPad, you can use your finger.
This is a jQuery banner rotator plugin featuring multiple transitions. The thumbnails and buttons allow for easy navigation of your banners/ads. The banner rotator is also re-sizable and configurable through the plugin’s parameters.
A progressively enhanced slideshow with a fancy transitioning effect, which is perfectly functional in older browsers as well.
AviaSlider is a very flexible and easy to use Image slideshow plugin for jQuery with a set of really unique transitions that were nver available before, as well as some basic transitions, so the slider will fit into every project.
- Quick and elegant looking.
- No plugins like Flash or Java required.
- Popup blockers are no problem. The content opens within the active browser window.
- Single click. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.
- Lots of configuration options and scalability without compromizing on simplicity. A component system lets you strip away unused features down to a filesize of 10kB.
- Outstanding, unconditional and free user support for both commercial and non-commercial users.
- Source code included.
This slideshow uses a few amazing photos found on Flickr. You can find links to them below. This is only the example page. Head back to Build Internet for the full tutorial and explanation.
Compatible with Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+
In this tutorial we are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. We are going to use jQuery and some CSS3 properties for the style. The main idea is to have a menu of albums where each item will reveal a horizontal bar with thumbnails when clicked. The thumbnails container will scroll automatically when the user moves the mouse to the left or right.
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. And fear not in taming this script to go exactly where you want it to- two public methods, two custom event handlers, and three “status” variables are here for that purpose.
Flip is a jQuery plugin that will flip easily your elements in four directions. Try it.
Other jQuery Slider, Slideshow and jQuery Carousel Effects
Text with Moving Backgrounds
jQuery Animated Innerfade
jQuery Slinky Slider
Zoomer Gallery jQuery Plugin
jQuery Plugin for Zoomable, Interactive Maps
BBC Radio 1 Zoom Tabs
Leopard Desktop with jQuery
Contextual Slideout Tips With jQuery & CSS3
Animated fullscreen background image slideshow
Gallery Using z-index and jQuery
Background Image Navigation with jQuery
Minimalistic Slideshow Gallery with jQuery
Related Posts Slide Out Boxes with jQuery and CSS3
Compact News Previewer with jQuery
Annotation Overlay Effect with jQuery
Image Rotator with Preview
jQuery popeye 2.0
jQuery Tiny Slider
Smooth Div Scroll
s3Slider jQuery plugin
Sliding Login Panel
jQuery Slideshow using CSS Sprites
Multiple Image Cross Fade
jQuery Cycle Plugin
jQuery Image Scroller
Text Effects with jQuery
This plugin allows you to set and limit user input by max characters within html textarea (it is only limited by characters other than words). It binds keyup, paste and drag events. The extra div is displayed under the textarea, which shows the current number of input characters and words. You can set your own styles and customise the text counter information. Version 2 provides the callback function.
Even without Photoshop, you can make text effects with this by just typing a little code.
Some fun little text effects. These manipulate
$(ele).text() so will probably be disastrously broken with inner HTML content.
Normally you would define the (background) color in the CSS and that would be the end of it. In this case we want to be able to adjust colors after the page has loaded, and not just once either – we’re aiming for continuous adjustments.
The lovely part about this whole thing is the small about of jQuery required to make it all happen.
Retweetradar has nice little effect in the footer – links in top lists fade, emphasizing the most popular links with strongest color intensity. This tutorial will explain how to fade a color in array of elements using jQuery.
Approach is a jQuery plugin that allows you to animate style properties based on the cursor’s proximity to an object. It works in a very similar manner to jQuery animate, however it animates over distance instead of time.
I thought i would write this tutorial because most of the auto completer applications i have seen just dump the code into a zip and tell you how to use it rather than how and why it works, knowing about this enables you to customise it a lot more (this has been demonstrated with the other apps i have written here)!
A rotating 3d tag cloud controlled with the mouse. Tags are scaled according to the weight assigned to them and fade into the background as they rotate.
The idea is very simple: you click on the text size you want, and a class is added to the body to indicate which size the user has selected. Then, we take advantage of that body class when we are writing our CSS to size the different elements appropriately.
Airport is a rather simple text effect plugin for Jquery. It emulates the style of those flickering information boards you sometimes find on airports and train stations.
This is basic level tutorial just changing style using jQuery script. It’s simple use it for zooming website content. Take a look at live demo
Animation Effects with jQuery
You can drag objects and place them anywhere you want. As well, there is a switch that can be turned on to amaze your visitors.
Interesting effects, which can be used on site-header. It’s very simple to use: several layers glued together into a 3D effect. See examples of using this jQuery plugin!
This tutorial will walk you through how to create a Sphere in jQuery.
This tutorial will show how to create a scrolling 3D tag cloud…it’s not as difficult as you might think.
In order to use the rotate3Di jQuery plugin, your web page will need to include jQuery v1.2.6 or newer, the jQuery CSS Transform patch, and the rotate3Di plugin itself.
This is a very excellent plugin. after open the page, the object will revolve around the page and if you click the buttons, it will jump in a circular motion and bounce back into position.
This tutorial would not be anything special without the graphics, so let’s make sure you’ve got those under control. I’ve included the ones used in demo as part of the attached files, now would be a good time to download them if you intend to use them.
Reorder and filter items with a nice shuffling animation.
Creating this fun jQuery effect doesn’t take too much effort. I am going to quickly go through the steps of using this effect to show you how easy it can be. As you can see on the example page, you can selected different types of smoke that will adjust the effect while keeping the code intact.
Download the source code here: http://www.gayadesign.com/scripts/smokeeffect/smokeEffect.zip.
View the examples here: http://www.gayadesign.com/scripts/smokeeffect/
In this tutorial we’ll start with a cartoon themed header, build two different states for content and animate a transition between them using jQuery.
A parallax style implementation of user interactions. When the mouse moves over the document (or a specific element) the actions can be translated to modify any CSS property of an element for example an image position, to give a parallax style effect.
jEffects enhances user interaction by providing decorative effects. It’s all packaged into an intuitive jQuery plugin. Detailed documentation is included.
In this tutorial we will use some images, CSS and jQuery to create the effect of a rotating billboard with two ads. The idea is to make one set of image slices disappear while another one (the other ad) appear. We will decrease the width of each disappearing slice and increase the width of each appearing slice. This will give the effect of rotating slices, just like in a rotating billboard system.
Aside from being a fun exercise, what purpose does something like this have? None that’s plainly obvious. Its about as useful as a miniature ship in a bottle. Yet it does have an underlying purpose. It could inspire someone to look beyond the perceived constraints of web designers and developers.
The idea is to have different elements in a banner that will animate step-wise in a custom way. We will be using the jQuery Easing Plugin and the jQuery 2D Transform Plugin to create some nifty animations.
Transition Effects with jQuery
jqFancyTransitions slideshow with strip effects
Jquery Fade InFade Out
The Sexy Curls jQuery Plugin
Smooth Animated Menu with jQuery
jQuery MagicLine Navigation
Dynamic Page / Replacing Content
jQuery Cycle Plugin-Effects Browser
Sponsor Flip Wall With jQuery & CSS
Grid Accordion with jQuery
jquery Professional Dropdown Menu
Superfish jQuery Menu Plugin
Image Editing and Adjustment Effects
jQuery Virtual Tour
jQuery Corner Demo
Apple-like retina effect
Photo Zoom Out Effect
Image Highlighting and Preview with jQuery
Jcrop » the jQuery Image Cropping Plugin
Other jQuery Effects and Resources
Tetris with jQuery
Music player using jQuery
jQuery Before/After Plugin
ZURB Annotation plugin
Crazy Dots – jQuery Plugin
jQuery CSS Clip Animation Plugin
Dynamic FAQ Section w/ jQuery
Latest Tweets Tooltip with jQuery
Outside the Box Navigation with jQuery
JQuery animation easing plugin example
Array of jQuery Animations- Tutorialized
jQuery Background-Position Animation
Colourful rating system using CSS3 and jQuery
Premium WordPress jQuery Sliders
uBillboard is a Premium Slider for WordPress. It is a jQuery based slider with a multitude of transitions and options for you to be able to customize it to your needs while not overwhelming you with options you never wanted or needed. Version 3 is a revolutionary release with most of the codebase rewritten from scratch. This has enabled us to integrate many features that you have been requesting during the first year.
liJQuery Image Slider is carefully crafted slider/banner image rotator, full of features, easy to install and customize. Whenever you need a full featured slider image rotator or you need a simple ad banner, liJQuery Image slider will do the job with ease!
Slider PRO is one of the most powerful slider plugins for WordPress on the market (some buyers have been saying that it’s actually the best). The slider offers you 100+ customizable properties, 100+ possible transition effects, 10+ skins and much more. Also, the slider’s administration area is very powerful and uses the default WordPress design, which WordPress users are already familiar with. This slider plugin is carefully coded, using WordPress development best practices, to avoid conflicts with other themes and plugins that are well coded.
CCSlider WP makes it easy to embed the CCSlider jQuery slideshow plugin in your WordPress theme. CCSlider is an unique slideshow plugin because of the fact that it supports 3d transitions! There are 10 stunning 3d transitions available, and also 10 stylish 2d transitions. You have the option for mentioning a 2d transition fallback for old browsers that don’t support HTML5 Canvas, which is used for producing the 3d transitions. The plugin also supports HTML captions and autoplay of slides. See below for a list of features available in the plugin.
Create an unlimited number of sliders with customized settings for each one, and place them anywhere on your WordPress website with ease.
Sugar Slider makes it as easy as it could possibly be to create gorgeous sliders for your WordPress powered site. Forget nasty custom fields and image URLs. You can even forget about manually resizing every image before you upload it.
DDSliderWP features EVERYTHING that the jQuery plugin already offered PLUS a custom admin panel, with total management of slides.
WordPress Ken Burns Slideshow is a smooth and beautiful flash slider made just for WordPress!
Based on the best selling Xml Ken Burns Slideshow, it has a lot of cool features and effects, so this slider can become the perfect way to showcase your products.
This plugin creates a new shortcode for WordPress. With this new shortcode, you can create a slider gallery in seconds just by typing [slider] while you’re writing your post or page. The slider will display the images that you have uploaded to the current post or page.
- Show off your content the real way – in a slider!
- Feature any post, page or custom post type
- Includes 6 predefined layouts
- Customize layouts with 18 variables
- Global and per-post options
- Intuitive admin GUI with inline help
- Thumbnails, arrows and pagination slide controls
- Uses your theme’s CSS styles
- Extensive user friendly documentation
- No template editing needed if you use [fps]
The WP 360 º Image Slider is a highly configurable plugin that adds slider functionality to your posts or pages. You can see the DEMO HERE . Please click on the “Play in HD” button to see it in fullscreen.
Pixwall is a plugin for WordPress based on a project called Diapo, a jQuery slideshow developed by me, Manuel Masia (or Pixedelic), but improved since the original version. Pixwall is used to create animated slideshows with particular effects, and you can use it also for fullscreen background slideshows.
WPSublimeSlider is a fantastic WordPress plugin that allows you to create and display unlimited image galleries on your site. You can create sliders using your own images or even from a Flickr photoset or Picasa web album.
jQuery Carousel Evolution for WordPress is a WordPress plugin that allows you to easily create powerfull carousel slider in a few minutes. You can then integrate it into any page with a single shortcode. It includes a full back-end interface to create and customize your Carousel. It also offers a preview mode to easily try out some settings before pushing them live.
Flip Book WordPress Pluginis based is on XML Flip Book / AS3 one of the three top selling items of all times on ActiveDen . It has been built from scratch. Almost everything you see on the page is easily customizable through the WordPress administration panel – easy installation, no coding skills required.
Free WordPress jQuery Plugins
As the name shows, this is just WordPress’s version of the jQuery Lightbox Plugin written by balupton, working perfectly with WordPress 2.2 or up, and fully compatible with K2!
This plugin builds on the builtin WordPress gallery, and replaces any gallery inserted using the
tag with a neat jQuery powered carousel. By carousel it means you can browse through all the pictures in the gallery and they’ll slide from the right to the left and seamlessly start over at the end.
Shadowbox is an online media vieiwing application similar to Lightbox and Thickbox but with more functionality. Supports all types of media.
Makes the native WordPress galleries use a lightbox script called ColorBox to display the fullsize images.
This plugin show instead of the next and prev links a jQuery slider as a modern pagebar. So it’s easy to navigate through many pages.