AJAX In WordPress

In the last few years, AJAX has crept onto websites and slowly become the way to create dynamic, user-friendly, responsive websites. AJAX is the technology that lets you update the contents of a page without actually having to reload the page in the browser. For example, Google Docs utilizes this technology when saving your work every few minutes.

sm-ajax-2011

While there are a number of ways to use AJAX in WordPress — and all are “correct,” in the loose sense of the word — there is one method that you should follow for a few reasons: WordPress supports it, it is future-proof, it is very logical, and it gives you numerous options right out of the box.

What Is AJAX?

If you’re not familiar with AJAX, I suggest continuing to the end of this article and then reading the Wikipedia article on AJAX, followed by some tutorials. This is a rare case when I recommend reading as little about it as possible before trying it out, because it confused the heck out of me at first; and the truth is, you will rarely interact with AJAX in its “raw” state — you will usually use helpers such as jQuery.

In a nutshell, AJAX is a combination of HTML, CSS and JavaScript code that enables you to send data to a script and then receive and process the script’s response without needing to reload the page.

If you are creating a page on your website where users can modify their profile, you could use AJAX to update a user’s profile without needing to constantly reload the page whenever they submit the form. When the user clicks the button, the data they have entered into the form is sent via AJAX to the processing script, which saves the data and returns the string “data saved.” You can then output that data to the user by inserting it onto the page.

The thing to grasp about AJAX is how not different it is from what you’re already doing. If you have a contact form, chances are that the form is marked up with HTML, some styles are applied to it, and a PHP script processes the information. The only difference between this and AJAX is how the information that the user inputs gets to the script and back to the user — everything else is the same.

To exploit the full potential of AJAX and get the most out of this article, you will need to be familiar with JavaScript (jQuery will suffice), as well as HTML, CSS and PHP. If your JavaScript knowledge is a bit iffy, don’t worry; you’ll still be able to follow the logic. If you need a hand, just submit a comment, and I’ll try to help out.

How Not To Use AJAX

One method that has been around, and which I used myself back in the bad old days, is to simply load the wp-load.php file at the top of your PHP script. This let’s you use WordPress functions, detect the current user and so on. But this is basically a hack and so is not future-proof. It is much less secure and does not give you some of the cool options that the WordPress system does.

How AJAX Works In WordPress Natively

Because AJAX is already used in WordPress’ back end, it has been basically implemented for you. All you need to do is use the functions available. Let’s look at the process in general before diving into the code.

Every AJAX request goes through the admin-ajax.php file in the wp-admin folder. That this file is named admin-ajax might be a bit confusing. I quite agree, but this is just how the development process turned out. So, we should use admin-ajax.php for back-end and user-facing AJAX.

Each request needs to supply at least one piece of data (using the GET or POST method) called action. Based on this action, the code in admin-ajax.php creates two hooks, wp_ajax_my_action and wp_ajax_nopriv_my_action, where my_action is the value of the GET or POST variable action.

Adding a function to the first hook means that that function will fire if a logged-in user initiates the action. Using the second hook, you can cater to logged-out users separately.

Implementing AJAX In WordPress

Let’s build a rudimentary voting system as a quick example. First, create an empty plugin and activate it. If you need help with this part, look at the tutorial on creating a plugin. Also, find your theme’s single.php file, and open it.

Preparing to Send the AJAX Call

Let’s create a link that enables people to give a thumbs up to our articles. If a user has JavaScript enabled, it will use JavaScript; if not, it will follow the link. Somewhere in your single.php file, perhaps near the article’s title, add the following code:

<?php
    $votes = get_post_meta($post->ID, "votes", true)
    $votes = ($votes == "") ? 0 : $votes;
?>
This post has <div id='vote_counter'><?php echo $votes ?></div> votes<br>

<?php
    $nonce  = wp_create_nonce("my_user_vote_nonce");
    $link   = admin_url('admin-ajax.php?action=my_user_vote&post_id='.$post->ID.'&nonce='.$nonce);
    echo '<a data-nonce="' . $nonce . '" data-post_id="' . $post->ID . '" href="' . $link . '">vote for this article</a>';
