Few Free Javascript Libs That You Can Use in Projects

Posted in August 28, 2018 by

Categories: Programming Web Development

Tags: , , , , ,

Reading Time: 5 minutes

There are many javascript libraries on the internet. We can solve many problems using them or enhance our project with new features. With so many javascript libraries it is hard to decide which one to use in the project. I write here which libraries I used in my projects and why you should consider using them too.

#jQuery – Essential Choice

This javascript library is the most popular one and the natural choice when you intend to write a project in JS.

Along with popularity many other frameworks and libraries use jQuery like for example Twitter Bootstrap or Lightbox2. Of course, you don’t have to know jQuery to use Bootstrap but it is very useful and time-saving to know this library.

jQuery reduces code amount. What you do in vanilla javascript in 10 lines in jQuery you can do in much less. It saves your time and easier your work. It helps you with DOM manipulation making it much easier to select nodes you need and change, add, delete them as you like.

jQuery provides also AJAX interface which is much easier to use than standard AJAX. Other features of this library are animations. It is very easy to make a drop-down menu or modal login box with help of the jQuery library.

If you are already familiar with jQuery you can write your own plugin which will bring to your project new functionality or you can share your plugin with others.

To sum up you want to use jQuery in your project to simplify your code and workflow. To make your life much easier while working with javascript.

You can download this library from here or use CDN provider by Google, here is link.

If you would like to learn jQuery from Udemy.com here is a good course to start.

#jQuery UI – User Interface Enhancement

This library belongs to standard jQuery lib and it is an extension for it. As the name of the library says its purpose is to provide the functionality to build and support user interfaces.

With jQuery UI you can very easily, for example, create tooltip, drag and drop any element on the screen, create an interactive calendar and much more.

We use features of this library like jQuery plugins evoking it with or without parameters.

Here is an example of adding drag functionality to div with id “div-draggable”:

$(function() { 
    $("#div-draggable").draggable(); 
});

To use jQuery UI you have to first paste into your code standard jQuery library, otherwise, your code will not work.

Here is a link to the jQuery UI website, and the course that I participated at Udemy.com from jQuery UI is here.

#Lightbox2 – Great for Images

With this library, you can create good looking photo shows and galleries. Implementation is very easy.

Here is an example of creating a photo show for an image :

<a href="path_to_image" 
    data-lightbox="image1" 
    data-title="This is my image"> 
        <img src="path_to_image" alt="Some image" /> 
</a>

You can use this library for one image as well as more images. If you want to use this plugin on more images just set the same data-lightbox value to all <a> elements.

Slider controls are customizable.

I used this plugin in one of my projects. Here is an example – link.

At the example page, I combined lightbox 2 with the slick plugin to have a carousel effect and photo show effect at the same time. I write about slick in this post so check it out.

Here you have the official website of Lightbox 2 plugin – link.

#Sweet Alerts – Good Looking Message Boxes

This library brings you good looking message boxes that you can use to display a message to a user in the browser window, but not only this. With this library, you can create various types of message boxes. You can create warnings, errors, you can ask user for input or ask user if he wants to perform some action.

I recommend this library because message boxes look really well and are animated in a good, modern fashion but in CMS project I recently develop I didn’t know how to insert a link into message box string. I didn’t know how to parse string I pass to sweet alert box into HTML when I passed link tag so I switched this functionality to modal boxes from Bootstrap 4.

Nevertheless Sweet Alert do a great job if you want to give user some confirmation message or ask user for some input data.

Here is a simple PHP function that trigger confirms sweet alert when the function is called:

function sweetConfirmAlert($url) { 
    echo '<script>'
.'swal({ 
    title: "Are you sure?", 
    text: "Once deleted, you will not be able to recover this data!", 
    icon: "warning", buttons: true, dangerMode: true, 
  }) 
.then((willDelete) => { 
    if (willDelete) { 
    window.location.assign("'.$url.'"); 
   } 
})'
.'</script>'; }

Here you have a link to sweet alert project website if you would like to get more familiar with this library – link.

#Slick – If You Want to Create Carousel

Slick is a javascript library that brings you a great way of creating a carousel with simplicity. Setting up a carousel never been so easy. You use this lib like a normal jQuery plugin evoking it with or without parameters.

Parameters give you a great possibility to customize how your carousel will look like. If it will have dots at the bottom or if it will be one image after another or many. You can also set an autoplay if you want. Of course like most of javascript libraries you have to link it script after jQuery script in your HTML or PHP document.

The basic setup of slick in javascript looks like this:

$(document).ready(function(){ 
    $('.my-class').slick({ 
        setting-name: setting-value 
    }); 
});

In my project, I combined slick lib with lightbox 2 lib and result you can see under this link.

There is also WordPress plugin of slick but is not for free.

If you would like to get more information about this library, how to install it and use it go to its official website – link.

Final Conclusions

It is very good to use external javascript libraries that are available on the internet. They bring new functionality to your projects and save you tons of time. It is good to first read a bit of documentation of library you want to use. Usually, installation is very easy and usage is easy too or it is well explained in the documentation how to use goodies of certain lib.

Libraries I share in this post are just a few of hundreds you can implement in your projects. In the end I can write that it is good to remember that not everything that is not written by you must be bad for us. Some libraries might be made in this way that w don’t even know where to start with implementation but normally popular libraries are well documented.


Leave a Reply

Your email address will not be published. Required fields are marked *

2 + 13 =