Development

The Ultimate Javascript Plugins

10/01/2018

As a web developer, I have used many JavaScript plugins whilst developing websites. Here are four of the best plugins I have used throughout my time so far.

Match Height Plugin

The Match Height script created by the user “liabru” on Github is a life saver for web development. Using jQuery, it matches the height of your chosen elements identified by CSS classes. Elements that are next to each other will become the same height. If elements with the same class run onto the next line, these elements will not match the height with those on the line above. They will match the height of other elements on their line. Below is some example code for the Match Height script:

$(function() {
$(‘.matchParent .matchItem‘).matchHeight();
});

Once you have linked the appropriate JavaScript files, using just the code shown above, the script can work its magic.

The Match Height script takes borders, paddings, margins and box-sizing properties into account. It also comes with a vast array of options for you to choose from. However, I have never had any reason to use the extra options – the simple code listed above is enough to get this working.

Many well-known businesses use the Match Height script according to Libscore. This includes Lenovo, Mcaffee, Atlassian, FC Barcelona, Tesco, Nokia, WWE and Mastercard.

Match Height is probably the most trusted JavaScript plugin that I have ever come across and is certainly the plugin that I have used the most in web development.

Slick Slider

Slick Slider has become my go-to answer for implementing sliders on websites. This solution, created by Ken Wheeler, really does do the business.

You can choose whether to include (set by default) or disable the Slick CSS. The default CSS allows for full responsiveness allowing for a top user experience on every device. However, my choice is to disable the default CSS which allows for total customisation of the plugin in line with the website I am working on.

The slider comes with many options that you can set in your JavaScript file. This includes options for looping, swiping, navigation controls, auto-playing and much more. You can also choose whether to use thumbnail images or not. There are multiple layouts to choose from within the options menu. However, with CSS, nearly anything is possible.

The basic code to initialise a slider is below. The CSS class should correspond to an element that has child elements which are to be slides. For example, you can set it to a “ul” element which has multiple “li” elements inside.

$(‘.home-slider’).slick();

The code gets a bit more complex as you add more options to the slider. Below is example code for a slider with thumbnails.

$(‘.home-slider’).slick({
slidesToShow: 1,
slidesToScroll:1,
arrows:false,
fade:true,
asNavFor: ‘.slider-nav’
});
$(‘.slider-nav’).slick({
slidesToShow: 3,
slidesToScroll:1,
asNavFor: ‘.home-slider’,
Dots: true,
centerMode: true,
focusOnSelect: true
});

You can find more options for Slick Slider on the website. This is the most flexible slider that I have come across whilst working web development, and is definitely my preferred slider solution for any website.

Masonry

There are many different layouts you can give to a blog. Masonry is one of the most exciting layouts you can give to a blog. Instead of the standard layout of one post under another, Masonry positions elements based on available vertical space. The final result can be likened to a brick building.

 

To get Masonry working, you need to set up your HTML and CSS up first before creating the JavaScript function. You should set up a container which includes all of the items to be included in the masonry layout. The items should have the appropriate classes for which size they need to be. For example, one size type could be 140px wide, and the second could be 180px with the third being 220px wide. Widths can be both fixed widths or percentages when using the Masonry script. However please note that if you use percentages, it has to be defined in the JavaScript as well.

Shown below is some example HTML and CSS code which shows the basic script in practice:

HTML

<div class=”grid”>
<div class=”grid-item”><img src=”test.jpg” /></div>
<div class=”grid-item grid-size-2”><img src=”test2.jpg” /></div>
<div class=”grid-item grid-size-3”><img src=”test3.jpg” /></div>
<div class=”grid-item grid-size-4”><img src=”test4.jpg” /></div>
</div>

CSS

.grid-item {
Float:left;
Width:140px;
Border:1px solid #DDD
}
.grid-size-2 { width: 180px; }
.grid-size-3 { width:220px; }
.grid-size-4 { width: 90px; }

This will get the basic structure in place, but to get Masonry working you will need to create a function. The example function for this is shown below. The elements that are going to form the Masonry layout have to be defined with the “itemSelector” option. The columnWidth is the default width which can be overwritten with CSS.

$(‘grid’).masonry({
itemSelector: ‘.grid-item’,
columnWidth: 140
});

This will get the basic features of Masonry up and running on your site. However there are some more advanced options you can use to get the most out of this JavaScript plugin. This includes options for a gutter (spacing between elements), ordering elements horizontally and starting the elements from the right hand size rather than the left hand side.

Masonry is a widely used JavaScript plugin. There are many websites and themes that use Masonry to display its content. Whether you are creating a blog, news site or portfolio, Masonry is a great script to use to display your content in a fun and interesting way.

Lightgallery

There are a lot of lightbox JavaScript plugins available on the internet. The last one I used – Lightgallery – really does the job. Made by Github user sachinchoolur, it is a great plugin to use for displaying images in a lightbox. After setting up the links to the script files, there is not a lot more you need to do to get it working. Shown below is the example HTML and JavaScript code to get it running:

HTML

<div id=”gallery” class=”gallery”>
<a href=”img1.jpg” class=”gallery-link”>
<img src=”img1.jpg” />
</a>
<a href=”img2.jpg” class=”gallery-link”>
<img src=”img2.jpg” />
</a>
</div>

JAVASCRIPT

$(document).ready(function() {
$(“#gallery”).lightGallery();
});

It really is that simple – the above code is all you need to get a basic Lightgallery working. The good thing about Lightgallery is there is no limit – you can style the lightbox with whatever styles, images or icons you want.

To get the most out of Lightgallery, you need to install the thumbnail plugin available on the same site. This will put a list of the thumbnails into the lightbox. This is also fully customisable giving you the flexibility to make it look however you want. You don’t need to do any extra code to get the thumbnails working – if you already have Lightgallery installed then it will work straight after you enter the script links.

There are also some other add-ons you can install for Lightgallery. This includes add-ons for autoplaying, videos, fullscreen implementation and even social sharing. Along with the many options available for Lightgallery, this adds to the amazing amount of customisation you can give the Lightbox JavaScript plugin.

If you require any assistance with your plugins or website development at any point, please contact us through our website or call 01206 808090.