?>

First, let’s pull the value of the votes meta key related to this post. This meta field is where we will store the total vote count. Let’s also make sure that if it doesn’t exist (i.e. its value is an empty string), we show 0.

We’ve also created an ordinary link here. The only extra bit is a pinch of security, using nonces, to make sure there is no foul play. Otherwise, this is simply a link pointing to the admin-ajax.php file, with the action and the ID of the post that the user is on specified in the form of a query string.

To cater to JavaScript users, we have added a user_vote class, to which we will attach a click event, and a data-post_id property, which contains the ID of the post. We will use these to pass the necessary information to our JavaScript.

Handling the Action Without JavaScript

If you click this link now, you should be taken to the admin-ajax.php script, which will output -1. This is because no function has been created yet to handle our action. So, let’s get cracking!

In your plugin, create a function, and add it to the new hook that was created for us. Here’s how:

01 add_action("wp_ajax_my_user_vote", "my_user_vote");
02 add_action("wp_ajax_nopriv_my_user_vote", "my_must_login");
03
04 function my_user_vote() {
05
06    if ( !wp_verify_nonce( $_REQUEST['nonce'], "my_user_vote_nonce")) {
07       exit("No naughty business please");
08    }  
09
10    $vote_count = get_post_meta($_REQUEST["post_id"], "votes", true);
11    $vote_count = ($vote_count == '') ? 0 : $vote_count;
12    $new_vote_count = $vote_count + 1;
13
14    $vote = update_post_meta($_REQUEST["post_id"], "votes", $new_vote_count);
15
16    if($vote === false) {
17       $result['type'] = "error";
18       $result['vote_count'] = $vote_count;
19    }
20    else {
21       $result['type'] = "success";
22       $result['vote_count'] = $new_vote_count;
23    }
24
25    if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
26       $result = json_encode($result);
27       echo $result;
28    }
29    else {
30       header("Location: ".$_SERVER["HTTP_REFERER"]);
31    }
32
33    die();
34
35 }
36
37 function my_must_login() {
38    echo "You must log in to vote";
39    die();
40 }

First of all, we’ve verified the nonce to make sure that the request is nice and legit. If it isn’t, we simply stop running the script. Otherwise, we move on and get the vote count from the database; make sure to set it to 0 if there is no vote count yet. We then add 1 to it to find the new vote count.

Using the update_post_meta() function, we add the new vote count to our post. This function creates the post’s meta data if it doesn’t yet exist, so we can use it to create, not just update. The function returns true if successful and false for a failure, so let’s create an array for both cases.

I like to create these result arrays for all actions because they standardize action handling, giving us good debugging information. And, as we’ll see in a second, the same array can be used in AJAX and non-AJAX calls, making error-handling a cinch.

This array is rudimentary. It contains only the type of result (error or success) and the vote count. In the case of failure, the old vote count is used (discounting the user’s vote, because it was not added). In the case of success, we include the new vote count.

Finally, we detect whether the action was initiated through an AJAX call. If so, then we use the json_encode() function to prepare the array for our JavaScript code. If the call was made without AJAX, then we simply send the user back to where they came from; obviously, they should be shown the updated vote count. We could also put the array in a cookie or in a session variable to return it to the user the same way, but this is not important for this example.

Always end your scripts with a die() function, to ensure that you get back the proper output. If you don’t include this, you will always get back a -1 string along with the results.

The function to handle logged-out users is obviously poor, but it is meant merely as an example. You can expand on it by having it redirect the user to a registration page or by displaying more useful information.

Adding JavaScript to the Mix

Because we’ve now handled the user’s action using regular methods, we can start building in the JavaScript. Many developers prefer this order because it ensures graceful degradation. In order for our system to use AJAX, we will need to add jQuery, as well as our own JavaScript code. To do this, WordPress-style, just go to your plugin and add the following.

