Most Useful JQuery Plugins for Website Design

A PHP Error was encountered

Severity: Notice

Message: Undefined offset: 0

Filename: views/courses-details.php

Line Number: 76

Backtrace:

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 76
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 569
Function: view

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Notice

Message: Trying to get property of non-object

Filename: views/courses-details.php

Line Number: 76

Backtrace:

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 76
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 569
Function: view

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

Training Mode Regular Fastrack Crash
Classroom | Online

A PHP Error was encountered

Severity: Notice

Message: Undefined offset: 0

Filename: views/courses-details.php

Line Number: 116

Backtrace:

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 116
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 569
Function: view

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Notice

Message: Trying to get property of non-object

Filename: views/courses-details.php

Line Number: 116

Backtrace:

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 116
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 569
Function: view

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

Course Description :

Some of most useful pulgins which is mostly used by web designer, these plugin list very helpful for beginners which is newly entered in web design field.So learn form our blog, if you know about these plugins already skip it. Web Development Institute offer jquery , js course if you want to learn online or offline you can contact us or visit us.

1. Full-featured Image Viewer/Gallery Plugin With jQuery

 

Full featured Image Gallery Plugin is used to pop image in full screen, It is mostly used in gallery pages. It is also called lightbox in website designing.

It is easy to use ,there are following simple steps:

 Step 1 : Download plugin from this given link:

https://www.jqueryscript.net/gallery/Full-Featured-Image-Viewer-Gallery.html

Step2 :  After download you will get :

Css,fonts,img,js folders and index file

  1. From css folder get lightgallery.css file  and put in your css folder and link in your head section in html file.
  2. From js folder get lightgallery.all.min.js file and put in your js folder and link in your footer section in html file after jquery cdn.
  3. Copy fonts folder and paste in your website directory
  4. From 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 place of data-sub-html place your content of image otherwise remove this part. The structure of html content should be same as mentioned above.

Step 3 : Place this script after lightgallery.min.js

<script type="text/javascript">

        $(document).ready(function(){

            $('#lightgallery').lightGallery();

        });

        </script>

 


2. Multiple Selection in Select box

 

 Multiple selection in select box is commonly used plugin in form,it is easy to use there are following steps:

Step 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">

Step 2 : Put class in your select box and write multiple attribute in select box:

<select class="livesearch" multiple>

<option>web design</option>

<option>web development</option>

<option>graphic design</option>

<option>video editing</option>

</select>


Step 3 : paste these scripts after 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 commonly used plugin in website design to slide picture one by one . There are following steps to use :

Step 1 : Set up your HTML markup.

<div class="your-class">

  <div>your content</div>

  <div>your content</div>

  <div>your content</div>

</div>

 

Step 2 :  Add slick.css in your

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>

// Add the new slick-theme.css if you want the default styling

<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>


Step 3 :
 Add slick.js before your closingtag, 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>

 

Step 4:  Initialize your slider in your script file or an inline script tag

$(document).ready(function(){

  $('.your-class').slick({

    setting-name: setting-value

  });

});

Step 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 very useful for website designer to validate form on client side.This is the link where you can learn :

https://jqueryvalidation.org/

 

5. Data Table in Jquery


Data table pulgin is mostly used in web application to filter data, paginate,export excel or pdf etc.

Here are link how to use data table : https://www.webdevelopmentinstitute.com/blog/how-to-use-data-table-plugin-in-jquery

 

 

 

 

A PHP Error was encountered

Severity: Notice

Message: Undefined offset: 0

Filename: views/courses-details.php

Line Number: 406

Backtrace:

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 406
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 569
Function: view

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

A PHP Error was encountered

Severity: Notice

Message: Trying to get property of non-object

Filename: views/courses-details.php

Line Number: 406

Backtrace:

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/views/courses-details.php
Line: 406
Function: _error_handler

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/application/controllers/Welcome.php
Line: 569
Function: view

File: /home/hrdv7o2ounf4/public_html/webdevelopmentinstitute.com/index.php
Line: 315
Function: require_once

Whatsapp