Most Useful JQuery Plugins for Website Design
Some of the most useful plugins mainly used by the web designer make this plugin list very helpful for beginners who are newly entered in the web design field. So learn from our blog; if you know about these plugins already, skip it. Web Development Institute offers jquery, js course; if you want to learn online or offline, you can contact us or visit us.
Complete featured Image Gallery Plugin is used to pop images on full screen; it is mainly used in gallery pages. It is also called lightbox in website designing.
It is easy to use; there are the following simple steps:
-
1. Download plugin from this given link:
https://www.jqueryscript.net/gallery/Full-Featured-Image-Viewer-Gallery.html
-
2. After download, you will get :
Css,fonts,img,js folders and index file
-
From the CSS folder, get the lightgallery.css file and put it in your CSS folder, and link in your head section in the HTML file.
-
From the js folder, get the lightgallery.all.min.js file and put it in your js folder, and link in your footer section in the HTML file after jquery CDN.
-
Copy fonts folder and paste in your website directory
-
From the index file, get the following code:
<ul id="lightgallery" class="list-unstyled row">
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="img/1-1600.jpg" data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
<a href="">
<img class="img-responsive" src="img/thumb-1.jpg">
</a>
</li>
</ul>
Here in the place of data-sub-HTML, place your content of image; otherwise, remove this part. The structure of HTML content should be the same as mentioned above.
- 7. Place this script after lightgallery.min.js
<script type="text/javascript">
$(document).ready(function(){
$('#lightgallery').lightGallery();
});
</script>
- 2. Multiple Selection in Select box
Multiple selections in the select box is a commonly used plugin in form; it is easy to use; there are the following steps:
1.Copy this link in your head section
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.min.css">
2.Put class in your select box and write multiple attributes in the select box:
<select class="livesearch" multiple>
<option>web design</option>
<option>web development</option>
<option>graphic design</option>
<option>video editing</option>
</select>3. paste these scripts after the jquery CDN link :
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.5.1/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(".livesearch").chosen();
</script>
3. Slick Slider
Slick slider is a commonly used plugin in website design to slide pictures one by one. There are the following steps to use :
1. Set up your HTML markup.
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
2. Add slick.css in your <head>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>3. Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +)
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>4. Initialize your slider in your script file or an inline script tag
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});5. When complete, your HTML should look something like:
<html>
<head>
<title>My Now Amazing Webpage</title>
<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
</head>
<body>
<div class="your-class">
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.your-class').slick({
setting-name: setting-value
});
});
</script>
</body>
</html>4. JQuery Validation for form or Client Side Validation
Jquery validation is beneficial for website designers to validate forms on the client-side. This is the link where you can learn :
5.Data Table in Jquery
Data table plugin is mainly used in web applications to filter data, paginate, export excel or pdf, etc.
Here is a link to how to use the data table: https://www.webdevelopmentinstitute.com/blog/how-to-use-data-table-plugin-in-jquery
Categories: web designing jquery