01 add_action( 'init', 'my_script_enqueuer' );
02
03 function my_script_enqueuer() {
04    wp_register_script( "my_voter_script", WP_PLUGIN_URL.'/my_plugin/my_voter_script.js', array('jquery') );
05    wp_localize_script( 'my_voter_script', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' )));       
06
07    wp_enqueue_script( 'jquery' );
08    wp_enqueue_script( 'my_voter_script' );
09
10 }

This is the WordPress way of including JavaScript files. First, we register the JavaScript file, so that WordPress knows about it (so make sure to create the file and place it somewhere in the plugin). The first argument to the wp_register_script() function is the “handle” of our script, which is a unique identifier. The second is the location of the script. The third argument is an array of dependencies. Our script will require jQuery, so I have added it as a dependency. WordPress has already registered jQuery, so all we needed to add was its handle. For a detailed list of the scripts that WordPress registers, look at the WordPress Codex.

Localizing the script is not strictly necessary, but it is a good way to define variables for our script to use. We need to use the URL of our admin-ajax.php file, but because this is different for every domain, we need to pass it to the script. Instead of hard-coding it in, let’s use the wp_localize_script() function. We add the script handle as the first argument, an object name as the second argument, and we can add object members as an array in the third parameter. What this all boils down to is that, in our my_voter_script.js file, we will be able to use myAjax.ajaxurl, which contains the URL of our admin-ajax.php file.

Once our scripts have been registered, we can actually add them to our pages by enqueueing them. We don’t need to follow any particular order; WordPress will use the correct order based on the dependencies.

Once that’s done, in the my_voter_script.js JavaScript file, paste the following code:

01 jQuery(document).ready( function() {
02
03    jQuery(".user_vote").click( function() {
04       post_id = jQuery(this).attr("data-post_id")
05       nonce = jQuery(this).attr("data-nonce")
06
07       jQuery.ajax({
08          type : "post",
09          dataType : "json",
10          url : myAjax.ajaxurl,
11          data : {action: "my_user_vote", post_id : post_id, nonce: nonce},
12          success: function(response) {
13             if(response.type == "success") {
14                jQuery("#vote_counter").html(response.vote_count)
15             }
16             else {
17                alert("Your vote could not be added")
18             }
19          }
20       })  
21
22    })
23
24 })

Let’s go back to the basics. This would be a good time for those of us who are new to AJAX to grasp what is going on. When the user clicks the vote button without using JavaScript, they open a script and send it some data using the GET method (the query string). When JavaScript is used, it opens the page for them. The script is given the URL to navigate to and the same parameters, so apart from some minor things, from the point of view of the script being run, there is no difference between the user clicking the link and an AJAX request being sent.

Using this data, the my_user_vote() function defined in our plugin should process this and then send us back the JSON-encoded result array. Because we have specified that our response data should be in JSON format, we can use it very easily just by using the response as an object.

In our example, all that happens is that the vote counter changes its value to show the new vote count. In reality, we should also include some sort of success message to make sure the user gets obvious feedback. Also, the alert box for a failure will be very ugly; feel free to tweak it to your liking.

Conclusion

This concludes our quick tutorial on using AJAX in WordPress. A lot of functionality could still be added, but the main point of this article was to show how to properly add AJAX functionality itself to plugins. To recap, the four steps involved are:

  1. Make the AJAX call;
  2. Create the function, which will handle the action;
  3. Add the function to the hook, which was dynamically created for us with the action parameter;
  4. Create success handlers as needed.

As mentioned, make sure everything works well without JavaScript before adding it, so that the website degrades properly for people who have disabled it.

Keep in mind that, because we are using hooks, we can also tie existing WordPress functions to our AJAX calls. If you already have an awesome voting function, you could just tie it in after the fact by attaching it to the action. This, and the ease with which we can differentiate between logged-in states, make WordPress’ AJAX-handling system very powerful indeed.

(al)

Drag And Drop jQuery Plugins

Do you want to become drag and drop feature expert? Then look no further – this article is just for you! Mostly these plugins are written in jQuery,  and they are super easy to customize and implement in your own projects very fast.

Why such plugins are so handy? You can give your visitors a lot more customization options, they can virtually personalize your website or tool to suit it better for their needs. And you must know – people love it, I love it myself!

Ready to drag and drop into this article?

 

preview drag drop everything jquery handy plugins freebies

1. Superfun

It creates a superior Lightbox that allows for AJAX injection, SWF content, iFrame content, and utilizes the new CSS3 transform property to mimick a Flash enviroment, while completely avoiding Flash.

superfun drag drop plugins freebies

Download Now | View Demo

1.1.ZipDrop

A simple and lightweight Drag and Drop system powered by jQuery UI and PHP that allows you to Drag and Drop whichever file you wish to download from the server.

The server will then zip the files and allow you to download them in only one zip instead of having to download multiple files.This is both a great bandwith saver for server and user alike, but also very easy and an aesthetic asset to your website.

View Demo

2. animaDrag

AnimaDrag allows draggable items to be eased by jQuery animation, which UI draggables do not allow. This allows for a richer display of the transition between two locations, with full easing support.

Download Now | View Demo

3. CropZoom

CropZoom is a plugin that let you select an area of an image to crop, whit this you can zoom in or zoom out,drag and also rotate. this plugins needs ui.droppable, ui.resizable, ui.slider from JQuery UI. Some code was taken from jquery.svgdom.js Written by Keith Wood.

Download Now | View Demo

4. Jquery Iviewer

JQuery.iviewer is a jquery plugin used to load and view image in container with ability to zoom image and to drag it with mouse in container.

Download Now | View Demo

5. Draggable

Download Now | View Demo

6. Ultra small code to drag everything in HTML page

Download Now

7. Dragscrollable

Scroll a large nested layer within a viewport using native scroll from the container. It does not require drag and drop functionality from UI and it is faster than UI dragging.

Download Now | View Demo

8. jQuery Draggable

Drag image into DIV area.

Download Now | View Demo

9. Nettuts drag and drop

Download Now | View Demo

10. Drag’n Drop With jQuery And PHP

Download Now | View Demo

10.1. Drop n’ Save – Drag & Drop Uploader

Build a file sharing or image hosting business with this user friendly interface or integrate it easily to enrich your existing site.

A file upload application, with the added benefit of the drag and drop functionality. Allows users to quickly and easily upload multiple files to your server by dragging & dropping them into the drop box or select files via the traditional uploader pop up, and have on-going access to them for download/sharing/modification/removal. Each upload boasts a full complement of sharing icons so files can be easily distributed to an unlimited audience at the click of a button.

View Demo

11. jQuery List DragSort

A lightweight jQuery plugin that provides the ability to sort lists using drag and drop.

Download Now

12. Collapsible, Drag n Drop Panels

Drag n Drop panels are great to let the user control how he/she wants to see the information as he can arrange various information blocks according to his preference. This type of functionality is often provided by web portals or personal homepage services like iGoogle.

Download Now | View Demo

13. jquery.event.drag

A jquery special event plugin that makes the task of adding complex drag interactions, to any element, simple and powerful.

Download Now | View Demo

14. Drag To Share

Drag picture to share it on your favorite social network!

Download Now | View Demo

15. MapBox

The jQuery mapbox() plugin is for creating relatively small scale, zoomable, draggable maps with multiple layers of content. This framework could be applied to games, development plans, or any layout that could benefit from being able to zoom in and pan to get a better view.

Download Now | View Demo

16. JDock

Download Now | View Demo

17. Dragndrop

Download Now | View Demo

18. Interface plugin for jQuery

Interface is a collection of rich interface components which utilizes the lightweight JavaScript library jQuery. With this components you can build rich client web applications and interfaces with the same simplicity as writing JavaScript with jQuery.

Download Now | View Demo

19. jQuery TextAreaResizer plugin

Download Now | View Demo

20. jqDnR

jqDnR is a lightweight plugin for jQuery that lets you drag, drop, and resize elements.

Download Now | View Demo

21. Table Drag and Drop JQuery plugin

This TableDnD plugin allows the user to reorder rows within a table, for example if they represent an ordered list (tasks by priority for example). Individual rows can be marked as non-draggable and/or non-droppable (so other rows can’t be dropped onto them). Rows can have as many cells as necessary and the cells can contain form elements.

Download Now | View Demo

22. Drag & Drop Sortable Lists with JavaScript and CSS

Download Now | View Demo

23. jQuery Portlets

View Demo

24. jquery mb.containerPlus

This is a useful plug in to build full featured and fully skinnable containers. The container can be set to draggable, resizable, collapsable and minimizable.

Download Now | View Demo

25. Creating a Draggable Sitemap with JQuery

View Demo

26. jQuery Reel Plugin

Reel is a jQuery plugin which takes an image tag and makes it a live “projection” of pre-built animation frames sequence. Its aim is to provide a 360° view of something or someplace. Great alternative to widely used Flash and Java techniques.

Download Now | View Demo

27. jQuery UI multiple draggable plugin

The jQuery multiple draggable plugin is an extension to the jQuery UI Draggable plugin. This plugin extends the current functionality to allow for elements to be grouped and dragged as a group. The aim of the plugin is to include all of the current functionality listed in the options.

To group and ungroup elements simply control click, the ui-multidraggable extension is applied for styling purposes and also to alert the plugin as to which elements are grouped.

Download Now | View Demo

28. Resizable

Resize rectangle with content in ways you want to.

Download Now | View Demo

29. EasyDrag jQuery Plugin

Download Now | View Demo

30. Drag & Drop with PHP & jQuery

Download Now | View Demo

source:1stwebdesigner.com

CSS3 breadcrumbs

A breadcrumb navigation allow users to know where they are in a hierarchical structure and navigate back to higher-level pages in the hierarchy. Also, the breadcrumbs can reduce the number of actions a user need to perform in order to navigate back.

So, to keep it simple, if you have a website with lot of pages and sub-levels, in order to increase usability, you need to use breadcrumbs. Having said that, today you’ll learn how to create your own cool CSS3 breadcrumbs.

 

View demo

The HTML

Tha markup is simple and minimal, based on an unordered list.

<ul id="breadcrumbs-one">
    <li><a href="">Lorem ipsum</a></li>
    <li><a href="">Vivamus nisi eros</a></li>
    <li><a href="">Nulla sed lorem risus</a></li>
    <li><a href="">Nam iaculis commodo</a></li>
    <li><a href="">Current crumb</a></li>
</ul>

The CSS

First, let’s add a mini CSS reset for our unordered lists:

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

Secondly, I’d like to add that all the breadcrumbs I made for this tutorial are using CSS pseudo-elements. I bet there’s no need to specify what pseudo-elements are and how cool they are.

First example

Here I used a similar technique to the one I used for creating these CSS3 tooltips. Basically, to create a right-bordered triangle effect, the triangles created with pseudo-elements are placed one above another. The darker triangle will be shifted a bit in order to achieve the border.

#breadcrumbs-one{
  background: #eee;
  border-width: 1px;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-one li{
  float: left;
}

#breadcrumbs-one a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);  
}

