jQuery is the most popular of the JavaScript libraries, and its popularity continues to grow. Many websites have adopted jQuery for dynamic effects and is now highly used.
One of the big advantages of jQuery is the ability to develop custom plugins, allowing us to quickly reuse our code. Plugins are also a practical way to distribute our functions to the entire jQuery community.
After reading this, you will have learned how to create a plugin and you will be able to create this kind of slideshow.
Here is the HTML file
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="custom.js"></script>
<script>
$(document).ready(function () {
$('#slideshow').slide({ 'delay': 3000, 'fadeSpeed': 1000 });
// we are sending values to slide function which is defined in plugin, setting the values and perform the operation.
});
</script>
<style>
img {
height: 500px;
width: 500px;
display: none;
top: 0px;
position: absolute;
left: 0px;
}
</style>
</head>
<body>
<div style="width: 100%; text-align: center">
<div id="slideshow" style="width: 500px; height: 500px">
<img src="images/1.jpg" alt="1" />
<img src="images/2.jpg" alt="2" />
<img src="images/3.jpg" alt="3" />
<img src="images/4.jpg" alt="4" />
<img src="images/5.jpg" alt="5" />
<img src="images/6.jpg" alt="6" />
</div>
</div>
</body>
custom.js:
(function ($) {
$.fn.slide = function (settings) {
//here settings object holds the values which have been passed as a parameter
//in the slide function
var config = $.extend({
//extends function replace the default values to the passed values
delay: null, //3000
fadeSpeed: null //1000
}, settings);
//holds the values
var obj = $(this);
//obj stores the reference of the current object which is $("#slideshow")
var img = obj.children('img');
//images are in the div container having id slideshow,
//'div' act as a parent element and all the 'img' act as his childrens
var count = img.length
//count will have the no. of images present in the div element
var i = 0;
img.eq(0).show();
//show the first image of the div container which is at position 0
setInterval(function () {
//it will be called continously at given interval (after 3000ms)
//as config.delay having assigned value 3000ms
img.eq(i).fadeOut(config.fadeSpeed);
//here initially value of i = 0 then the image at position 0 will be fadeOut at given fadeSpeed
i = (i + 1 == count) ? 0 : i + 1;
setTimeout(show, 1000); //this function will be called after 1000ms = 1sec which is used to show the next image eg. at position 1
}, config.delay);
function show() {
img.eq(i).fadeIn(config.fadeSpeed); //show the image with a given fadeSpeed
}
}
} (jQuery));
In Head Section
![jQuery slideshow plugin Head Section]()
Body section
![jQuery slideshow plugin Body Section]()
custom.js
![jQuery plugin File Code]()
I have attached files that you can add your own creativity to and customize in your own way. Happy Learning...