Now most of site are using image gallery and slider feature to your websites. Its very eye catching practice for user prospective.
But for implementing the image slider most of site developers use the ready to use jQuery scripts. Because its easy to implement and take less time to embed. We don't need to understand their logic's to use in our websites.
But it becomes very hard to do some miner script changes which we need to implement for their projects due to back-end logic's and development. Because they jQuery Plugins gives their script code after minify them which is totally unreadable and changeable also.
Here I am providing you simple script code logic for implementing the image slider. I hope it will help to understand logic and jQuery to you guys.
HTML Source Code
Here I am providing GalleryJson.js source code with detail.
Jquery Script Code
Here I have provided you my Hand Written Script for Simple Image Gallery with details why and how it's working. I hope this code will help you to learn Slideshow animation of jquery.
If you guys want to modify or enhance any kind of its feature or have any suggestions please ask for it. So that i can improve my ability of writing jquery codes.
But for implementing the image slider most of site developers use the ready to use jQuery scripts. Because its easy to implement and take less time to embed. We don't need to understand their logic's to use in our websites.
But it becomes very hard to do some miner script changes which we need to implement for their projects due to back-end logic's and development. Because they jQuery Plugins gives their script code after minify them which is totally unreadable and changeable also.
Here I am providing you simple script code logic for implementing the image slider. I hope it will help to understand logic and jQuery to you guys.
HTML Source Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Gallery</title> <script src="http://code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script> <script src="js/GalleryJson.js" type="text/javascript"></script> <style type="text/css"> body{background: #ddd;} .container img,.container a{width: 100px;height: 100px;border: none;} .container ul{float: left;margin: 0;padding: 0;position: relative;} .container li{display: inline;list-style-type: none;margin-right: 10px;float:left;} .container li img{border: solid 2px transparent;} .container .disable{cursor: default;color: #999;} .container{position: relative;float: left;width: 100px;overflow: hidden;} </style> </head> <body> <div class="container" id="gallery1"> <ul class="gal"> <li><a href="javascript:void(0);"> <img src="css/1.jpg" /></a></li> <li><a href="javascript:void(0);"> <img src="css/2.jpg" /></a></li> <li><a href="javascript:void(0);"> <img src="css/3.jpg" /></a></li> <li><a href="javascript:void(0);"> <img src="css/4.jpg" /></a></li> <li><a href="javascript:void(0);"> <img src="css/5.jpg" /></a></li> <li><a href="javascript:void(0);"> <img src="css/2.jpg" /></a></li> </ul> </div> <script type="text/javascript"> $(document).ready(function () { gallery({ gallery: "gallery1",// Mandatory next: "next1", // optionaldefault value "prev: "prev2",gallery1next"// optionaldefault value "gallery1prev" slide: 2,// optionaldefault value 1 auto: true}); }); </script> </body> </html>// optionaldefault value False
Here I am providing GalleryJson.js source code with detail.
Jquery Script Code
gallery = function (options) {
var counter = 0;
var defaults = { "next": options.gallery + "next", "prev": options.gallery + "prev", "slide": 1, "auto": false };
var obj = $.extend(defaults, options);
var liWidth = $("#" + obj.gallery).find("li").outerWidth(true); // Width of single li
var liCount = $("#" + obj.gallery).find("li").length; // Count of lis into UL
// Insert Previous and Next button into gallary
$("#" + obj.gallery).append('<a href="#" class="' + obj.prev + '">Prev</a> <a href="#" class="' + obj.next + '">Next</a>');
$("#" + obj.gallery).find("ul").width(liWidth * liCount); // Calculate gallary total width
$("#" + obj.gallery).width(liWidth * obj.slide); // Set width of wrapper according to thumbnail count;
if (counter == 0) // Default disable status for previous button on page load
{
$($("." + obj.prev)).addClass("disable");
}
// Code for previous button Click
$("." + obj.prev).on("click", function () {
if (counter > 0) {
counter--;
$("." + obj.next).removeClass("disable");
$("#" + obj.gallery).find("ul").animate({ "left": "+=" + liWidth });
if (counter == 0) { $(this).addClass("disable"); }
}
else { $(this).addClass("disable"); }
});
// Code for nexgt button Click
$("." + obj.next).on("click", function () {
if (counter < (liCount - obj.slide)) {
counter++;
$("." + obj.prev).removeClass("disable");
$("#" + obj.gallery).find("ul").animate({ "left": "-=" + liWidth });
if (counter == (liCount - obj.slide)) { $(this).addClass("disable"); }
}
else { $(this).addClass("disable"); }
});
// Auto Run Script Start Here
if (obj.auto == true) {
t = setTimeout(function () { autorun() }, 2000);
}
function autorun() {
clearTimeout(t);
if ($("#" + obj.gallery).find("." + obj.next).hasClass("disable")) {
$("." + obj.prev).addClass("disable");
$("#" + obj.gallery).find("ul").animate({ "left": 0 });
$("." + obj.next).removeClass("disable");
counter = 0;
}
else {
$("." + obj.next).trigger("click");
}
t = setTimeout(function () { autorun() }, 2000);
}
// Auto Run Script Ends Here
};
Here I have provided you my Hand Written Script for Simple Image Gallery with details why and how it's working. I hope this code will help you to learn Slideshow animation of jquery.
If you guys want to modify or enhance any kind of its feature or have any suggestions please ask for it. So that i can improve my ability of writing jquery codes.