#breadcrumbs-one li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-one a:hover{
  background: #fff;
}

#breadcrumbs-one a::after,
#breadcrumbs-one a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

#breadcrumbs-one a::after{ 
  z-index: 2;
  border-left-color: #ddd;  
}

#breadcrumbs-one a::before{
  border-left-color: #ccc;  
  right: -1.1em;
  z-index: 1; 
}

#breadcrumbs-one a:hover::after{
  border-left-color: #fff;
}

#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-one .current::after,
#breadcrumbs-one .current::before{
  content: normal;  
}

Second example

The CSS shapes built with the pseudo-elements are placed before, respectively after.

#breadcrumbs-two{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-two li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-two a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
  position: relative;
}

#breadcrumbs-two a:hover{
  background: #99db76;
}

#breadcrumbs-two a::before{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ddd #ddd #ddd transparent;
  left: -1em;
}

#breadcrumbs-two a:hover::before{
  border-color: #99db76 #99db76 #99db76 transparent;
}

#breadcrumbs-two a::after{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid #ddd;
  right: -1em;
}

#breadcrumbs-two a:hover::after{
  border-left-color: #99db76;
}

#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
  content: normal;
}

Third example

Using border-radius we will round the corners for our rectangle and square shapes. The square will be rotated, in order to achieve a rounded diamond.

#breadcrumbs-three{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-three li{
  float: left;
  margin: 0 2em 0 0;
}

#breadcrumbs-three a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  background: #ddd;  
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  border-radius: .4em 0 0 .4em;  
}

#breadcrumbs-three a:hover{
  background: #abe0ef;
}

#breadcrumbs-three a::after{
  background: #ddd;
  content: "";
  height: 2.5em;
  margin-top: -1.25em;
  position: absolute;
  right: -1em;
  top: 50%;
  width: 2.5em;
  z-index: -1; 
  transform: rotate(45deg);
  border-radius: .4em;
}

#breadcrumbs-three a:hover::after{
  background: #abe0ef;
}

#breadcrumbs-three .current,
#breadcrumbs-three .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-three .current::after{
  content: normal;
}

Fourth example

Again, with the pseudo-elements you’ll add two rectangles before and after the element. Then you’ll round the outer sides for each one. The rest is nothing but poetry.:)

#breadcrumbs-four{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-four li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-four a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
  position: relative;
}

#breadcrumbs-four a:hover{
  background: #efc9ab;
}

#breadcrumbs-four a::before,
#breadcrumbs-four a::after{
  content:'';
  position:absolute;
  top: 0;
  bottom: 0;
  width: 1em;
  background: #ddd;
  transform: skew(-10deg);  
}

#breadcrumbs-four a::before{

  left: -.5em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-four a:hover::before{
  background: #efc9ab;
}

#breadcrumbs-four a::after{
  right: -.5em;   
  border-radius: 0 5px 5px 0;
}

#breadcrumbs-four a:hover::after{
  background: #efc9ab;
}

#breadcrumbs-four .current,
#breadcrumbs-four .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-four .current::after,
#breadcrumbs-four .current::before{
  content: normal;
}

View demo

CSS3 breadcrumbs advantages

  • No images, so it’s easy to update and maintain.
  • Everything is scalable, em based.
  • Contains fallbacks for older browsers.

Final words

I didn’t merged the common styles for the above breadcrumbs with a purpose. I thought that if you need a certain breadcrumbs style, just copy&paste that, without other CSS inheritances issues.

http://www.red-team-design.com

Awesome jQuery Image and Slider Plugins from 2012

Those times when neat image effects were achieved with Flash are gone. jQuery has drastically changed the way developers work. Because its light-weight, easily customized and has unlimited possibilities, jQuery has become the new standard for displaying visual media on the web. For this roundup we’ve prepared 30 fresh, useful and simply awesome jQuery image and slider plugins that we’ve found this year. You’ll find some really stunning gallery solutions for every taste as well as some creative image effect plugins there.

preview large bgstrecher 2 design tools design

Where can you use them? Sliders are the perfect solution for a product/work/content showcase. They don’t take up much space, are handy and look good. Look at these examples of neat slider usage.

Wunderkit

wunderkit jquery image gallery plugins design tools design

Wunderkit uses a beautiful slider to show off their app.

Premium Pixels

Premiumpixels-jquery-image-gallery-plugins

Premium Pixels has an unusual, yet awesome, solution. They’re using a slider in their sidebar to show premium WordPress themes.

Of course, there are other plugins in the list as well. Implementing large backgrounds, zooming images, optimizing them for retina displays – you’ll find it all below.

1. TN3 Gallery

Tn3-jquery-image-gallery-plugins

TN3 Gallery is a powerful jQuery image gallery and WordPress plugin with slideshow, transitions effects, multiple album options, CSS skinning and much more. It’s compatible with all modern desktop and mobile browsers. It’s a premium plugin, but you can get the lite version for free.

2. Galleria

Galleria-jquery-image-gallery-plugins

Galleria is a JavaScript image gallery framework. The aim is to simplify the process of creating professional image galleries for the web and mobile devices.

3. Adipoli

Adipoli-jquery-image-gallery-plugins

Adipoli is a simple jQuery plugin with 20+ stylish image hover effects.

4. Slidorion

Slidoron-jquery-image-gallery-plugins

A combination of an image slider and an accordion, the Slidorion displays beautiful images along with a variable length description. With slides linked to each tab, and accompanied by a large array of effects, the Slidorion is a great alternative to the traditional jQuery slider.

5. Nivo Slider

Nivo-jquery-image-gallery-plugins

Nivo is an awesome jQuery and WordPress image slider packed with 16 transition effects, simple and clean markup and loads of settings to tweak.

6. Flexslider

Flexslider-jquery-image-gallery-plugins

An awesome, fully responsive jQuery slider plugin with simple markup, multiple slider support and custom navigation options.

7. Glisse.js

Glisse-jquery-image-gallery-plugins

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

8. Sequence

Sequence-jquery-image-gallery-plugins

Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality of a website slider without forcing you to use a set theme. In fact, Sequence has no built in theme, leaving you complete creative control to build a unique slider using only CSS3.

9. Slides

Slides-jquery-image-gallery-plugins

SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.

10. Rhinoslider

Rhinoslider-jquery-image-gallery-plugins

Rhinoslider is the most flexible jQuery slideshow there is. You are welcome to try it yourself. Not only does it offer a variety of effects, it also allows you to add your own styles, effects and features to the slider.

11. Pikachoose

Pikachoose-jquery-image-gallery-plugins

Pikachoose is a lightweight jQuery slideshow plugin, with tons of great features. jCarousel integrates smoothly with PikaChoose to give your gallery a simple and effective carousel. It can be customized in plenty of different ways.

12. Camera

Camera-jquery-image-gallery-plugins

Camera is a beautiful open source slideshow project. It works with all major browsers as well as mobile devices.

13. Quake Slider

Quake-jquery-image-gallery-plugins

Simple, easily customizable, beautiful slider with 3 color schemes and 40+ transitions.

14. bxslider

Bx-jquery-image-gallery-plugins

bxslider is an easy to implement jQuery custom content slider with a bunch of transition effects.

15. rcarousel

Rcarousel-jquery-image-gallery-plugins

rcarousel is no longer being updated, yet it still serves it’s purpose and you can feel free to tweak it for your needs.

16. iPicture

Ipicture-jquery-image-gallery-plugins

iPicture is a jQuery Plugin to create interactive pictures with extra descriptions.

17. jCrop

Jcrop-jquery-image-gallery-plugins

Jcrop is the quick and easy way to add image cropping functionality to your web application. It combines the ease-of-use of a typical jQuery plugin with a powerful cross-platform DHTML cropping engine that is faithful to familiar desktop graphics applications.

18. Lazy Karl v1

Lazykarl-jquery-image-gallery-plugins

The lazyKarl jQuery plugin loads a webpage’s images once they are within the user’s viewport.This is a working cross-browser lazy load jQuery plugin. Other lazy load plugins have been less than effective because some major browsers load all of the images on a page when the DOM loads.

19. jQuery.popeye

Popeye-jquery-image-gallery-plugins

jQuery.popeye is an advanced image gallery script. Use it to save space when displaying a collection of images and offer your users a nice and elegant way to show a big version of your images without leaving the page flow.

20. TouchTouch

Touchtouch-jquery-image-gallery-plugins

TouchTouch is a jQuery plugin that turns a collection of photos on a webpage into a touch-friendly mobile gallery. It works on all major browsers (except for IE7 and below) and most importantly is specifically designed with iOS and Android in mind.

21. Better Backgrounds

Background-jquery-image-gallery-plugins

Better Backgrounds is a WordPress plugin which shows a random background image every visitor session (using a cookie), page refresh, or timed slideshow interval.

22. bgStretcher

Bgstretcher-jquery-image-gallery-plugins

bgStretcher jQuery plugin allows you to add a background image to page and proportionally resize it to fill entire window area.

23. Black and white

Bw-jquery-image-gallery-plugins

This plug-in can easily convert every colored image (in an html page) into a B&W grayscale image.

24. lake.js

Lake-jquery-image-gallery-plugins

Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element.

25. jQuery Retina Plugin

Retina-jquery-image-gallery-plugins

Images that aren’t retina optimized look blown up and fuzzy on retina devices. At the moment, this is only the new iPad (aka, iPad 3), iPhone 4 and 4S. However, more and more devices will soon be retina enabled; from Android and Windows mobile devices, to OSX and Windows desktops. This is a jQuery plugin that will swap out the image source for an image that is sized for retina displays.

26. Nivo Zoom

Zoom-jquery-image-gallery-plugins

Nivo Zoom is a jQuery image zoom plugin with 5 different zooming types, support for HTML captions and loads of settings to tweak.

27. NailThumb

Nailthumb-jquery-image-gallery-plugins

Create thumbnails easily from high-res images, without any distortion, with one line of code.

28. aeImageResize

Resize-jquery-image-gallery-plugins

aeImageResize is a jQuery plugin to dynamically resize the images without distorting the proportions.

29. Riva Slider (premium – €19.99)

Riva-jquery-image-gallery-plugins

Riva Slider is the ultimate WordPress slider plugin. Create and display slideshows within minutes. No commotion and designed for ease of use, saving you tons of time to spend on things that matter.

30. HoverAlls (premium – $6)

Hoveralls-jquery-image-gallery-plugins

HoverAlls is a unique jQuery animation plugin that allows you to create animation effects quickly – without any knowledge of Javascript of jQuery. With over 40 settings, HoverAlls can create unique animations for nearly any type of effect desired.

31. Zuper Responsive Multitouch Slider (premium – $10)

Zuper-jquery-image-gallery-plugins

This Zuper Slider uses unobtrusive JavaScript and a powerful configuration panel for effects and design elements to transform a block of simple HTML markup into a beautiful elegant slider.

32. jQuery Banner Rotator (premium – $10)

Banner-jquery-image-gallery-plugins

jQuery banner rotator allows you to easily create powerful sliders with animated text using HTML standard tags, making the slider very easy to setup and maintain.

Source:http://www.1stwebdesigner.com/

60 jQuery Plugins You Should Try Today

jQuery, a cross-browser JavaScript library has come a long way in simplifying the client-side scripting of HTML. Since its release in Jan 2006, it has been the popular JavaScript library in use today. According to Wikipedia, it is used by over 52% of the 10,000 most visited websites.

jQuery plugins help you to create awesome effects without using heavy coding and make your website awesome and a pleasure to look at. Today we have collected 60 new jQuery plugins that will add wonderful elements to your webpage. Due to their high usability of these jQuery plugins, made them enter this list. Baca lebih lanjut

Resources That Complement Twitter Bootstrap

Twitter Bootstrap is a beautiful “web design kit” for creating cross browser, consistent and good looking interfaces.

With a flexible and well-thought HTML/CSS/Javascript structure, it offers many of the popular UI components, a grid system and JavaScript plugins for common scenarios.

Twitter Bootstrap

And, it seems to be rocking the web design community as there are lots of websites already built and being built with it (it is also the most watched/forked repository in GitHub).

Twitter Bootstrap is already powerful enough to empower any web interface. In order to make more use of it and/or ease the development process, there are various tools/resources that complement it.

These include Bootstrap themed vector UI images, WordPress themes, web-based Bootstrap customizers and more. Here they are:

jQuery UI Bootstrap

jQuery UI Bootstrap

This is an awesome resource for jQuery and Twitter Bootstrap users that combines the power of both. Baca lebih lanjut